onmessage不能直接接收服务器推送,因其仅响应postMessage调用,而服务器无法主动执行该方法;正确方式是EventSource(SSE)或WebSocket。

onmessage 不是 HTML5 中用于接收服务器推送数据的事件,它属于 Web Workers 和 iframe 跨文档通信(postMessage) 的机制,**不直接处理服务器推送**。真正用于接收服务器实时推送数据的 HTML5 标准方案是 EventSource(Server-Sent Events, SSE) 和 WebSocket。
为什么 onmessage 不能直接接收服务器推送?
onmessage 是监听 消息事件 的回调函数,但它依赖于主动发送方(如 Worker、另一个 window/iframe)调用 postMessage() 才会触发。服务器无法直接调用浏览器端的 postMessage —— 它没有 JavaScript 执行环境,也不能主动向客户端“发消息”。所以:
- onmessage 本身不建立网络连接,也不解析 HTTP 流或 WebSocket 帧
- 它只是消息通道的“收件人”,不是“网关”
- 若误用 onmessage 等待后端推送,将永远收不到数据
正确接收服务器推送的两种主流方式
✅ Server-Sent Events(SSE)—— 单向推送(服务器→浏览器)
- 前端使用
EventSource创建连接:const es = new EventSource('/api/events') - 通过
es.onmessage = (e) => {...}或es.addEventListener('message', ...)接收纯文本事件 - 服务端需返回
Content-Type: text/event-stream并保持连接,按格式输出:data: {"msg":"hello"}\n\n
✅ WebSocket —— 全双工实时通信
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面,使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力: - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面; - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”; - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记(深入)”;
- 前端创建连接:
const ws = new WebSocket('wss://example.com') - 监听
ws.onmessage = (e) => {...},其中e.data是服务器发来的消息(字符串或 Blob) - 服务端需运行 WebSocket 服务(如 Node.js 的 ws 库、Python 的 websockets),主动调用
send()
什么时候会看到 onmessage 和服务器数据“一起出现”?
常见于“混合架构”场景:比如用 WebSocket 或 SSE 收到原始数据后,再由主线程通过 worker.postMessage() 把数据转给 Web Worker 处理,Worker 内部用 onmessage 接收 —— 此时 onmessage 接收的是**页面传入的数据中转结果**,而非直连服务器。
- 主线程:收到 WebSocket 消息 → 解析 →
myWorker.postMessage(parsedData) - Worker 内:
self.onmessage = (e) => { console.log(e.data); /* 处理计算/缓存等 */ }
小结:别混淆通信层级
HTTP 请求、SSE、WebSocket 属于网络层通信,负责与服务器建立连接并收发数据;postMessage + onmessage 属于同源/跨源脚本间通信,发生在浏览器内部不同执行上下文之间。两者定位不同,不可替代。


















