进程间通信

进程间通信 (IPC) 是在 Electron 中构建功能丰富的桌面应用程序的关键部分。由于主进程和渲染器进程在 Electron 的进程模型中承担不同的职责，IPC 是执行许多常见任务的唯一方法，例如从您的 UI 调用原生 API 或从原生菜单触发 Web 内容的更改。

IPC 通道

在 Electron 中，进程通过 ipcMain 和 ipcRenderer 模块，通过开发者定义的“通道”传递消息来进行通信。这些通道是任意的（您可以随意命名它们）和双向的（您可以在两个模块中使用相同的通道名称）。

在本指南中，我们将通过具体的示例介绍一些基本的 IPC 模式，您可以将这些示例用作应用程序代码的参考。

了解上下文隔离的进程

在继续了解实现细节之前，您应该熟悉使用预加载脚本在上下文隔离的渲染器进程中导入 Node.js 和 Electron 模块的概念。

有关 Electron 进程模型的完整概述，您可以阅读进程模型文档。
有关使用 contextBridge 模块从您的预加载脚本公开 API 的入门知识，请查看上下文隔离教程。

模式 1：渲染器到主进程（单向）

要从渲染器进程向主进程触发单向 IPC 消息，您可以使用 ipcRenderer.send API 发送消息，然后由 ipcMain.on API 接收。

您通常使用此模式从您的 Web 内容中调用主进程 API。我们将通过创建一个简单的应用程序来演示此模式，该应用程序可以以编程方式更改其窗口标题。

对于此演示，您需要将代码添加到您的主进程、渲染器进程和预加载脚本。完整代码如下，但我们将在以下部分中单独解释每个文件。

docs/fiddles/ipc/pattern-1 (34.0.0)在 Fiddle 中打开

main.js
preload.js
index.html
renderer.js

const { app, BrowserWindow, ipcMain } = require('electron/main')
const path = require('node:path')

function createWindow () {
  const mainWindow = new BrowserWindow({
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  ipcMain.on('set-title', (event, title) => {
    const webContents = event.sender
    const win = BrowserWindow.fromWebContents(webContents)
    win.setTitle(title)
  })

  mainWindow.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

const { contextBridge, ipcRenderer } = require('electron/renderer')

contextBridge.exposeInMainWorld('electronAPI', {
  setTitle: (title) => ipcRenderer.send('set-title', title)
})

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://mdn.org.cn/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello World!</title>
  </head>
  <body>
    Title: <input id="title"/>
    <button id="btn" type="button">Set</button>
    <script src="./renderer.js"></script>
  </body>
</html>

const setButton = document.getElementById('btn')
const titleInput = document.getElementById('title')
setButton.addEventListener('click', () => {
  const title = titleInput.value
  window.electronAPI.setTitle(title)
})

1. 使用 `ipcMain.on` 监听事件

在主进程中，使用 ipcMain.on API 在 set-title 通道上设置 IPC 监听器

main.js（主进程）
const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('node:path')

// ...

function handleSetTitle (event, title) {
  const webContents = event.sender
  const win = BrowserWindow.fromWebContents(webContents)
  win.setTitle(title)
}

function createWindow () {
  const mainWindow = new BrowserWindow({
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  mainWindow.loadFile('index.html')
}

app.whenReady().then(() => {
  ipcMain.on('set-title', handleSetTitle)
  createWindow()
})
// ...

上面的 handleSetTitle 回调有两个参数：一个 IpcMainEvent 结构和一个 title 字符串。每当有消息通过 set-title 通道传来时，此函数将查找附加到消息发送者的 BrowserWindow 实例，并在其上使用 win.setTitle API。

信息

请确保您正在为以下步骤加载 index.html 和 preload.js 入口点！

2. 通过预加载脚本公开 `ipcRenderer.send`

要向上面创建的监听器发送消息，您可以使用 ipcRenderer.send API。默认情况下，渲染器进程没有 Node.js 或 Electron 模块的访问权限。作为应用程序开发人员，您需要使用 contextBridge API 选择要从预加载脚本公开的 API。

在您的预加载脚本中，添加以下代码，这将向您的渲染器进程公开一个全局 window.electronAPI 变量。

preload.js（预加载脚本）
const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
  setTitle: (title) => ipcRenderer.send('set-title', title)
})

此时，您将能够在渲染器进程中使用 window.electronAPI.setTitle() 函数。

安全警告

出于安全原因，我们不会直接公开整个 ipcRenderer.send API。请确保尽可能限制渲染器对 Electron API 的访问。

3. 构建渲染器进程 UI

在我们的 BrowserWindow 加载的 HTML 文件中，添加一个基本的用户界面，其中包含一个文本输入框和一个按钮

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://mdn.org.cn/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello World!</title>
  </head>
  <body>
    Title: <input id="title"/>
    <button id="btn" type="button">Set</button>
    <script src="./renderer.js"></script>
  </body>
</html>

为了使这些元素具有交互性，我们将在导入的 renderer.js 文件中添加几行代码，该代码利用从预加载脚本公开的 window.electronAPI 功能

renderer.js（渲染器进程）
const setButton = document.getElementById('btn')
const titleInput = document.getElementById('title')
setButton.addEventListener('click', () => {
  const title = titleInput.value
  window.electronAPI.setTitle(title)
})

此时，您的演示应该完全正常运行。尝试使用输入字段，看看您的 BrowserWindow 标题会发生什么变化！

模式 2：渲染器到主进程（双向）

双向 IPC 的常见应用是从您的渲染器进程代码调用主进程模块并等待结果。这可以通过使用 ipcRenderer.invoke 与 ipcMain.handle 配对来实现。

在以下示例中，我们将从渲染器进程打开一个原生文件对话框，并返回选定文件的路径。

对于此演示，您需要将代码添加到您的主进程、渲染器进程和预加载脚本。完整代码如下，但我们将在以下部分中单独解释每个文件。

docs/fiddles/ipc/pattern-2 (34.0.0)在 Fiddle 中打开

main.js
preload.js
index.html
renderer.js

const { app, BrowserWindow, ipcMain, dialog } = require('electron/main')
const path = require('node:path')

async function handleFileOpen () {
  const { canceled, filePaths } = await dialog.showOpenDialog()
  if (!canceled) {
    return filePaths[0]
  }
}

function createWindow () {
  const mainWindow = new BrowserWindow({
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  mainWindow.loadFile('index.html')
}

app.whenReady().then(() => {
  ipcMain.handle('dialog:openFile', handleFileOpen)
  createWindow()
  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

const { contextBridge, ipcRenderer } = require('electron/renderer')

contextBridge.exposeInMainWorld('electronAPI', {
  openFile: () => ipcRenderer.invoke('dialog:openFile')
})

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://mdn.org.cn/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Dialog</title>
  </head>
  <body>
    <button type="button" id="btn">Open a File</button>
    File path: <strong id="filePath"></strong>
    <script src='./renderer.js'></script>
  </body>
</html>

const btn = document.getElementById('btn')
const filePathElement = document.getElementById('filePath')

btn.addEventListener('click', async () => {
  const filePath = await window.electronAPI.openFile()
  filePathElement.innerText = filePath
})

1. 使用 `ipcMain.handle` 监听事件

在主进程中，我们将创建一个 handleFileOpen() 函数，该函数调用 dialog.showOpenDialog 并返回用户选择的文件路径的值。每当有 ipcRender.invoke 消息通过 dialog:openFile 通道从渲染器进程发送时，此函数都用作回调。然后，返回值将作为 Promise 返回给原始的 invoke 调用。

关于错误处理的说明

通过主进程中的 handle 抛出的错误不是透明的，因为它们会被序列化，并且只向渲染器进程提供原始错误的 message 属性。有关详细信息，请参阅 #24427。

main.js（主进程）
const { app, BrowserWindow, dialog, ipcMain } = require('electron')
const path = require('node:path')

// ...

async function handleFileOpen () {
  const { canceled, filePaths } = await dialog.showOpenDialog({})
  if (!canceled) {
    return filePaths[0]
  }
}

function createWindow () {
  const mainWindow = new BrowserWindow({
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  mainWindow.loadFile('index.html')
}

app.whenReady().then(() => {
  ipcMain.handle('dialog:openFile', handleFileOpen)
  createWindow()
})
// ...

关于通道名称

IPC 通道名称上的 dialog: 前缀对代码没有影响。它仅用作有助于提高代码可读性的命名空间。

信息

请确保您正在为以下步骤加载 index.html 和 preload.js 入口点！

2. 通过预加载脚本公开 `ipcRenderer.invoke`

在预加载脚本中，我们公开一个单行的 openFile 函数，该函数调用并返回 ipcRenderer.invoke('dialog:openFile') 的值。我们将在下一步中使用此 API 从渲染器的用户界面调用原生对话框。

preload.js（预加载脚本）
const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
  openFile: () => ipcRenderer.invoke('dialog:openFile')
})

安全警告

出于安全原因，我们不会直接公开整个 ipcRenderer.invoke API。请确保尽可能限制渲染器对 Electron API 的访问。

3. 构建渲染器进程 UI

最后，让我们构建加载到我们的 BrowserWindow 中的 HTML 文件。

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://mdn.org.cn/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Dialog</title>
  </head>
  <body>
    <button type="button" id="btn">Open a File</button>
    File path: <strong id="filePath"></strong>
    <script src='./renderer.js'></script>
  </body>
</html>

用户界面包含一个 #btn 按钮元素，用于触发我们的预加载 API，以及一个 #filePath 元素，用于显示所选文件的路径。要使这些部分正常工作，需要在渲染器进程脚本中编写几行代码。

renderer.js（渲染器进程）
const btn = document.getElementById('btn')
const filePathElement = document.getElementById('filePath')

btn.addEventListener('click', async () => {
  const filePath = await window.electronAPI.openFile()
  filePathElement.innerText = filePath
})

在上面的代码片段中，我们监听 #btn 按钮的点击事件，并调用 window.electronAPI.openFile() API 来激活本地的“打开文件”对话框。然后，我们在 #filePath 元素中显示所选文件的路径。

注意：旧方法

ipcRenderer.invoke API 在 Electron 7 中添加，作为一种开发者友好的方式来处理来自渲染器进程的双向 IPC。但是，这种 IPC 模式存在几种替代方法。

尽可能避免使用旧方法

我们建议尽可能使用 ipcRenderer.invoke。以下两种双向渲染器到主进程的模式仅出于历史原因记录在案。

信息

对于以下示例，我们直接从预加载脚本调用 ipcRenderer，以保持代码示例简洁。

使用 `ipcRenderer.send`

我们用于单向通信的 ipcRenderer.send API 也可以用于执行双向通信。在 Electron 7 之前，这是推荐的通过 IPC 进行异步双向通信的方式。

preload.js（预加载脚本）
// You can also put expose this code to the renderer
// process with the `contextBridge` API
const { ipcRenderer } = require('electron')

ipcRenderer.on('asynchronous-reply', (_event, arg) => {
  console.log(arg) // prints "pong" in the DevTools console
})
ipcRenderer.send('asynchronous-message', 'ping')

main.js（主进程）
ipcMain.on('asynchronous-message', (event, arg) => {
  console.log(arg) // prints "ping" in the Node console
  // works like `send`, but returning a message back
  // to the renderer that sent the original message
  event.reply('asynchronous-reply', 'pong')
})

这种方法有几个缺点

您需要在渲染器进程中设置第二个 ipcRenderer.on 监听器来处理响应。使用 invoke，您会获得作为 Promise 返回到原始 API 调用的响应值。
没有明显的方法将 asynchronous-reply 消息与原始的 asynchronous-message 消息配对。如果这些通道之间有非常频繁的消息来回传递，则需要添加额外的应用程序代码来单独跟踪每个调用和响应。

使用 `ipcRenderer.sendSync`

ipcRenderer.sendSync API 向主进程发送消息，并同步等待响应。

main.js（主进程）
const { ipcMain } = require('electron')
ipcMain.on('synchronous-message', (event, arg) => {
  console.log(arg) // prints "ping" in the Node console
  event.returnValue = 'pong'
})

preload.js（预加载脚本）
// You can also put expose this code to the renderer
// process with the `contextBridge` API
const { ipcRenderer } = require('electron')

const result = ipcRenderer.sendSync('synchronous-message', 'ping')
console.log(result) // prints "pong" in the DevTools console

此代码的结构与 invoke 模型非常相似，但出于性能原因，我们建议避免使用此 API。它的同步性质意味着它会阻塞渲染器进程，直到收到回复。

模式 3：主进程到渲染器进程

当从主进程向渲染器进程发送消息时，您需要指定哪个渲染器接收消息。消息需要通过其 WebContents 实例发送到渲染器进程。此 WebContents 实例包含一个 send 方法，该方法可以像 ipcRenderer.send 一样使用。

为了演示这种模式，我们将构建一个由本地操作系统菜单控制的数字计数器。

对于此演示，您需要将代码添加到您的主进程、渲染器进程和预加载脚本。完整代码如下，但我们将在以下部分中单独解释每个文件。

docs/fiddles/ipc/pattern-3 (34.0.0)在 Fiddle 中打开

main.js
preload.js
index.html
renderer.js

const { app, BrowserWindow, Menu, ipcMain } = require('electron/main')
const path = require('node:path')

function createWindow () {
  const mainWindow = new BrowserWindow({
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  const menu = Menu.buildFromTemplate([
    {
      label: app.name,
      submenu: [
        {
          click: () => mainWindow.webContents.send('update-counter', 1),
          label: 'Increment'
        },
        {
          click: () => mainWindow.webContents.send('update-counter', -1),
          label: 'Decrement'
        }
      ]
    }

  ])

  Menu.setApplicationMenu(menu)
  mainWindow.loadFile('index.html')

  // Open the DevTools.
  mainWindow.webContents.openDevTools()
}

app.whenReady().then(() => {
  ipcMain.on('counter-value', (_event, value) => {
    console.log(value) // will print value to Node console
  })
  createWindow()

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

const { contextBridge, ipcRenderer } = require('electron/renderer')

contextBridge.exposeInMainWorld('electronAPI', {
  onUpdateCounter: (callback) => ipcRenderer.on('update-counter', (_event, value) => callback(value)),
  counterValue: (value) => ipcRenderer.send('counter-value', value)
})

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://mdn.org.cn/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Menu Counter</title>
  </head>
  <body>
    Current value: <strong id="counter">0</strong>
    <script src="./renderer.js"></script>
  </body>
</html>

const counter = document.getElementById('counter')

window.electronAPI.onUpdateCounter((value) => {
  const oldValue = Number(counter.innerText)
  const newValue = oldValue + value
  counter.innerText = newValue.toString()
  window.electronAPI.counterValue(newValue)
})

1. 使用 `webContents` 模块发送消息

对于此演示，我们需要首先在主进程中使用 Electron 的 Menu 模块构建一个自定义菜单，该菜单使用 webContents.send API 将 IPC 消息从主进程发送到目标渲染器。

main.js（主进程）
const { app, BrowserWindow, Menu, ipcMain } = require('electron')
const path = require('node:path')

function createWindow () {
  const mainWindow = new BrowserWindow({
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  const menu = Menu.buildFromTemplate([
    {
      label: app.name,
      submenu: [
        {
          click: () => mainWindow.webContents.send('update-counter', 1),
          label: 'Increment'
        },
        {
          click: () => mainWindow.webContents.send('update-counter', -1),
          label: 'Decrement'
        }
      ]
    }
  ])
  Menu.setApplicationMenu(menu)

  mainWindow.loadFile('index.html')
}
// ...

就本教程而言，重要的是要注意 click 处理程序通过 update-counter 通道向渲染器进程发送消息（1 或 -1）。

click: () => mainWindow.webContents.send('update-counter', -1)

信息

请确保您正在为以下步骤加载 index.html 和 preload.js 入口点！

2. 通过预加载公开 `ipcRenderer.on`

与之前的渲染器到主进程示例一样，我们在预加载脚本中使用 contextBridge 和 ipcRenderer 模块，以将 IPC 功能公开给渲染器进程

preload.js（预加载脚本）
const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
  onUpdateCounter: (callback) => ipcRenderer.on('update-counter', (_event, value) => callback(value))
})

加载预加载脚本后，您的渲染器进程应该可以访问 window.electronAPI.onUpdateCounter() 监听器函数。

安全警告

出于安全原因，我们不会直接公开整个 ipcRenderer.on API。请确保尽可能限制渲染器对 Electron API 的访问。也不要仅仅将回调传递给 ipcRenderer.on，因为这会通过 event.sender 泄露 ipcRenderer。使用自定义处理程序，该处理程序仅使用所需的参数调用 callback。

信息

在这个最小的示例中，您可以直接在预加载脚本中调用 ipcRenderer.on，而不是通过上下文桥公开它。

preload.js（预加载脚本）
const { ipcRenderer } = require('electron')

window.addEventListener('DOMContentLoaded', () => {
  const counter = document.getElementById('counter')
  ipcRenderer.on('update-counter', (_event, value) => {
    const oldValue = Number(counter.innerText)
    const newValue = oldValue + value
    counter.innerText = newValue
  })
})

但是，与通过上下文桥公开预加载 API 相比，这种方法灵活性有限，因为您的监听器无法直接与渲染器代码交互。

3. 构建渲染器进程 UI

为了将所有内容联系在一起，我们将在加载的 HTML 文件中创建一个包含 #counter 元素的界面，我们将使用它来显示值

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://mdn.org.cn/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Menu Counter</title>
  </head>
  <body>
    Current value: <strong id="counter">0</strong>
    <script src="./renderer.js"></script>
  </body>
</html>

最后，为了使 HTML 文档中的值更新，我们将添加几行 DOM 操作，以便在触发 update-counter 事件时更新 #counter 元素的值。

renderer.js（渲染器进程）
const counter = document.getElementById('counter')

window.electronAPI.onUpdateCounter((value) => {
  const oldValue = Number(counter.innerText)
  const newValue = oldValue + value
  counter.innerText = newValue.toString()
})

在上面的代码中，我们将回调传递给从预加载脚本公开的 window.electronAPI.onUpdateCounter 函数。第二个 value 参数对应于我们从本地菜单的 webContents.send 调用中传入的 1 或 -1。

可选：返回回复

对于主进程到渲染器进程的 IPC，没有与 ipcRenderer.invoke 等效的功能。相反，您可以在 ipcRenderer.on 回调中将回复发送回主进程。

我们可以通过对前面示例中的代码进行细微修改来演示这一点。在渲染器进程中，公开另一个 API，通过 counter-value 通道将回复发送回主进程。

preload.js（预加载脚本）
const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
  onUpdateCounter: (callback) => ipcRenderer.on('update-counter', (_event, value) => callback(value)),
  counterValue: (value) => ipcRenderer.send('counter-value', value)
})

renderer.js（渲染器进程）
const counter = document.getElementById('counter')

window.electronAPI.onUpdateCounter((value) => {
  const oldValue = Number(counter.innerText)
  const newValue = oldValue + value
  counter.innerText = newValue.toString()
  window.electronAPI.counterValue(newValue)
})

在主进程中，监听 counter-value 事件并进行相应的处理。

main.js（主进程）
// ...
ipcMain.on('counter-value', (_event, value) => {
  console.log(value) // will print value to Node console
})
// ...

模式 4：渲染器进程到渲染器进程

没有使用 ipcMain 和 ipcRenderer 模块在 Electron 中渲染器进程之间发送消息的直接方法。为了实现这一点，您有两种选择

使用主进程作为渲染器之间的消息代理。这将涉及从一个渲染器向主进程发送消息，主进程会将消息转发到另一个渲染器。
将 MessagePort 从主进程传递给两个渲染器。这将允许渲染器在初始设置后进行直接通信。

对象序列化

Electron 的 IPC 实现使用 HTML 标准结构化克隆算法来序列化在进程之间传递的对象，这意味着只有某些类型的对象可以通过 IPC 通道传递。

特别是，DOM 对象（例如 Element、Location 和 DOMMatrix）、由 C++ 类支持的 Node.js 对象（例如 process.env、Stream 的某些成员）以及由 C++ 类支持的 Electron 对象（例如 WebContents、BrowserWindow 和 WebFrame）无法使用结构化克隆进行序列化。

IPC 通道​

了解上下文隔离的进程​

模式 1：渲染器到主进程（单向）​

1. 使用 ipcMain.on 监听事件​

2. 通过预加载脚本公开 ipcRenderer.send​

3. 构建渲染器进程 UI​

模式 2：渲染器到主进程（双向）​

1. 使用 ipcMain.handle 监听事件​

2. 通过预加载脚本公开 ipcRenderer.invoke​

3. 构建渲染器进程 UI​

注意：旧方法​

使用 ipcRenderer.send​

使用 ipcRenderer.sendSync​

模式 3：主进程到渲染器进程​

1. 使用 webContents 模块发送消息​

2. 通过预加载公开 ipcRenderer.on​

3. 构建渲染器进程 UI​

可选：返回回复​

模式 4：渲染器进程到渲染器进程​

对象序列化​

IPC 通道

了解上下文隔离的进程

模式 1：渲染器到主进程（单向）

1. 使用 `ipcMain.on` 监听事件

2. 通过预加载脚本公开 `ipcRenderer.send`

3. 构建渲染器进程 UI

模式 2：渲染器到主进程（双向）

1. 使用 `ipcMain.handle` 监听事件

2. 通过预加载脚本公开 `ipcRenderer.invoke`

3. 构建渲染器进程 UI

注意：旧方法

使用 `ipcRenderer.send`

使用 `ipcRenderer.sendSync`

模式 3：主进程到渲染器进程

1. 使用 `webContents` 模块发送消息

2. 通过预加载公开 `ipcRenderer.on`

3. 构建渲染器进程 UI

可选：返回回复

模式 4：渲染器进程到渲染器进程

对象序列化