小程序 websocket

微信的 WebSocket 接口和HTML5的 WebSocket 基本一样，是HTTP协议升级来的，做为一个新的 Socket 在B/S上使用，它实现了浏览器与唯蚂伏服务器全双工通信。

因为这里是做小程序，所以就不对 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的使用 断开重连、心跳机制

如果在使用中遇到什么问题 ，可以给我 留言 ，看到留言后会在第一时间进行回复 。

---