如何让微信小程序链接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的断开

1、如果是真机出现这类情况，升级至最新版本。

2、可能是你后端开启 http referer 限制。【网络请求的 referer 是不可以设置的，格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 为小程序的 appid，{version} 为小程序的版本号，版本号为 0 表示为开发版。】

3、后端未开启 OPTIONS 的预检权限。

4、证书配置ATS标准必须达到，根证书一定要安装，TLS 版本不支持1.2。

---