uni-app中应使用uni.connectSocket创建WebSocket连接,因其跨端兼容;需传wss://协议URL、onReady后调用、encodeURIComponent查询参数、onSocketOpen后发送消息、手动实现心跳与重连,并全局管理单实例。

uni-app里怎么创建WebSocket连接
直接用uni.connectSocket,不是new WebSocket()——后者在App端和小程序端根本不可用,H5端虽然能跑但会破坏跨端一致性。
关键点在于:uni-app的WebSocket是封装过的统一API,所有平台走同一套逻辑,但行为细节有差异。
-
uni.connectSocket必须传url,且协议必须是wss://(小程序强制要求),ws://只在H5调试时可能临时通,上线必炸 - 不能在
onLoad里立刻调,建议等onReady之后再连,尤其App端对页面生命周期敏感 - URL里别带查询参数?错。可以带,但得
encodeURIComponent处理,比如?token=abc+def不编码会断连
连接成功后收发消息要注意什么
别直接在uni.connectSocket回调里写send——连接刚建立,底层通道未必就绪,大概率报fail websocket not connected。
正确做法是等uni.onSocketOpen触发后再发第一条消息。收消息用uni.onSocketMessage,注意它只传event.data,类型可能是String或ArrayBuffer,取决于服务端发的是文本还是二进制。
- 发送文本用
uni.sendSocketMessage({ data: 'xxx' }),data必须是字符串或ArrayBuffer,传对象会静默失败 - 想发JSON?自己
JSON.stringify(),服务端也得对应解析 - H5端支持
binaryType: 'arraybuffer',但App和小程序不认这个配置,统一按服务端返回类型处理
断网、切后台、小程序被回收时怎么保活
uni-app没自动重连。掉线不会自动恢复,得自己监听并手动重试。
核心监听点就三个:uni.onSocketError(连接失败)、uni.onSocketClose(主动或被动断开)、App/小程序的生命周期事件(如onHide)。
- 小程序切后台时,微信会主动关闭WebSocket,
onSocketClose会触发,但event.code是1001,不是错误,别当成异常打日志 - App端切到后台,iOS会很快断连,Android稍长,但都不可靠,
onHide里建议uni.closeSocket()再清状态,避免残留 - 重连别用
setTimeout硬等,加个指数退避:第一次1s,第二次3s,第三次9s……最多试5次,否则用户切回来卡在“重连中”
多个页面都要用WebSocket怎么办
别每个页面都新建连接。一个App同一时刻只需要一个WebSocket实例,多连会冲垮服务端,也浪费资源。
推荐用全局管理:在main.js或单独的socket.js里初始化并暴露send/onMessage方法,各页面通过import或uni.$emit通信。
- 不要把
socketTask存在Vue.prototype上,App端容易内存泄漏;存到getApp().globalData更稳妥 - 页面卸载前(
onUnload)别closeSocket,除非是登出场景;否则其他页面还等着收消息 - 如果某页面需要独占连接(比如独立IM模块),至少加个命名空间字段在每条消息里,服务端做路由,别真开第二个连接
最麻烦的其实是服务端心跳——uni-app没有内置心跳机制,ping/pong得自己定时sendSocketMessage,而且得等对方回ack才算有效。很多问题表面是“断连”,实际是服务端单方面踢了没心跳的客户端。

















