# 微信小程序/WEB/App三端实现单个/多个websocket连接
作者:互联网
微信小程序/WEB/App三端实现单个/多个websocket连接
传统的http协议只能由客户端发起请求拿数据,并不能由服务器发起数据推送,websocket可以在不发送请求的情况下,服务器主动给客户端推送数据
基于浏览器和设备所支持的最大连接数不同,写法也有所不同,大体上的逻辑是大同小异的 (这里以小程序为例,小程序目前允许的最大连接数为3,后续可能会增加,并且只支持wss)
注:只贴出关键逻辑代码,部分可直接复制使用
------------单个----------------
1、建立websocket连接
wx.connectSocket({
url: wss...... // 连接地址
});
2、连接成功返回
wx.onSocketOpen(function(){
// console.info("连接成功!可以开始发送数据了..." + Date());
// 连接上进行心跳检测
_that.heartCheck();
});
3、连接错误返回(连接出现错误会自动断开连接并报错)
wx.onSocketError(function() {
// console.error("连接错误,开始重连...");
// 心跳重连
_that.reconnect();
});
4、收到消息返回
wx.onSocketMessage(function(res) {
console.log(res)
//只要服务器有返回消息,说明连接是成功的
})
5、连接关闭返回(这里可以手动关闭websocket连接)
wx.onSocketClose(()=>{
// console.info("连接关闭"+Date());
});
6、心跳检测机制(设备端会定时给服务器发送心跳以保持连接不中断,就好像每隔20秒我问你“在吗”,你回答“在”,以此来证明连接仍在持续,注:如果没有完整的“在吗”和“在”的回应,websocket会自动断开连接)
// 心跳检测
heartCheck:function(url){
let timeOut = 25000; //发送心跳间隔时间
let severTimeout = 30000; //服务器端超时时间
var timeoutObj = this.data.timeoutObj;
var serverTimeoutObj = this.data.serverTimeoutObj;
var that = this;
if(that.timeoutObj){
// console.info("执行清除心跳计时器")
clearTimeout(that.timeoutObj)
}
if(that.serverTimeoutObj){
// console.info("执行清除服务器计时器")
clearTimeout(that.serverTimeoutObj)
}
that.timeoutObj = setTimeout(() => {
// 发送一个心跳,后端拿到后,返回一个心跳消息
// onmessage拿到返回的心跳就说明连接正常
const data ={
wsType: 'ws-heart',
//根据服务器所需要的信息发
}
wx.sendSocketMessage({
data: JSON.stringify(data),
})
// console.info("发送了一个心跳"+Date())
that.serverTimeoutObj = setTimeout(()=>{
wx.closeSocket()
},severTimeout)
}, timeOut);
this.setData({
timeoutObj:timeoutObj,
serverTimeoutObj:serverTimeoutObj
})
},
7、重连机制(websocket断开时需要进行重新连接)
reconnect:function (url) {
if (this.data.lockReconnect) {
return
}
this.data.lockReconnect = true
var that = this;
tt && clearTimeout(tt)
// 没连接上会一直重连,设置延迟避免请求过多
let tt = setTimeout(function() {
that.startConnect();
that.data.lockReconnect = false
}, 4000)
},
注:这里有人可能会有疑问,设置时间间隔,为什么不用internal,答案:interval也可以,但是要记住cleartimeout去清除计时器,否则会导致每次重连,发送的心跳时间紊乱
8、发送数据 // 可在网页任意位置发送
wx.sendSocketMessage({
data: JSON.stringify({data }),
})
------------多个----------------
单个和多个的逻辑是一致的,不同的是要给每一个webscoket专属的命名,并且每次发送websocket指令时,用专属命名去调用,1-5个步骤均包含在openWebsocketSwitch函数内,多个websocket建议包含在多个函数体内,6-8可写在任意位置可多个websocket共享,)
1、建立websocket连接
let that =this // 用that来保存this的指向
var ws1 = wx.connectSocket({//打开websocket连接 // ws1表示第一个websocket, 以此类推ws2,ws3
url: wss...... ,
success: function (resConnect) {//打开连接成功
// console.log(resConnect)
},
fail: function (resConnectError) {//打开连接失败
// console.log(resConnectError)
}
})
app.globalData.ws1 = ws1; // 保存为全局函数,方便在别的页面使用
2、连接成功返回
ws1.onOpen((result => {
// console.info("连接成功" + result)
that.setData({
ws1: ws1
}) // setData方便在此页面任意函数内发送数据
that.heartCheck()
}))
3、连接错误返回(连接出现错误会自动断开连接并报错)
ws1.onError((result => {
// console.info("开关连接错误" + Date())
that.reconnect()
}))
4、收到消息返回
ws1.onMessage((result => {
// console.info("服务器返回的消息" + result)
that.heartCheck()
}))
5、连接关闭返回(这里可以手动关闭websocket连接)
ws1.onClose((result) => {
// console.info("开关连接关闭" + Date());
that.reconnect()
})
6、心跳检测机制(设备端会定时给服务器发送心跳以保持连接不中断,就好像每隔20秒我问你“在吗”,你回答“在”,以此来证明连接仍在持续,注:如果没有完整的“在吗”和“在”的回应,websocket会自动断开连接)
// 心跳检测
heartCheck: function () {
let that = this
let timeoutObj = this.data.timeoutObj;
let serverTimeoutObj = this.data.serverTimeoutObj;
if (that.timeoutObj) {
clearTimeout(that.timeoutObj)
}
if (that.serverTimeoutObj) {
clearTimeout(that.serverTimeoutObj)
}
that.timeoutObj = setTimeout(() => {
const data = {
wsType: 'ws-heart',
sessionId: sessionId
}
that.data.ws1.send({
data: JSON.stringify(data),
})
that.serverTimeoutObj = setTimeout(() => {
that.data.ws1.onClose()
}, 30000)
}, 25000);
},
7、重连机制(websocket断开时需要进行重新连接)
reconnect: function () {
// console.log("开始重连")
let that = this
if (this.data.lockReconnect) {
return
}
this.data.lockReconnect = true
tt && clearTimeout(tt)
let tt = setTimeout(() => {
that.openWebsocketSwitch()
that.data.lockReconnect = false
}, 4000);
},
8、发送数据 //可在网页任意位置发送 ws1表示发送的websocket
that.data.ws1.send({
data: JSON.stringify(data),
})
注:心跳不是必须的,有些连接不需要心跳(NATIVE)
标签:WEB,timeoutObj,console,微信,ws1,websocket,data,连接 来源: https://blog.csdn.net/weixin_41651692/article/details/115402271