Vue websocket的封装及使用

创建 WebSocket 连接的函数

创建 WebSocket 连接：通过传入的 url 参数创建一个 WebSocket 实例。
监听连接打开事件：当连接成功建立时，执行传入的 onOpen 回调函数。
监听消息接收事件：当接收到消息时，将消息解析为 JSON

格式，然后执行传入的 onMessage 回调函数，并将解析后的消息作为参数传递给回调函数。如果未传入 onMessage 回调函数，则禁止重新连接。
监听错误事件：当发生错误时尝试重新连接。
监听连接关闭事件：当连接关闭时，如果不需要重新连接，则关闭WebSocket 连接，否则尝试重新连接。
重新连接：在可以重新连接且未锁定重新连接状态时，延迟 5 秒后重新连接。
心跳检测：每隔 15 秒向服务器发送心跳消息以保持连接。
发送消息：如果 WebSocket 连接已经打开，则发送消息给服务器；否则打印错误信息。
关闭WebSocket 连接：设置标志位 needReconnect 为 false，然后关闭 WebSocket 连接。

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

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连接，并停止重连。调用这个方法之后，将不会再尝试重新连接服务器。（如果是自己主动关闭的话）

使用方法

Vue 复制代码

<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>