Electron 中 WebSocket 客户端不能直接在渲染进程裸用，因页面刷新会销毁实例、nodeIntegration 已弃用且不安全、无法统一管理重连/心跳/序列化；稳定方案是主进程托管连接，渲染进程通过预加载脚本安全调用。
Electron 中 WebSocket 客户端不能直接在渲染进程里裸用 WebSocket 连接生产环境的 wss 服务 —— 因为多数真实场景下，连接需复用、重连、状态同步、错误隔离，而这些靠单个 WebSocket 实例无法稳定支撑。
为什么不能在 renderer.js 里直接 new WebSocket()
看似能连上，但实际会踩三个坑：
- 页面刷新或路由跳转时，
WebSocket实例被销毁，连接断开且无法恢复 - 渲染进程沙箱环境下，
nodeIntegration: true已被弃用，强行开启有严重安全风险 - 无法统一管理心跳、重连策略、消息序列化/反序列化逻辑，不同组件各自实例易导致重复连接或内存泄漏
真正稳定的方案是：把连接生命周期交给主进程或独立子进程，渲染进程只负责发指令和收消息。
主进程托管 WebSocket 连接（推荐）
主进程天然具备长生命周期和 Node.js 环境，适合做连接中枢。关键点在于：
- 用
ipcMain暴露连接控制接口（如connect、send、close），不暴露原始WebSocket对象 - 连接失败时，通过
win.webContents.send('socket:error', err)主动通知渲染层，而非依赖onerror回调（该回调在 Electron 中不可靠） - 必须手动实现重连退避逻辑，例如首次失败后 1s 重试，后续每次 ×1.5 倍，上限 30s
- 不要在
BrowserWindow创建前就初始化连接 —— 主进程可能早于窗口启动，导致webContents为空
示例片段（main.js）：
WebSocket 8.18.2
下载
WebSocket 8.18.2 是该协议规范的一个重要迭代版本，主要优化了连接稳定性与数据传输效率。它通过全双工通信机制，允许客户端与服务器在单一长连接上实时交换数据，大幅降低传统 HTTP 轮询的开销。该版本增强了心跳保活、自动重连及二进制帧传输能力，适用于即时通讯、在线游戏及金融行情推送等低延迟场景，为开发者提供更可靠的实时网络交互基础。
const { app, BrowserWindow, ipcMain } = require('electron')
let ws = null
ipcMain.on('socket:connect', (event, url) => {
if (ws) return
ws = new WebSocket(url)
ws.onopen = () => event.sender.send('socket:ready')
ws.onmessage = (e) => event.sender.send('socket:message', e.data)
ws.onclose = () => {
ws = null
event.sender.send('socket:closed')
}
})
preload.js 中安全暴露 socket API
这是渲染进程唯一可信的入口。重点不是“能不能用”，而是“怎么限制它用”：
- 禁止暴露
WebSocket构造函数或原始实例，只封装成带校验的 Promise 方法 - 用
contextBridge.exposeInMainWorld+allowedUrls白名单过滤非法 server 地址（如仅允许wss://api.example.com） - 所有发送数据必须经
JSON.stringify，接收数据强制JSON.parse，避免原型污染 - 添加超时控制：
Promise.race([connect(), setTimeout(...)])防止挂起
示例（preload.js）：
const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('socket', {
connect: (url) => {
if (!/^wss?:\/\//.test(url)) throw new Error('Invalid protocol')
return ipcRenderer.invoke('socket:connect', url)
},
send: (data) => ipcRenderer.send('socket:send', data),
on: (event, cb) => ipcRenderer.on(event, cb)
})
渲染进程使用时的边界处理
前端代码里最常漏掉的是状态同步和资源清理：
- 组件
onUnmounted或beforeDestroy中必须调用ipcRenderer.removeAllListeners('socket:message')，否则多次加载组件会堆积监听器 - 不要在
onmessage回调里直接更新 Vue/React 状态 —— IPC 是异步事件，需确保当前组件仍存活（可用isMounted或ref标记判断） - 服务端推送二进制数据（如图片帧、音频流）时，
event.data可能是ArrayBuffer，需显式判断类型再处理，否则toString()会出错 - 调试时注意：DevTools 的 Network 面板看不到主进程发起的 WebSocket 流量，得靠
console.log或日志文件追踪
连接稳定性不取决于协议本身，而取决于你是否把重连、心跳、错误降级、状态快照这些“脏活”写进了主进程 —— 渲染进程只配做干净的 UI 代理。
