首页 > 其他分享> 文章详细

uniapp中使用WebSocket做心跳机制

2022-06-16 09:32:49 阅读：197 来源： 互联网

标签：uniapp console log res transferValue uni 心跳 WebSocket 连接

1. 为什么叫心跳包呢？

它就像心跳一样每隔固定的时间发一次，来告诉服务器，我还活着。

2. 什么是心跳机制？

1、心跳机制是每隔一段时间会向服务器发送一个数据包：告诉服务器（后台）自己还活着，同时客户端（浏览器）会确认服务器端是否还活着

2、如果还活着的话，就会回传一个数据包给客户端

3、服务端断开连接了。客户端需要重连~

3.具体实现方法

//在data中声明变量
  timeout: 1000, // 30s
  timeoutObj: null,

 //具体流程
   // 判断是否已连接
    initScokets() {
      let that = this;
      uni.connectSocket({
        url:
          wsUrl + "/paperless-office/sereenSocket/" + this.meetInfo.PersonnelId,
        success(res) {
          console.log("正在连接WebSocket.... connectSocket=", res);
          that.open(); //1、判断是否打开连接
          that.scoketMessage(); //2、判断websocket服务器是否返回信息
          that.TimeOut(); //3、websocket超时操作
        },
        fail(err) {
          console.log("WebSocket连接失败 connectSocket=", err);
          that.error();
        },
      });
    },
    //连接成功
    open() {
      let that = this;
      uni.onSocketOpen((res) => {
        console.log("WebSocket连接成功....");
        that.reset();  //连接成功之后做两秒的一次连接(心跳机制)
      });
    },
    //服务器返回信息
    scoketMessage() {
      let that = this;
      uni.onSocketMessage(function (res) {
        //获取服务器返回内容，并获取当前时间戳以作服务器超时判断
        console.log("收到服务器内容：" + res.data);
        that.serveTime = new Date().getTime();
        //以下可以写服务器返回之后具体操作
        
      });
    },
    //超时响应
    TimeOut() {
      let that = this;
      setInterval(function () {
        let times = new Date().getTime();
        if (times - that.serveTime > 2000) {
          //以下做超时后的操作
        }
      }, 500);
    },
    // 连接失败
    error() {
      let that = this;
      uni.onSocketError(function (res) {
        console.log("WebSocket连接打开失败，请检查！");
        that.initScokets();   //连接失败之后，重新向服务器发起连接
      });
    },
 // 心跳响应
    reset() {
      let that = this;
      clearInterval(that.timeoutObj);
      that.timeoutObj = setInterval(function () {
        //做一个判断：在没有获取某个值货值其他需求下，做个无响应的websocket连接。否则就做一个有响应的连接
        uni.$on("screenObj", (res) => {
          that.transferValue = res;
          console.log(that.transferValue);
        });
        if (
          that.transferValue == {} ||
          that.transferValue == undefined ||
          that.transferValue == null
        ) {
          that.startSend();
        } else {
          uni.sendSocketMessage({
            data: `{"event":"pushStatus","tpid":"${that.transferValue.tipId}"}`, //data值根据实际需求赋值
            success: (res) => {
              console.log("正在发送....");
            },
            fail: (err) => {
              console.log("发送失败,重新连接....");
              that.initScokets();
            },
          });
        }

        // 结束同屏
        uni.$on("cancelsObj", (res) => {
          that.consoleValue = res;
          console.log(that.consoleValue);
          if (
            that.consoleValue !== {} ||
            that.consoleValue !== undefined ||
            that.consoleValue !== null
          ) {
            that.startSend();
          }
        });
      }, this.timeout);
    },

   //发送信息
    startSend() {
      uni.sendSocketMessage({
        data: "{}", //data值根据实际需求赋值
        success: (res) => {
          console.log("WebSocket连接中....");
        },
        fail: (err) => {
          console.log("发送失败，重新连接....");
        },
      });
    },

注：以下操作根据项目需求操作，我这里做的是传值的一个判断。

uni.$on("screenObj", (res) => {

that.transferValue = res; console.log(that.transferValue);

});

if ( that.transferValue == {} || that.transferValue == undefined || that.transferValue == null ) ）{}

标签：uniapp,console,log,res,transferValue,uni,心跳,WebSocket,连接
来源： https://www.cnblogs.com/sunqiaozhen/p/16380773.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9