# 微信小程序/WEB/App三端实现单个/多个websocket连接

最新推荐文章于 2023-11-21 11:15:19 发布

今天和明天不敲代码

最新推荐文章于 2023-11-21 11:15:19 发布

阅读量1.4k

点赞数 5

分类专栏：微信小程序 App 文章标签： websocket http 小程序经验分享

本文链接：https://blog.csdn.net/weixin_41651692/article/details/115402271

版权

微信小程序同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

App

1 篇文章 0 订阅

订阅专栏

微信小程序/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(function(){
  // 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共享，)