WebSocket 的封装使用

javascript 复制代码
import { ElMessage } from "element-plus";
   
// 全局WebSocket实例   
let ws = null;   
let isConnected = false;   
let currentWsUrl = ''; // 用于存储当前的wsUrl   
let baseURL = 'ws://XXX.com:8081';
   
const initWebSocket = (wsUrl, sendData) => {
   return new Promise((resolve, reject) => {
    // 检查wsUrl是否发生变化
    if (wsUrl!== currentWsUrl) {
      // 如果wsUrl发生变化,关闭已有的WebSocket连接
      if (ws) {
        ws.close();
        ws = null;
        isConnected = false;
      }
      currentWsUrl = wsUrl;
      // 创建新的WebSocket实例
      ws = new WebSocket(baseURL + wsUrl);
    }

    // 连接成功后的回调函数
    ws.onopen = function (params) {
      // console.log("客户端连接成功");
      isConnected = true;
      // 向服务器发送消息
      ws.send(JSON.stringify(sendData));
    };

    // 从服务器接受到信息时的回调函数
    ws.onmessage = function (e) {
      // console.log("收到服务器响应", e.data);
      var data = e.data;
      if (data!== undefined) {
        if (data.indexOf("{")!== -1) {
          try {
            let parsedData = JSON.parse(data);
            resolve(parsedData);
          } catch (error) {
            reject(error);
          }
        } else {
          reject(data);
        }
      }
    };

    // 连接关闭后的回调函数
    ws.onclose = function (e) {
      // console.log("关闭客户端连接");
      isConnected = false;
    };

    // 连接失败后的回调函数
    ws.onerror = function (evt) {
      ElMessage.error("连接失败了");
    };

    if (isConnected) {
      ws.send(JSON.stringify(sendData));
    }

    // 窗口关闭时,关闭websocket连接,防止连接还没断开就关闭窗口,这样服务端会抛异常。
    window.onbeforeunload = function () {
      if (ws) {
        ws.close();
        ws = null;
      }
    };
   });   
};
   
export default initWebSocket;

引入使用

javascript 复制代码
import initWebSocket from "@/utils/webSocket.js";

const getData = () => {
  let sendData = {
    type: "info",
  };
  initWebSocket(globalStore.wsUrl, sendData)
    .then((res) => {
      if (res?.s === 1) {
        Object.assign(info, res?.d);
      } else {
        ElMessage.error(res?.d);
      }
    })
    .catch((err) => {
      ElMessage.error("WebSocket出现错误");
    });
};

getData()
相关推荐
九章云极AladdinEdu8 分钟前
深度学习优化器进化史:从SGD到AdamW的原理与选择
linux·服务器·开发语言·网络·人工智能·深度学习·gpu算力
哈哈很哈哈16 分钟前
构建高性能网络应用
网络
emojiwoo24 分钟前
HTTP 状态码背后的逻辑:从请求到响应的完整流程解析(含完整流程图)
网络·网络协议·http
番薯大佬1 小时前
Python学习-day9 字典Dictionary
网络·python·学习
渡我白衣1 小时前
Linux网络:应用层协议http
linux·网络·http
pofenx2 小时前
使用nps创建隧道,进行内网穿透
linux·网络·内网穿透·nps
wanhengidc2 小时前
手机云服务是什么意思?
运维·网络·安全·游戏·智能手机
GilgameshJSS2 小时前
【学习K230-例程19】GT6700-TCP-Client
网络·python·网络协议·学习·tcp/ip
半桔3 小时前
【网络编程】TCP 服务器并发编程:多进程、线程池与守护进程实践
linux·服务器·网络·c++·tcp/ip
2501_926227943 小时前
UDP网络编程:【Java】无连接通信到Socket实战(二)
java·网络·udp