小程序 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的断开

对于域名和服务器的选择上，要看微信小程序制作方是否硬性需要进行绑定开发，如果没有规定绑定开发的话可以自主选择域名和服务器，像这个在阿里云或iisp都是有相关服务的。

具体方法：

先在utils文件夹粘贴一个io的js

然后 npm install wxapp-socket-io

config文件夹下新建一个socket.js,对socket连接进行封装，如下：

const io = require('../utils/io.js')

let url = 'wss://......'

let wsStatus = false

let onSocket = null

export const connect = function(cb){

if(!onSocket){

onSocket = io(url)

onSocket.on('connect', function (res) {

cb(true,onSocket)

wsStatus = true

})

setTimeout(function(){

if(!wsStatus){

cb(false,onSocket)

}

},10000)

}else{

cb(true,onSocket)

}

}

在要引用的页面调用，全局封装订阅方法

let openSocket = require('../../config/socket')

let app = getApp()

let socket = null

Page({

data: {

zl: [[422, 400, 468, 834, 785, 446, 845, 517, 630, 797, 890, 529, 553, 425, 469, 470, 837, 841, 521, 525], [422, 400, 468, 834, 785, 446, 845, 517, 630, 797, 890, 529, 553, 425, 469, 470, 837, 841, 521, 525]]

},onLoad: function () {

let that = this

//socket调用

openSocket.connect(function (status, ws) {

if (status) {

socket = ws            this.subscribe('zl')//对封装好对订阅方法进行调用

socket.on('broadcast', function (msg) {//广播

console.log("broadcast")

console.log(msg)

})

} else {

alert("socket 连接失败")

}

})

},subscribe: function (type) {

if (socket) {

let eis = this.data[type]

if (eis &&eis.length >0) {

let param = {//仅供参考，根据接口自行更改

eis: eis.join(',')

}

socket.emit('subscribe', JSON.stringify(param))

}

}

}})

注：创建一个 WebSocket 连接；一个微信小程序同时只能有一个 WebSocket 连接，如果当前已存在一个 WebSocket 连接，会自动关闭该连接，并重新创建一个 WebSocket 连接。

---