Electron 网络与外部通信

Electron 中的网络与外部通信

Electron 应用可以轻松进行外部网络通信（如 HTTP/HTTPS 请求、WebSocket），得益于 Chromium 的网络栈和 Node.js 的集成。主进程（main process）和渲染进程（renderer process）都有多种方式访问网络，但出于安全考虑，推荐在主进程中处理敏感请求。

1. HTTP/HTTPS 请求方式

Electron 提供多种 API 和库进行网络请求，选择取决于进程位置和需求。

方式	适用进程	描述与优点	缺点/注意事项	示例库/模块
标准 fetch()	渲染进程	浏览器原生 API，简单易用，支持 CORS。	受浏览器安全限制（如 CORS），不处理代理完美。	直接使用 fetch
Electron net 模块	主进程（推荐）	使用 Chromium 网络栈，支持代理、认证、隧道等。	Node.js 风格（ClientRequest）或现代 fetch。	require('electron').net
net.fetch()	主进程/会话	Electron 25+ 新增，类似浏览器 fetch，但用 Chromium 栈。	更现代、Promise-based。	net.fetch(url)
Node.js http/https	主进程	纯 Node.js 实现。	代理支持较差。	require('http')
第三方库	两者	如 axios、node-fetch。	额外依赖；node-fetch 用 Node 栈。	axios, node-fetch
electron-fetch	主进程	fetch API 兼容，但用 Electron net 后端。	代理支持更好。	npm i electron-fetch

• 推荐实践：
• 渲染进程：直接用 fetch() 或 axios，适合公开 API（无密钥）。
• 主进程：用 net 模块或 net.fetch() 处理含密钥/敏感请求，避免暴露到渲染进程。
• 通过 IPC（进程间通信）桥接：渲染进程发送请求指令，主进程执行并返回结果。
• net 模块示例（主进程）：

  const { net } = require('electron');

  // 传统 ClientRequest 风格
  const request = net.request('https://api.example.com/data');
  request.on('response', (response) => {
    response.on('data', (chunk) => {
      console.log(`BODY: ${chunk}`);
    });
    response.on('end', () => {
      console.log('No more data');
    });
  });
  request.end();

  // 现代 net.fetch()（Electron 25+）
  async function fetchData() {
    const response = await net.fetch('https://api.example.com/data');
    if (response.ok) {
      const data = await response.json();
      console.log(data);
    }
  }

• session 管理：
  使用 session 模块自定义会话（cookies、代理、缓存）。

  const { session } = require('electron');
  const ses = session.fromPartition('persist:myapp');
  const response = await ses.fetch('https://example.com');  // 从自定义 session 请求

2. WebSocket 通信

• 渲染进程：直接用浏览器原生 WebSocket 对象。

  const ws = new WebSocket('wss://example.com/socket');
  ws.onmessage = (event) => console.log(event.data);

• 主进程：用 Node.js 库如 ws 或 socket.io，适合后台长连接（如实时通知）。
• 与外部服务器通信：两者均可，渲染进程更简单，主进程更适合隐藏密钥。

3. 进程间通信（IPC）与网络结合

网络请求常结合 IPC 使用，确保安全：

• 渲染进程不直接暴露 Node.js 或密钥。
• 使用 ipcMain 和 ipcRenderer：

  // preload.js（安全暴露）
  const { contextBridge, ipcRenderer } = require('electron');
  contextBridge.exposeInMainWorld('api', {
    fetchData: (url) => ipcRenderer.invoke('fetch-data', url)
  });

  // 主进程
  const { ipcMain, net } = require('electron');
  ipcMain.handle('fetch-data', async (event, url) => {
    const response = await net.fetch(url);
    return await response.json();
  });

  // 渲染进程
  window.api.fetchData('https://api.example.com').then(data => console.log(data));

4. 安全性与最佳实践

• 上下文隔离：启用 contextIsolation: true，通过 preload 脚本暴露有限 API。
• CORS 处理：渲染进程 fetch 受 CORS 限制；主进程 net 不受影响。
• 代理支持：net 模块自动处理系统代理、认证（basic/digest/NTLM）。
• 证书与 HTTPS：用 app.on('certificate-error') 处理自签名证书。
• 性能：大文件上传用 chunked encoding；避免在渲染进程阻塞 UI。
• 调试：用 netLog 模块记录网络日志。
• 打包注意：第三方库需确保兼容 ASAR。

这些方式让 Electron 应用能安全高效地与外部 API、服务器通信。如果需要特定场景（如 OAuth、上传文件）示例，请提供更多细节！