WebSocket在微信小程序与H5中行为差异显著：小程序须用wx.connectSocket等API，无原生WebSocket；H5直接使用new WebSocket；二者连接、发送、生命周期、重连、消息处理均需分别适配并统一抽象。
WebSocket 在微信小程序和 H5（浏览器）环境中行为差异显著，不能直接复用同一套连接逻辑。核心区别在于：小程序不支持原生 WebSocket 构造函数，必须使用 wx.connectSocket 系列 API；而 H5 可直接使用标准 WebSocket 对象。适配关键在于抽象通信层、按环境切换实现，并统一事件与错误处理。
API 调用方式完全不同
微信小程序中没有 window.WebSocket，所有操作需通过 wx.connectSocket、wx.onSocketOpen、wx.sendSocketMessage 等 wx API 完成；H5 则使用 new WebSocket(url) 并监听 onopen、onmessage 等属性或事件。
- 小程序发起连接：
wx.connectSocket({ url: 'wss://...' })，失败时触发fail回调，无 Promise 返回 - H5 发起连接：
const ws = new WebSocket('wss://...')，通过ws.readyState判断状态，事件绑定为ws.onopen = () => {...} - 小程序发送消息必须等
onSocketOpen触发后才安全；H5 需检查ws.readyState === WebSocket.OPEN
连接生命周期与重连机制需分别设计
小程序的 socket 生命周期受微信客户端管控更强——前后台切换、页面卸载、长时间无响应都可能导致连接被主动关闭，且不会自动重连；H5 中页面刷新即断开，但开发者可自主控制重试逻辑。
- 小程序建议在
onHide时主动wx.closeSocket()，在onShow后重新 connect，避免后台无效占用 - H5 可监听
beforeunload或visibilitychange做清理，但重连通常由业务层驱动（如定时检测ws.readyState） - 两者都应实现指数退避重连，但小程序需注意
fail回调中无法直接再调connectSocket（部分旧基础库有并发限制），建议加延时或节流
消息收发与数据格式需统一抽象
小程序 sendSocketMessage 只接受 String 或 ArrayBuffer，不支持自动序列化；H5 的 ws.send() 同样只接受字符串或二进制。若业务使用 JSON，必须手动 JSON.stringify() 和 JSON.parse()，且需约定好编码（如 UTF-8）。
- 推荐封装统一的
sendMessage(data)方法：内部判断环境，对 data 做标准化序列化（如总是转为字符串），再分发到对应 API - 小程序接收消息是
onSocketMessage({ data })，data 类型可能是String或ArrayBuffer，需显式判断并转换；H5 的event.data类型同理，但更常见为字符串 - 建议服务端返回结构统一（如固定含
type、payload字段），前端解析逻辑集中，降低双端差异影响
调试与兼容性注意事项
开发阶段容易忽略环境判断导致白屏或静默失败。真机调试时，小程序要求域名在「合法域名列表」中且必须为 wss（不允许 ws）；H5 在非 HTTPS 页面中可使用 ws，但 Chrome 等现代浏览器已限制混合内容，生产环境也应强制 wss。
- 小程序基础库
2.10.0+支持socketTask实例（类似 Promise 化封装），但低版本仍需回调嵌套，建议用minPlatformVersion做渐进增强 - H5 中需兼容 Safari 旧版对
binaryType的处理差异，小程序则无需关心此字段 - 可在启动时通过
typeof wx !== 'undefined'或typeof WebSocket !== 'undefined'快速识别环境，避免运行时报错
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
