创建 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链接的urlthis.handleOnOpen,this.getMessage);
}
}
</script>