electron-egg webSocket使用封装

websocket.js

javascript 复制代码
class WebSocketUtil {

  /**
   * 
   * @param {*} deviceCode 
   * @param {*} reconnectDelay 
   * @param {*} isLog 
   */
  constructor(url, reconnectDelay) {
    this.socket = null;
    this.socketUrl = url;
    this.onSendCallback = null;
    this.onOpenCallback = null;
    this.onMessageCallback = null;
    this.onCloseCallback = null;
    this.onErrorCallback = null;
    this.onReconnectCallback = null;
    this.reconnectDelay = reconnectDelay; // 重连延迟时间,单位为毫秒
    this.isReconnect = true; // 是否重连,自动关闭设置为false
    this.isLog = false;//打印
  }

  socketListener(onOpen, onMessage, onSend, onClose, onError, onReconnect) {
    this.onOpenCallback = onOpen;
    this.onMessageCallback = onMessage;
    this.onSendCallback = onSend;
    this.onCloseCallback = onClose;
    this.onErrorCallback = onError;
    this.onReconnectCallback = onReconnect;
  }

  socketConnect() {
    if (this.socketIsConnect()) {
      return
    }
    this.isReconnect = true//设置为true
    this.socket = new WebSocket(this.socketUrl);

    this.socket.onopen = () => {
      if (this.isLog) {
        console.log('WebSocketUtil--WebSocket连接已打开');
      }
      if (typeof this.onOpenCallback === 'function') {
        this.onOpenCallback();
      }
    };

    this.socket.onmessage = (event) => {
      if (this.isLog) {
        console.log('WebSocketUtil--收到消息:', event.data);
      }
      if (typeof this.onMessageCallback === 'function') {
        this.onMessageCallback(event);
      }
    };

    this.socket.onclose = () => {
      if (this.isLog) {
        console.log('WebSocketUtil--WebSocket连接已关闭');
      }

      if (typeof this.onCloseCallback === 'function') {
        this.onCloseCallback();
      }
      //是否重连
      if (this.isReconnect && !this.socketIsConnect()) {
        this.socketReConnect()
      }
    };

    this.socket.onerror = (error) => {
      if (this.isLog) {
        console.error('WebSocketUtil--WebSocket连接发生错误:', error);
      }
      if (typeof this.onErrorCallback === 'function') {
        this.onErrorCallback(error);
      }
      // //是否重连
      // if (this.isReconnect) {
      //   this.reConnect()
      // }
    };
  }

  /**
   * 发送消息
   * @param {*} message 
   * @param {*} onSend 
   */
  socketSend(message, onSend) {
    var isSuccess = false
    var error = ""
    if (this.socketIsConnect()) {
      const msg = JSON.stringify(message);
      const sendResult = this.socket.send(msg);
      if (sendResult == undefined) {
        if (this.isLog) {
          console.log('WebSocketUtil--消息发送成功:', msg);
        }
        isSuccess = true
      } else {
        if (this.isLog) {
          console.error('WebSocketUtil--消息发送失败', msg);
        }
        isSuccess = false
      }
    } else {
      if (this.isLog) {
        console.error('WebSocketUtil--WebSocket连接未建立或已关闭');
      }
      error = "连接未建立或已关闭"
      isSuccess = false
    }

    if (typeof this.onSendCallback === 'function') {
      this.onSendCallback(message, isSuccess, error)
    }
    if (typeof onSend === 'function') {
      onSend(message, isSuccess, error);
    }
  }

  /**
   * 关闭
   */
  socketClose() {
    this.isReconnect = false
    if (this.socketIsConnect()) {
      this.socket.close();
    } else {
      if (this.isLog) {
        console.error('WebSocketUtil--WebSocket连接未建立或已关闭');
      }
    }
  }
  /**
   * 
   */
  socketReConnect() {

    if (this.socketIsConnect()) {
      return
    }

    if (this.isLog) {
      console.error('WebSocketUtil--reConnect');
    }

    if (typeof this.onReconnectCallback === 'function') {
      this.onReconnectCallback();
    }

    setTimeout(() => {
      if (!this.socketIsConnect() && this.isReconnect) {
        this.socket.close();
        this.socketConnect();
      }

    }, this.reconnectDelay);
  }

  socketIsConnect() {
    var isC = false;
    if (this.socket != null && this.socket.readyState === WebSocket.OPEN) {
      isC = true
    }
    return isC;
  }
}

export default WebSocketUtil;

使用

javascript 复制代码
import WebSocketUtil from '../api/websocket.js';
    initWebSocket(deviceCode) {
      this.websocket = new WebSocketUtil(api.webSocketUrl + deviceCode, 3000);
      const self = this;
      this.websocket.socketListener(
        function onOpen() {
          console.log('连接已经打开');
          self.socketTips = "已连接"
        },
        function onMessage(event) {
          var aaa = JSON.parse(event.data)
          console.log('收到消息', aaa, aaa.sysMsgType);
        },
        function onSend(msg, isSuccess, error) {
          if (isSuccess) {
            console.log('消息发送成功:', msg);
          } else {
            console.log('消息发送失败:', msg);
          }
        },
        function onClose() {
          console.log('连接已经关闭');
          self.socketTips = "连接关闭"
        },
        function onError(error) {
          console.log('连接出现错误:', error);
        },
        function onReconnect() {
          console.log('---重连中---:');
          self.socketTips = "重连中"
        },
      );
      this.websocket.socketConnect();
    },
相关推荐
Hilaku1 小时前
为什么技术极强的前端,往往当不好前端 Team Leader?
前端·javascript·程序员
TickDB1 小时前
Python 接入 A 股盘前集合竞价数据:AkShare 报错到 TickDB 实测的完整解法
python·websocket·行情数据 api
幸运小圣2 小时前
SSE 与 WebSocket 新手入门:前端实时通信完全指南【JavaScript】
前端·javascript·websocket
艾伦野鸽ggg2 小时前
25级开学 JS 考核题解
前端·javascript
meilindehuzi_a2 小时前
LangChain.js + Milvus 向量长期记忆实战:对话写入、语义检索与 RAG 增强
javascript·langchain·milvus
leoZ2312 小时前
2026-09-08-mysql-57-init-walkthrough
前端·javascript·数据库·vue.js·opencv·mysql·adb
艾伦野鸽ggg2 小时前
JavaScript 原型链与原型对象详解
javascript·原型模式
paopaokaka_luck2 小时前
非遗文物数字化系统(AI非遗问答、ONNX图像识别、协同过滤推荐、ECharts数据分析、非遗知识浏览与互动、文创商城订单闭环、文化活动报名签到、社区交流)
前端·javascript·vue.js·人工智能·数据分析·echarts
mONESY3 小时前
让大模型「听话」输出 JSON:LangChain OutputParser 结构化输出实战,从手写正则到 Zod Schema 四层进化
javascript
研☆香3 小时前
js中使用的正则表达式
开发语言·javascript·正则表达式