在vue3中封装WebSocket

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