vue3 websocket连接 发送数据

先建一个websocket.js放在项目中，内容如下：

let websock = null;
let isConnect = false;
let checkMsg = "heartbeat"; 
let rec; // 断线重连后，延迟5秒重新创建 WebSocket 连接
let heartbeatInterval; // 心跳间隔定时器
const wsUrl = "ws://10.28.149.130:8087/websocket/" + localStorage.getItem("loginName");
let globalGetCallback=()=>{};

// 初始化 WebSocket 连接
function initWebSocket() {
    if (websock) {
        return;
    }
    // 创建 WebSocket 对象
    websock = new WebSocket(wsUrl);
    // 设置 WebSocket 事件监听器
    websock.onmessage = websocketOnMessage;
    websock.onclose = websocketClose;
    websock.onopen = websocketOpen;
    websock.onerror = websocketError;
}

// 关闭 WebSocket 连接
function closeWebSocket() {
    if (websock) {
        websock.close();
        websock = null;
    }
}

// 重新连接 WebSocket
function reConnect() {
    if (isConnect) return;
    if (rec) {
        clearTimeout(rec);
    }
    // 延迟5秒后重新连接
    rec = setTimeout(function () {
       // window.localStorage.setItem('resetWebsocketStatus', '1');
         closeWebSocket();
        initWebSocket();
    }, 5000);
}

// 发送心跳包
function heartbeat() {
    if (websock.readyState === websock.OPEN) {
        websock.send(checkMsg);
    }
}

// 开始心跳
function startHeartbeat() {
    heartbeatInterval = setInterval(heartbeat, 5000);
}

// 停止心跳
function stopHeartbeat() {
    clearInterval(heartbeatInterval);
}

// WebSocket 收到消息的处理函数
function websocketOnMessage(event) {
    let data = JSON.parse(decodeUnicode(event.data));
    globalGetCallback(data);
}

// WebSocket 连接关闭的处理函数
function websocketClose(event) {
    isConnect = false;
    console.log('连接关闭 (' + event.code + ')');
    reConnect();
}

// WebSocket 连接打开的处理函数
function websocketOpen() {
    isConnect = true;
    console.log('连接成功');
    startHeartbeat();
}

// WebSocket 连接发生错误的处理函数
function websocketError() {
    console.log('WebSocket连接发生错误');
    isConnect = false;
    reConnect();
}

// 发送数据给服务器
function sendSock(agentData, callback) {
    globalSendCallback = callback;
    if (websock.readyState === websock.OPEN) {
        websocketsend(agentData);
    } else if (websock.readyState === websock.CONNECTING) {
        setTimeout(function () {
            sendSock(agentData, callback);
        }, 1000);
    } else {
        setTimeout(function () {
            sendSock(agentData, callback);
        }, 1000);
    }
}

// 接收服务器数据
function getSock(callback) {
    globalGetCallback = callback;
}

// 发送数据给服务器
function websocketsend(agentData) {
    websock.send(JSON.stringify(agentData));
}

// 解码 Unicode 编码的字符串
function decodeUnicode(str) {
    str = str.replace(/\\/g, "%");
    str = unescape(str);
    str = str.replace(/%/g, "\\");
    str = str.replace(/\\/g, "");
    return str;
}

// 初始化 WebSocket 连接
initWebSocket();

// 导出模块的函数
export {
    sendSock,
    getSock,
    closeWebSocket
};

2，在组件中引用

// WebSocket封装方法
import * as socketApi from '@/directives/webSocket'
  socketApi.sendSock({ cmd: "startReport" }); //发送指令，指令是跟后端人员协定的
let getConfigResult = (data)=>{
      // let res = '{"type": "MatData","log": "","id": "1234452312312","value": "22222222"}'
      console.log(data);
      let res = JSON.parse(data);
    }
socketApi.getSock(getConfigResult); //接收后端推送过来的数据