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();
    },
相关推荐
凌览1 分钟前
斩获 27k Star,一款开源的网站统计工具
前端·javascript·后端
爱学习的小学渣4 分钟前
JS用法:Map,Set和异步函数
前端·javascript
独立开阀者_FwtCoder22 分钟前
"页面白屏了?别慌!前端工程师必备的排查技巧和面试攻略"
java·前端·javascript
Hilaku30 分钟前
说实话,React的开发体验,已经被Vue甩开几条街了
前端·javascript·vue.js
星语卿30 分钟前
Js事件循环
javascript
datagear31 分钟前
如何在DataGear 5.4.1 中快速制作HTTP数据源服务端分页的数据表格看板
javascript·数据可视化
namehu38 分钟前
“什么?视频又双叒叕不能播了!”—— 移动端视频兼容性填坑指南
javascript·html
多啦C梦a40 分钟前
React Hooks 编程:`useState` 和 `useEffect`,再不懂就OUT了!
前端·javascript
yvvvy1 小时前
# React Hooks 全面解析:从 useState 到 useEffect,掌握状态与副作用管理
javascript
jqq6661 小时前
Vue3脚手架实现(七、渲染eslint配置)
前端·javascript·vue.js