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()
相关推荐
孙克旭_1 小时前
day051-ansible循环、判断与jinja2模板
linux·运维·服务器·网络·ansible
悟空胆好小2 小时前
分音塔科技(BABEL Technology) 的公司背景、股权构成、产品类型及技术能力的全方位解读
网络·人工智能·科技·嵌入式硬件
DoraBigHead3 小时前
《电磁波的浪漫,铜线上的灵魂》——计算机网络·物理层全解版
网络协议
爱吃土豆的马铃薯ㅤㅤㅤㅤㅤㅤㅤㅤㅤ3 小时前
如何使用Java WebSocket API实现客户端和服务器端的通信?
java·开发语言·websocket
ssswywywht4 小时前
OSPF实验
网络
FCM664 小时前
HCIA第一次实验报告:静态路由综合实验
网络·tcp/ip·信息与通信
apihz4 小时前
VM虚拟机全版本网盘+免费本地网络穿透端口映射实时同步动态家庭IP教程
android·服务器·开发语言·网络·数据库·网络协议·tcp/ip
dog2505 小时前
TCP 传输时 sk_buff 的 clone 和 unclone
网络·网络协议·tcp/ip
学习溢出5 小时前
【网络安全】理解安全事件的“三分法”流程:应对警报的第一道防线
网络·安全·web安全·网络安全·ids
智慧化智能化数字化方案6 小时前
华为IPD(集成产品开发)流程是其研发管理的核心体系
网络·华为ipd流程·ipd流程体系·ipd产品研发