下载websocket
npm install websocket
或
yarn add websocket
一、新建webSockte.js文件
// webSocket.js
// 自定义组合式函数，用于管理 WebSocket 连接 import { ref, onMounted, onBeforeUnmount } from "vue"; const useWebSocket = (url, reconnectInterval = 10000, maxReconnectAttempts = 5) => { // 创建一个响应式引用来存储 WebSocket 实例 const socket = ref(null); // 标记组件是否已挂载 const isMounted = ref(true); // 标记 WebSocket 是否已连接 const isConnected = ref(false); // 记录重连尝试次数 let reconnectAttempts = 0; // 连接 WebSocket 的函数 const connect = () => { // 如果已存在 WebSocket 实例，则先关闭它 if (socket.value) { socket.value.close(); } // 创建新的 WebSocket 实例 socket.value = new WebSocket(url); // 监听 WebSocket 打开事件 socket.value.addEventListener("open", () => { console.log("WebSocket连接已打开"); isConnected.value = true; // 更新连接状态 }); // 监听 WebSocket 消息事件 socket.value.addEventListener("message", (event) => { console.log("收到消息:", event.data); messages.value = JSON.parse(event.data); }); // 监听 WebSocket 关闭事件 socket.value.addEventListener("close", () => { console.log("WebSocket连接已关闭"); isConnected.value = false; // 更新连接状态 // 如果组件仍挂载且未达到最大重连尝试次数，则尝试重新连接 if (isMounted.value && reconnectAttempts < maxReconnectAttempts) { // 使用递增的延迟来避免频繁重连 setTimeout(connect, reconnectInterval * (reconnectAttempts + 1)); reconnectAttempts++; // 增加重连尝试次数 } }); // 监听 WebSocket 错误事件 socket.value.addEventListener("error", (error) => { console.error("WebSocket发生错误:", error); // 如果组件仍挂载，并且希望处理错误后重连，可以在这里添加逻辑 }); }; // 发送消息到 WebSocket const sendMessage = (message) => { if (socket.value && socket.value.readyState === WebSocket.OPEN) { socket.value.send(message); } }; // 组件挂载时执行 onMounted(() => { isMounted.value = true; connect(); // 尝试建立连接 }); // 组件卸载前执行 onBeforeUnmount(() => { isMounted.value = false; if (socket.value) { socket.value.close(); // 关闭 WebSocket 连接 } }); // 返回对象，包含 WebSocket 实例、连接状态和发送消息的函数 return { socket, messages,isConnected, sendMessage, };
}; export default webSocket;
二、页面中使用webSocket
<script setup>
import { onMounted, ref } from "vue";import webSocket from "./webSocket.js"; // 引入新建的webSocket.js文件
const { sendMessage, messages } = webSocket('ws://your-websocket-url', 10000, 5); // 监听 messages 的变化
watchEffect(() => {if (messages.value) {// 打印websocket传的值console.log(messages.value);}
});onMounted(() => {sendMessage("Hello WebSocket!");
});</script>
)
