因为这里是做小程序，所以就不对 WebSocket 的底层和协议做过多的说明了，只是稍微介绍一下。想了解详细的 WebSocket 可以参考如下：
具体方法如下：
创建一个 WebSocket 连接。
监听WebSocket连接打开事件。
监指携听WebSocket错误。
通过 WebSocket 连接发送数据，需要先 wx.connectSocket ，并在 wx.onSocketOpen 回调物纤之后才能发送。
监听WebSocket接受到服务器的消息事件。
关闭 WebSocket 连接。
定时心跳，按各种情况设置为10-20秒。心跳作用：通知后台保活，如果停止心跳消息，后台会主动断开，走断开流程。
使用过程中，可能因为网络问题，导致websocket断开连接，首先更具业务需求，判断是否需要重连，如果要重连不建议立刻重连，可做一个延迟 *** 作，再进行重连。
关于websocket的设置，API里边已经给了，wx.connectSocket(OBJECT)
创建一个 WebSocket 连接；一个微信小程序同时只能有一个 WebSocket 连接，如果当前已存在一个 WebSocket 连接，会自动关闭该连接，并重新创建一个 WebSocket 连接。
OBJECT参数说明：
参数
类型
必填
说明
urlString是开发者服务器接口地址，必须是 wss 协议，且域名必须是后台配置的合法念磨域名
dataObject否请求的数据
headerObject否HTTP Header , header 中不能设置 Referer
methodString否默认是GET，有效值为： OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）
示例代码：
wx.connectSocket({
url: 'test.php',
data:{
x: '',
y: ''
},
header:{
'content-type': 'application/json'
},
method:"GET"
})
wx.onSocketOpen(CALLBACK)
监听WebSocket连接打开事件。
示例代码：
wx.connectSocket({
url: 'test.php'
})
wx.onSocketOpen(function(res) {
console.log('WebSocket连接已打开！')
})
wx.onSocketError(CALLBACK)
监听WebSocket错误。
示例代码：
wx.connectSocket({
url: 'test.php'
})
wx.onSocketOpen(function(res){
console.log('WebSocket连接已打开！')
})
wx.onSocketError(function(res){
console.log('WebSocket连接打开失败，请检查！')
})
wx.sendSocketMessage(OBJECT)
通过 WebSocket 连接发送数据，需要先 wx.connectSocket，并在 wx.onSocketOpen 回调之后才能发送。
OBJECT参数说明：
参数
类型
必填
说明
dataString/ArrayBuffer是需要发送的内容
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用世高行结束的回调函数（调用搜哗成功、失败都会执行）
示例代码：
var socketOpen = false
var socketMsgQueue = []
wx.connectSocket({
url: 'test.php'
})
wx.onSocketOpen(function(res) {
socketOpen = true
for (var i = 0i <socketMsgQueue.lengthi++){
sendSocketMessage(socketMsgQueue[i])
}
socketMsgQueue = []
})
function sendSocketMessage(msg) {
if (socketOpen) {
wx.sendSocketMessage({
data:msg
})
} else {
socketMsgQueue.push(msg)
}
}
wx.onSocketMessage(CALLBACK)
监听WebSocket接受到服务器的消息事件。
CALLBACK返回参数：
参数
类型
说明
dataString/ArrayBuffer服务器返回的消息
示例代码：
wx.connectSocket({
url: 'test.php'
})
wx.onSocketMessage(function(res) {
console.log('收到服务器内容：' + res.data)
})
wx.closeSocket()
关闭WebSocket连接。
wx.onSocketClose(CALLBACK)
监听WebSocket关闭。
wx.connectSocket({
url: 'test.php'
})
//注意这里有时序问题，
//如果 wx.connectSocket 还没回调 wx.onSocketOpen，而先调用 wx.closeSocket，那么就做不到关闭 WebSocket 的目的。
//必须在 WebSocket 打开期间调用 wx.closeSocket 才能关闭。
wx.onSocketOpen(function() {
wx.closeSocket()
})
wx.onSocketClose(function(res) {
console.log('WebSocket 已关闭！')
})
Bug &Tip
tip: createSocket 链接默认和最大超时时间都是 60s
tip: 网络请求的 referer 是不可以设置的，格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 为小程序的 appid，{version} 为小程序的版本号，版本号为 0 表示为开发版。
在app.js的onshow中打开websocket，并设置在错误和失败的监听，当连接断开了的时候需要进行重新连接
在app.js的onhide的关闭websocket
这样避免用户打开小程序之后通过Home键退出的时候防止websocket的断开
最近关于H5和APP的开发中使用到了webSocket，由于web/app有时候会出现网络不稳定或者服务端主动断开，这时候导致消息推送不了的情况，需要客户端进行重连。查阅资料后发现了一个心跳机制，也就是客户端间隔一段时间就向服务器发送一条消息，梁坦哪如果服信颂务器收到消息就回复一条信息过来，如果一定时间内没有回复，则表橡码示已经与服务器断开连接了，这个时候就需要进行重连。
被动断开则进行重连，主动断开的不重连。
说明：下图针对两个Tab项（Open Trades 和 Closed Trades），只希望在 tabIndex = 0 （Open Trades 高亮时）触发webSocket , 如果点击第二个栏目 , tabIndex = 1（Closed Trades高亮时）则主动关闭webSodket连接。
TabIndex = 0 时 ，被动断开则自动重连
原文链接： uni-app中websocket的使用 断开重连、心跳机制
如果在使用中遇到什么问题 ，可以给我 留言 ，看到留言后会在第一时间进行回复 。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）