微信小程序WebSocket怎么连微信小程序实现实时聊天功能【案例】-js教程-PHP中文网

微信小程序WebSocket必须用wx.connectSocket，不支持new WebSocket()；需配置wss合法域名、正确监听onSocketOpen/onSocketMessage，且header与protocols须匹配服务端要求。

微信小程序websocket怎么连微信小程序实现实时聊天功能【案例】

微信小程序 WebSocket 连接必须用 `wx.connectSocket`，不能用 `new WebSocket()`

小程序环境不支持浏览器原生 WebSocket 构造函数，直接写 new WebSocket('wss://...') 会报 ReferenceError: WebSocket is not defined。必须使用微信提供的 wx.connectSocket API，它才是唯一合法入口。

常见错误现象：

在开发者工具里能连上，真机断连 —— 很可能没配合法域名或用了 ws://（必须 wss://）
调用 wx.connectSocket 后没反应 —— 忘了监听 onOpen，或把监听写在了 success 回调里（已废弃）
连接成功但收不到消息 —— 没正确绑定 wx.onSocketMessage，且该监听必须在连接建立前注册（推荐在 onLoad 就设好）

实操建议：

url 参数必须是 wss:// 开头，且域名需在「微信公众平台 → 开发管理 → 开发设置 → socket 合法域名」中提前备案并添加
不要在 connectSocket 的 success 或 fail 里处理业务逻辑，它们只表示 API 调用是否发起成功，不反映连接状态
所有事件监听（onOpen、onMessage、onClose、onError）必须用 wx.onSocketXXX 全局方法注册，且建议在页面 onLoad 阶段一次性完成

`wx.connectSocket` 的 `header` 和 `protocols` 怎么用

这两个参数不是摆设，尤其在需要身份透传或协议协商时很关键。

使用场景：

header：常用于携带用户 token 或设备信息，比如 { 'X-User-ID': '123', 'X-Auth-Token': 'abc' }，服务端可在握手阶段校验，避免连接后还要额外鉴权
protocols：数组类型，如 ['chat-v2', 'json']，服务端可据此选择子协议（subprotocol），比如区分聊天、通知、心跳等不同用途的连接通道

注意点：

header 中的 key 不支持下划线（_），部分服务器（如 Nginx 反向代理）会自动过滤带下划线的 header，建议用短横线（X-User-Id）
protocols 必须和服务端返回的 Sec-WebSocket-Protocol 响应头完全匹配，否则连接会被关闭
微信开发者工具对 header 支持较全，但某些安卓低版本真机可能忽略自定义 header，建议服务端同时支持 query 参数 fallback（如 wss://api.example.com/chat?uid=123&token=abc）

消息收发必须区分 `wx.sendSocketMessage` 和 `wx.onSocketMessage` 的生命周期

很多人以为发消息就是调一次 wx.sendSocketMessage，收消息靠 onSocketMessage 监听 —— 这没错，但容易忽略两个致命前提：

微信创作

自动将 Markdown 文章转为适配微信公众号格式的 HTML，并批量发布至公众号草稿箱，支持封面图生成与专题管理。

下载

发送前必须确保连接已就绪（readyState === 1），否则会静默失败；建议加一层状态判断：if (wx.getStorageSync('wsReady')) { wx.sendSocketMessage(...) }
onSocketMessage 是全局监听，只要页面没销毁就会持续生效，但它的回调参数 res.data 类型不固定：文本消息是 string，二进制消息是 ArrayBuffer，务必用 typeof res.data === 'string' 判断后再 JSON.parse

典型错误：

在 onSocketOpen 回调里立刻发登录消息，但此时连接刚建立，服务端可能还没完成 session 初始化，导致消息被丢弃
收到消息后直接 this.setData({ messages: [...this.data.messages, res.data] })，如果 res.data 是 ArrayBuffer，会触发渲染异常
频繁调用 sendSocketMessage 且不节流，遇到网络抖动时堆积大量未发送任务，最终连接被服务端踢出

建议做法：

连接成功后先发一条轻量 auth 消息，服务端验证通过再返回 {"type":"auth_ok"}，客户端收到后再允许 UI 交互
对发送操作做简单队列封装，避免并发冲突；对大消息（如图片 base64）拆包或改走 HTTP 上传

真机调试连不上？重点查这三处配置

开发者工具能通 ≠ 真机能通，90% 的真机连接失败卡在这三个地方：

域名未备案或未填入「socket 合法域名」：必须是完整域名（如 api.example.com），不能带路径或端口；国内服务器必须有 ICP 备案号，且备案主体需与小程序主体一致
证书问题：服务端 wss:// 使用的 SSL 证书必须由可信 CA 签发（Let’s Encrypt 可以），自签名证书、过期证书、域名不匹配都会导致 iOS/Android 拒绝连接
防火墙或反向代理拦截：Nginx 配置里漏了 proxy_http_version 1.1 和 proxy_set_header Upgrade $http_upgrade，会导致 WebSocket 握手失败，错误日志里常出现 101 Switching Protocols 缺失