在vue3中封装WebSocket

下载websocket

1. npm install websocket
2. 或
3. yarn add websocket

复制代码

一、新建webSockte.js文件

1. // webSocket.js  
2. // 自定义组合式函数，用于管理 WebSocket 连接  
3.   
4. import { ref, onMounted, onBeforeUnmount } from "vue";  
5.   
6. const useWebSocket = (url, reconnectInterval = 10000, maxReconnectAttempts = 5) => {  
7.   // 创建一个响应式引用来存储 WebSocket 实例  
8.   const socket = ref(null);  
9.   // 标记组件是否已挂载  
10.   const isMounted = ref(true);  
11.   // 标记 WebSocket 是否已连接  
12.   const isConnected = ref(false);  
13.   // 记录重连尝试次数  
14.   let reconnectAttempts = 0;  
15.   
16.   // 连接 WebSocket 的函数  
17.   const connect = () => {  
18.     // 如果已存在 WebSocket 实例，则先关闭它  
19.     if (socket.value) {  
20.       socket.value.close();  
21.     }  
22.   
23.   
24.     // 创建新的 WebSocket 实例  
25.     socket.value = new WebSocket(url);  
26.   
27.     // 监听 WebSocket 打开事件  
28.     socket.value.addEventListener("open", () => {  
29.       console.log("WebSocket连接已打开");  
30.       isConnected.value = true; // 更新连接状态  
31.     });  
32.   
33.     // 监听 WebSocket 消息事件  
34.     socket.value.addEventListener("message", (event) => {  
35.       console.log("收到消息:", event.data);
36.         messages.value = JSON.parse(event.data);
37.     });  
38.   
39.     // 监听 WebSocket 关闭事件  
40.     socket.value.addEventListener("close", () => {  
41.       console.log("WebSocket连接已关闭");  
42.       isConnected.value = false; // 更新连接状态  
43.   
44.       // 如果组件仍挂载且未达到最大重连尝试次数，则尝试重新连接  
45.       if (isMounted.value && reconnectAttempts < maxReconnectAttempts) {  
46.         // 使用递增的延迟来避免频繁重连  
47.         setTimeout(connect, reconnectInterval * (reconnectAttempts + 1));  
48.         reconnectAttempts++; // 增加重连尝试次数  
49.       }  
50.     });  
51.   
52.     // 监听 WebSocket 错误事件  
53.     socket.value.addEventListener("error", (error) => {  
54.       console.error("WebSocket发生错误:", error);  
55.       // 如果组件仍挂载，并且希望处理错误后重连，可以在这里添加逻辑  
56.     });  
57.   };  
58.   
59.   // 发送消息到 WebSocket  
60.   const sendMessage = (message) => {  
61.     if (socket.value && socket.value.readyState === WebSocket.OPEN) {  
62.       socket.value.send(message);  
63.     }  
64.   };  
65.   
66.   // 组件挂载时执行  
67.   onMounted(() => {  
68.     isMounted.value = true;  
69.     connect(); // 尝试建立连接  
70.   });  
71.   
72.   // 组件卸载前执行  
73.   onBeforeUnmount(() => {  
74.     isMounted.value = false;  
75.     if (socket.value) {  
76.       socket.value.close(); // 关闭 WebSocket 连接  
77.     }  
78.   });   
79.   
80.   // 返回对象，包含 WebSocket 实例、连接状态和发送消息的函数  
81.   return {  
82.     socket,  
83.     messages,
84.     isConnected,  
85.     sendMessage,  
86.   };  
87. };  
88.   
89. export default webSocket;

复制代码

二、页面中利用webSocket

1. <script setup>
2. import { onMounted, ref } from "vue";
4. import webSocket from "./webSocket.js"; // 引入新建的webSocket.js文件
5. const { sendMessage, messages } = webSocket('ws://your-websocket-url', 10000, 5);
7. // 监听 messages 的变化
8. watchEffect(() => {
9.   if (messages.value) {
10.     // 打印websocket传的值
11.     console.log(messages.value);
12.   }
13. });
15. onMounted(() => {
16.   sendMessage("Hello WebSocket!");
17. });
19. </script>

复制代码