WebSocket onmessage 安全解析需四步：一在onopen中绑定监听器防覆盖；二用try-catch包裹JSON.parse并校验字段；三据传输格式设binaryType并正确解码；四按type分发至handlerMap处理。
在HTML5中，onmessage 是 WebSocket 接收数据的核心入口，但直接解析 JSON 指令容易因格式异常、类型错配或执行中断导致静默失败。关键不是“能不能 parse”，而是“如何安全、稳定、可维护地解析”。
确保 onmessage 绑定时机正确
很多问题源于监听器挂载太早或被覆盖：
- 不要在 new WebSocket() 后立刻赋值 ws.onmessage，此时连接可能未就绪；
- 统一在 onopen 回调内绑定 onmessage，保证连接已建立、状态为 OPEN；
- 优先使用 ws.addEventListener('message', handler) 替代多次赋值 ws.onmessage，避免监听器被意外覆盖。
用 try-catch 包裹 JSON 解析逻辑
服务端推送的 data 可能不是合法 JSON（如调试日志、空字符串、二进制乱码），不加防护会导致整个 onmessage 处理中断：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 始终对 event.data 调用 JSON.parse() 做 try-catch 封装；
- 捕获 SyntaxError 时打印原始 event.data，便于定位后端格式问题；
- 解析成功后，建议校验必要字段（如 type、payload），缺失则 warn 而非 throw。
区分文本与二进制，提前设置 binaryType
如果后端推送的是压缩 JSON 或 Protobuf 编码的 ArrayBuffer，而前端未设置 ws.binaryType = 'arraybuffer'，event.data 会是无意义的 DOMString，JSON.parse 必然失败：
立即学习“前端免费学习笔记（深入）”；
- 明确与后端约定传输格式：纯文本指令用默认（DOMString）；
- 若含二进制内容（如 base64 图像、加密 payload），连接建立后立即设置 ws.binaryType = 'arraybuffer'；
- 收到 ArrayBuffer 时，先转为字符串再解析：new TextDecoder().decode(event.data)。
按指令类型分发处理，避免单一大函数
将解析后的 JSON 按 type 字段路由到对应处理器，提升可读性与可测性：
- 定义 handlerMap = { 'ALERT': handleAlert, 'UPDATE': handleUpdate, 'PONG': () => {} }；
- 在 onmessage 中解析出 msg.type 后，检查 handlerMap[msg.type] 是否存在并调用；
- 未识别 type 时记录 warning，不 crash，保障其他指令继续生效。
