前端 webSocket 封装（开箱即用）

import { ElMessage } from "element-plus";
import { ref } from "vue";
import { websocketURL } from "@/utils/baseConfigs"

export default () => {
    // websocket.value 连接
    const websocket = ref()
    const timer = ref(null)
    const websocketId = ref(null)

    const messageData = ref("")
    const statusFlag = ref(false)
    const getConnection = (val) => {

        websocketId.value = val;
        if(websocketId.value){
            try {
                websocket.value = new WebSocket(
                    `${ websocketURL + "/record/websocket/" + websocketId.value}`
                );
                initwebsocket();
            } catch (error) {
                // console.log("error", error);
            }
        }
    }

    // 初始化socket方法
    const initwebsocket = () => {
        //连接错误
        websocket.value.onerror = setErrorMessage;

        // //连接成功
        websocket.value.onopen = setOnopenMessage;

        //收到消息的回调
        websocket.value.onmessage = setOnmessageMessage;

        //连接关闭的回调
        websocket.value.onclose = setOncloseMessage;

        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket.value连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = onbeforeunload;
    }
    const setErrorMessage = () => {
        // 连接错误
    }
    const setOnopenMessage = () => {
        // 自定义心跳通信数据
        let obj = {
            userId: websocketId.value
        }
        timer.value = setInterval(() => {
            sendwebsocket(JSON.stringify(obj))
        }, 5 * 1000)
    }
    // 接收后端发的消息
    const setOnmessageMessage = (event) => {
        
        if(event.data === "heartbeat"){
            // 心跳检测
        }else{
            messageData.value = event.data
        }
    }
    const setOncloseMessage = () => {
        // 连接关闭
    }
    const onbeforeunload = () => {
        // 卸载websocket
        closewebsocket();
        statusFlag.value = false;
    }
    //websocket.value发送消息
    const sendwebsocket = (text) => {
        websocket.value.send(text);
    }
    const closewebsocket = () => {
        // 销毁定时任务
        // 销毁websocket心跳检测
        if (timer.value !== null) {
            clearInterval(timer.value);
            timer.value = null;
        }
    }

    return{
        messageData,getConnection,onbeforeunload,statusFlag
    }
}

其他hooks或者组件调用方式

import websocketHooks from "@/hooks/websocketHooks";

const { messageData,getConnection,onbeforeunload } = websocketHooks();

// 创建时候自动连接
onMounted(()=>{
    let timestamp = Date.now();
    // 将时间戳转换为字符串
    let timestampString = timestamp.toString();
    let websocketId = JSON.stringify(userId.value) + timestampString;
    getConnection(websocketId)
})

// 销毁
onBeforeUnmount(()=>{
   onbeforeunload()
})