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()
相关推荐
白帽黑客沐瑶3 天前
【网络安全就业】信息安全专业的就业前景(非常详细)零基础入门到精通,收藏这篇就够了
网络·安全·web安全·计算机·程序员·编程·网络安全就业
树码小子3 天前
Java网络编程:(socket API编程:TCP协议的 socket API -- 回显程序的服务器端程序的编写)
java·网络·tcp/ip
绿箭柠檬茶3 天前
Ubuntu 服务器配置转发网络访问
服务器·网络·ubuntu
FPGA_Linuxer3 天前
FPGA 40 DAC线缆和光模块带光纤实现40G UDP差异
网络协议·fpga开发·udp
real 13 天前
传输层协议UDP
网络·网络协议·udp
路由侠内网穿透3 天前
本地部署 GPS 跟踪系统 Traccar 并实现外部访问
运维·服务器·网络·windows·tcp/ip
喵手3 天前
玩转Java网络编程:基于Socket的服务器和客户端开发!
java·服务器·网络
徐子元竟然被占了!!3 天前
实验-基本ACL
网络
ftpeak4 天前
从零开始使用 axum-server 构建 HTTP/HTTPS 服务
网络·http·https·rust·web·web app
LabVIEW开发4 天前
LabVIEW气体污染无线监测
网络·labview·labview知识·labview功能·labview程序