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();
    },
相关推荐
山河木马6 分钟前
无框架-原生webGL渲染-底层入门-1
前端·javascript·webgl
小李云雾9 分钟前
深入浅出 Vue 3 核心知识点:从基础到实战
前端·javascript·vue.js·程序人生
小雨下雨的雨9 分钟前
房产登记交易系统鸿蒙PC Electron框架技术实现详解
前端·华为·electron·harmonyos·鸿蒙·鸿蒙系统
Cobyte11 分钟前
16.响应式系统比对:链表如何实现 computed 的高效更新
前端·javascript·vue.js
坏柠13 分钟前
从一个设备控制面板开始,系统学习 LVGL 界面开发
android·javascript·学习
陈_杨16 分钟前
鸿蒙APP开发-带你走进黑胶阁的唱片收藏怎么管理
前端·javascript
一天 24h17 分钟前
Pinia 新手完全指南:从入门到精通的实战教程
前端·javascript·vue.js·pycharm·前端框架
shadow_glory23 分钟前
vue3自定义指令directives
前端·javascript·vue.js
薛先生_09929 分钟前
vue-路由模块封装
前端·javascript·vue.js
薛先生_09930 分钟前
vue-router-link实现导航高亮效果
前端·javascript·vue.js