Vue websocket的封装及使用

创建 WebSocket 连接的函数

1. 创建 WebSocket 连接：通过传入的 url 参数创建一个 WebSocket 实例。

2. 监听连接打开事件：当连接成功建立时，执行传入的 onOpen 回调函数。

3. 监听消息接收事件：当接收到消息时，将消息解析为 JSON
   格式，然后执行传入的 onMessage 回调函数，并将解析后的消息作为参数传递给回调函数。如果未传入 onMessage 回调函数，则禁止重新连接。

4. 监听错误事件：当发生错误时尝试重新连接。

5. 监听连接关闭事件：当连接关闭时，如果不需要重新连接，则关闭WebSocket 连接，否则尝试重新连接。

6. 重新连接：在可以重新连接且未锁定重新连接状态时，延迟 5 秒后重新连接。

7. 心跳检测：每隔 15 秒向服务器发送心跳消息以保持连接。

8. 发送消息：如果 WebSocket 连接已经打开，则发送消息给服务器；否则打印错误信息。

9. 关闭WebSocket 连接：设置标志位 needReconnect 为 false，然后关闭 WebSocket 连接。

封装的websocket.js文件内容如下：

export function createWebSocket(url, onOpen, onMessage) {
  if (!url) {
    return;
  }
  let canReconnect = true;
  // 避免重复连接
  let lockReconnect = false;
  let needReconnect = true;
  let ws = null;
  connect();
  heartCheck();
  return {
    ws,
    sendMessage,
    closeWs,
  };

  // 连接服务端
  function connect() {
    ws = new WebSocket(url);
    ws.onopen = function () {
      if (onOpen) {
        onOpen();
      }
    };
    ws.onmessage = function (msg) {
      if (msg && msg.data) {
        let response = JSON.parse(msg.data);
        console.log(response);
        if (onMessage) {
          onMessage(response);
        } else {
          canReconnect = false;
        }
      }
    };
    ws.onerror = function () {
      reconnect();
    };
    ws.onclose = function () {
      console.log("close");
      if (!needReconnect) {
        ws.close();
      } else {
        reconnect();
      }
    };
  }
  // 重新连接服务端
  function reconnect() {
    if (!canReconnect || lockReconnect) {
      return;
    }
    console.log("reconnect", "reconnect");
    lockReconnect = true;
    setTimeout(function () {
      connect();
      lockReconnect = false;
    }, 5000);
  }
  // 保持心跳连接
  function heartCheck() {
    if (ws && ws.readyState === 1) {
      ws.send(
        JSON.stringify({
          id: new Date().getTime(),
          method: "PING",
        })
      );
    }
    setTimeout(function () {
      heartCheck();
    }, 15000);
  }
  function sendMessage(message) {
    if (ws && ws.readyState === 1) {
      ws.send(message);
    } else {
      console.log("WebSocket is not open");
    }
  }
  function closeWs() {
    needReconnect = false;
    ws.close();
  }
}

• ws 变量是 WebSocket 的实例，可以用于其他操作，比如手动触发事件、监听其他事件等。
• sendMessage方法可以用于发送消息给服务器。它接受一个参数，即要发送的消息内容。
• closeWs 方法可以用于关闭 WebSocket连接，并停止重连。调用这个方法之后，将不会再尝试重新连接服务器。（如果是自己主动关闭的话）

使用方法

<script>
import { createWebSocket } from "@/utils/websocket.js";
export default {
data(){
return{
websocket: null
}}
methods:{
handleOnOpen() {
      if (this.websocket) {
        let data = {
          你要订阅的信息
        };
        this.sendMessage(JSON.stringify(data));
      }
    },
    sendMessage(data) {
      this.websocket.sendMessage(data);
    },
    getMessage(e) {
    console.log(e, "接收到的数据");
}
},

mounted() {
this.websocket = createWebSocket(
       wss:xxxxx,//websocket链接的url
        this.handleOnOpen,
        this.getMessage
      );
}
}
</script>