小程序 websocket

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

因为这里是做小程序，所以就不对 WebSocket 的底层和协议做过多的说明了，只是稍微介绍一下。想了解详细的 WebSocket 可以参考如下：

具体方法如下：

创建一个 WebSocket 连接。

监听WebSocket连接打开事件。

监听WebSocket错误。

通过 WebSocket 连接发送数据，需要先 wx.connectSocket ，并在 wx.onSocketOpen 回调之后才能发送。

监听WebSocket接受到服务器的消息事件。

关闭 WebSocket 连接。

定时心跳，按各种情况设置为10-20秒。心跳作用：通知后台保活，如果停止心跳消息，后台会主动断开，走断开流程。

使用过程中，可能因为网络问题，导致websocket断开连接，首先更具业务需求，判断是否需要重连，如果要重连不建议立刻重连，可做一个延迟 *** 作，再进行重连。

小程序的websocket协议是wss的，可以理解为ws+ssl，刚上线的时候只能够开一个websocket的入口，针对于单纯的聊天应用或者简单的交互应用是足够的，但如果有玩游戏的同时又要聊天，那么一个websocket就显然不够了，后来新增了一个sockettask，在使用小程序主websocket的同时，还可以使用sockettask新开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的断开

---