实操步：

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

步骤：

1. 监听网络状态  这里我就没记录了
2. connectSocket    创建WebSocket链接
3. onOpen   监听WebSocket打开成功事件
4. onMessage   上面两步都通了我们就可以获取消息数据了  可以根据数据返回的状态来做心跳检测 状态看可有可无 看后端做不做

5. onClose  监听WebSocket关闭事件 如果关闭了 我们在这里做重连操作

6. send   上面几步没问题的话  这一步就是调用发送消息方法

7. 心跳   虽然能正常走了 但是我们还需要做心跳检测 随时跟服务保持联系

8. 重连   当WebSocket关闭了 我们需要做重连操作

9. 数据存储

代码截图：

提示：我们这使用全局封装：首先创建一个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了

在需要的页面引入就好了

结尾：这样看代码 不太清楚  直接复制到开发工具里面去有颜色看着好理解

还要优化还要优化 

 完