当前位置：首页 > news >正文

Electron 网络与外部通信

news 2026/6/23 23:00:22

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 风格constrequest=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+）asyncfunctionfetchData(){constresponse=awaitnet.fetch('https://api.example.com/data');if(response.ok){constdata=awaitresponse.json();console.log(data);}}

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

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

2.WebSocket 通信

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

constws=newWebSocket('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)=>{constresponse=awaitnet.fetch(url);returnawaitresponse.json();});// 渲染进程window.api.fetchData('https://api.example.com').then(data=>console.log(data));