当前位置：网站首页>websocket聊天通讯（全局封装）

websocket聊天通讯（全局封装）

2022-08-11 05:22:00 【别找bug,我就是bug】

实操步：

提示：文章基于uniapp实操的原生小程序也可以用这个直接把前缀为uni的改成wx就可以了他们的方法名都是一样的这里我们用SocketTask 的方式去管理 webSocket链接虽然uni上面没说但是我看小程序的文档这样推荐所以我们就用推荐的没啥坏处

步骤：

监听网络状态这里我就没记录了
connectSocket 创建WebSocket链接
onOpen 监听WebSocket打开成功事件
onMessage 上面两步都通了我们就可以获取消息数据了可以根据数据返回的状态来做心跳检测状态看可有可无看后端做不做
onClose 监听WebSocket关闭事件如果关闭了我们在这里做重连操作
send 上面几步没问题的话这一步就是调用发送消息方法
心跳虽然能正常走了但是我们还需要做心跳检测随时跟服务保持联系
重连当WebSocket关闭了我们需要做重连操作
数据存储

代码截图：

提示：我们这使用全局封装：首先创建一个webSocket.js文件想放哪放哪我放在utils里

采用了类写法在main.js引入（小程序的引入自己看着来拿文件里的方法就好）

上代码：


class webSocket {
  constructor(url, time) {
    this.Wsurl = url; //通信地址 wss:// ws://
    this.socketTask = null; //soke
    this.show = false; //连接状态
    this.timeout = time; //执行时间
    this.heartbeatTime = null; //心跳检测
    this.reconnectionTime = null; //重连
    try {
      return this.connectSocket();
    } catch (e) {
      this.show = false; //链接关闭
      this.reconnect(); //重连
    }
  }
  //进行 创建 打开 接受 关闭 监听
  connectSocket() {
    //创建WebSocket链接
    this.socketTask = uni.connectSocket({
      url: this.Wsurl, //服务器接口地址 测试的时候可以用ws 发布必须用wss
      success: () => {
        console.log("正准备建立websocket中...");
        return this.socketTask;
      },
    });
    //监听WebSocket打开成功事件
    this.socketTask.onOpen((res) => {
      console.log(res, "WebSocket已打开！");
      clearTimeout(this.heartbeatTime); //清楚定时器
      clearTimeout(this.reconnectionTime); //清楚定时器
      this.show = true; //链接打开
      //监听WebSocket返回的数据
      this.socketTask.onMessage((res) => {
        console.log(JSON.parse(res.data), "收到的消息");
        let msg = JSON.parse(res.data)
        // 下面这一块是后端返回来的数据 有些后端会做类型 有些不会 做了的你就根据他的返回做不同操作 我这里的是type
        if (msg.type === 'connect') {
          this.heartbeat(); //心跳检测
        } else if (msg.type === "get-list") {
          uni.$emit("WebSocketinfo", msg); //将他保存到本地
        } else {
          console.log('其他操作');
        }
      });
    });
    //监听WebSocket事件
    this.socketTask.onClose(() => {
      console.log("WebSocket已关闭");
      this.show = false; //链接关闭
      this.reconnect(); //重连
    });
  }
  //通过WebSocket发送消息
  send(data) {
    this.socketTask.send({
      data: data,
      success: (res) => {
        console.log(res, data, "WebSocket消息发送成功");
      },
    });
  }
  //心跳检测
  heartbeat() {
    this.heartbeatTime = setTimeout(() => {
      let data = 'ping' //这里是发送给后端的一个关键字 不会当作消息发出来 而是跟他保持通讯的关键字
      this.send(JSON.stringify(data));
    }, this.timeout);
  }
  //重连
  reconnect() {
    clearTimeout(this.heartbeatTime); //清楚定时器 停止发送心跳
    //false重连
    if (!this.show) {
      this.reconnectionTime = setTimeout(() => {
        this.connectSocket();
      }, 10);
    }
  }
}
module.exports = webSocket;

最后就可以在页面上使用了

1.发送消息：

this.$socket.send(JSON.stringify(data)); //JSON.stringify(data)要发送的消息 data里面要那些字段问后端

2.保存消息

这里我们使用vuex来保存有些需求在其他页面也要用到可能没用到就不需要保存vuex了