onLoad(){
  this.linkSocket()
 },
 linkSocket(){
  let that = this
  wx.connectSocket({
   url: app.globalData.wsUrl + 'websocket"htmlcode">

initEventHandle(){
  let that = this
  wx.onSocketMessage((res) => {
   //收到消息
  })
  wx.onSocketOpen(()=>{
   console.log('WebSocket连接打开')
  })
  wx.onSocketError(function (res) {
   console.log('WebSocket连接打开失败')
  })
  wx.onSocketClose(function (res) {
   console.log('WebSocket 已关闭！')
  })
 },



这个先放在这我们一会往里填东西
断线重连




reconnect(){
  if (this.lockReconnect) return;
  this.lockReconnect = true;
  clearTimeout(this.timer)
  if (this.data.limit<12){
   this.timer = setTimeout(() => {
    this.linkSocket();
    this.lockReconnect = false;
   }, 5000);
   this.setData({
    limit: this.data.limit+1
   })
  }
 },



我们设置一个锁和最大的重连次数，避免出现无限重连的情况，为了不给服务器太大的压力我这里设置的是5秒重试一次，最多请求12次。
改造一下initEventHandle这样我们就可以实现一般的触发Error的断线重连。


initEventHandle(){
  let that = this
  wx.onSocketMessage((res) => {
   //收到消息
  })
  wx.onSocketOpen(()=>{
   console.log('WebSocket连接打开')
  })
  wx.onSocketError((res)=>{ 
   console.log('WebSocket连接打开失败')
   this.reconnect()
  })
  wx.onSocketClose((res)=> {
   console.log('WebSocket 已关闭！')
   this.reconnect()
  })
 },



关键的来的---心跳对象


先撸为敬


let heartCheck = {
 timeout: 10000, 
 timeoutObj: null,
 serverTimeoutObj: null,
 reset: function () {
  clearTimeout(this.timeoutObj);
  clearTimeout(this.serverTimeoutObj);
  return this;
 },
 start: function () {
  this.timeoutObj = setTimeout(()=> {
   console.log("发送ping");
   wx.sendSocketMessage({
    data:"ping",
    // success(){
    //  console.log("发送ping成功");
    // }
   });
   this.serverTimeoutObj = setTimeout(() =>{
    wx.closeSocket(); 
   }, this.timeout);
  }, this.timeout);
 }
};



心跳对象内timeout为每10秒发一次心跳,timeoutObj、serverTimeoutObj是清除定时器用的对象，reset方法重置定时器，start发送心跳。
继续改造我们的initEventHandle


initEventHandle(){
  let that = this
  wx.onSocketMessage((res) => {
   //收到消息
   if (res.data == "pong"){
    heartCheck.reset().start()
   }else{
    \\处理数据
   }
  })
  wx.onSocketOpen(()=>{
   console.log('WebSocket连接打开')
   heartCheck.reset().start()
  })
  wx.onSocketError((res)=>{ 
   console.log('WebSocket连接打开失败')
   this.reconnect()
  })
  wx.onSocketClose((res)=> {
   console.log('WebSocket 已关闭！')
   this.reconnect()
  })
 },



打开连接的时候调用start开始心跳,每隔10秒向服务端发送消息"ping",服务端接收到消息后给我们回个话"pong",就好像微信聊天。
在吗"color: #ff0000">总结


Socket心跳重连在H5中可以有类似的实现，也有成熟的第三方库，比如说stomp+websocket+sockjs可以实现更加完整的更兼容的socket连接方案,可以下次给大家分享(看我心情)。


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。