微信小程序websocket的使用
微信小程序中使用websocket分为两步:
一、现在微信公众平台的开发者工具中配置socket的域名
二、开始编写业务代码
业务代码大致可以分成三个步骤:
a.发起请求,建立一个socket连接
![复制代码](https://common.cnblogs.com/images/copycode.gif)
let SocketTask = wx.connectSocket({ url: 'wss://app-test.kidsplace.cn:18887', success: function (res) { console.log(res) that.setData({ heartbeatfail: 0 }) that.setData({ socketConect: true }) }, fail: function (err) { console.log(err) } })
![复制代码](https://common.cnblogs.com/images/copycode.gif)
这里是通过微信自带的一个wx.connectSocket函数来传入响应的socket域名和端口号来建立连接的,注意这个函数会返回一个SocketTask对象,里面包含了socket任务的信息,可以用来管理sock任务。一个微信小程序页面最多同时建立五条socket任务。
b.监听socket连接建立,向服务器发送身份认证协议
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
SocketTask.onOpen((res) => {
console.log(res)
// that.startHeartBeat(that.data.socketTask[0])
SocketTask.send({
//向服务器发送消息
data: JSON.stringify( params ),
success: function (res) {
console.log(res, '发送成功了' )
},
fail: function (err) {
console.log(err, '发送失败了' )
}
})
})
|
![复制代码](https://common.cnblogs.com/images/copycode.gif)
SocketTask.onMessage((res) => { //监听 WebSocket 接受到服务器的消息事件 let data = JSON.parse(res.data) console.log(data, '服务器的消息') if (data.code == '200' && data.success && data.msgType == 'auth_ack') { let data = { type: "bindCard", cardId: that.data.cards[0].LeaguerCode, BusinessID:that.data.cards[0].BusinessID, phone: sessionService.get('userInfo').member.phone, memberId: sessionService.get('userInfo').member.id, BusinessName:that.data.cards[0].BusinessName,//门店名称 baseId:that.data.cards[0].LeaguerBaseID } SocketTask.send({ data: JSON.stringify(data), success: function (res) { console.log(res, '绑卡认证信息发送成功') } }) } })
![复制代码](https://common.cnblogs.com/images/copycode.gif)
这里调用SocketTask.onMessage()来监听服务发送的报文,成功的回调中会返回一个data用来存储服务发送的报文。
d.在离开页面的时候关闭socket
1 2 3 4 5 6 7 8 9 10 11 12 |
onUnload: function () {
let that = this
this .data.socketTask[0].close({
success: function (res) {
console.log(res, '离开页面关闭socket' )
that.stopHeartBeat() //离开页面并关闭socket之后停止心跳
},
fail: function (err) {
console.log(err, '关闭socket失败了' )
}
})
}
|
注意:小程序离开原生页面会调用onUnload生命周期,也就是销毁该页面的页面栈,而进入web-view页面则会调用onHide生命周期,因为web-view相当于盖在原生页面上的组件,因此销毁socket需要注意不同的场景调用不同的生命周期钩子
总结:经过这样几个步骤跟服务器建立一个基本的websocket连接就算是完成了。
注意:SocketTask.onOpen和ocketTask.onMessage都是自动监听的因此调用一次即可
在完成websocket连接的建立之后还需要建立一个心跳连接,心跳连接的作用是用来监听socket是否断开连接,如果断开连接需要进行自动重连。
startHeartBeat() { this.setData({ heart: true }) this.heartbeat() },1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<br><br><br>heartbeat() {
let that = this
if (! this .data.heart) {
return
}
let data = {
type: 'heartBeat' ,
msg: 'this is heatbeat'
}
this .data.socketTask[0].send({
data: JSON.stringify(data),
success: function (res) {
console.log(res, '心跳成功,连接正常' )
if (that.data.heart) {
that.data.heartBeatTimeout = setTimeout(() => {
that.heartbeat(that.data.socketTask[0])
}, that.data.timeout)
}
},
fail: function (err) {
that.data.socketTask[0].onClose((err) => {
console.log(err, '关闭的原因' )
})
console.log(err, '心跳失败,连接中断' )
if (that.data.heartbeatfail > 2) {
that.setData({
socketTask: []
})
that.socekt()
}
if (that.data.heart) {
that.data.heartBeatTimeout = setTimeout(() => {
that.heartbeat(that.data.socketTask[0])
}, that.data.timeout)
}
that.setData({
heartbeatfail: that.data.heartbeatfail + 1
})
}
})
},
|
这个心跳函数的主要逻辑就是在socket建立之后向服务端发送一个心跳消息,如果发送成功了就证明socket连接正常,设置一个定时器每隔一段时间就发送一次心跳,如果失败了也设置一个定时器每隔一段时间在发一次心跳,并且记录失败的次数,如果失败的次数超过上限,就会将socketTask的任务数组置空,然后停止心跳,重新执行socket()方法建立连接跟心跳,主要是一种递归的思想。
这样一个具有心跳的socket连接就完成建立了
标签:websocket,socket,微信,程序,SocketTask,res,console,data,log From: https://www.cnblogs.com/sexintercourse/p/17246590.html