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();
    },
相关推荐
志尊宝9 小时前
Vue3 零基础每日笔记(016):v-for 列表渲染——key 的作用与为什么不能用 index
javascript·vue.js·笔记
Sylvia33.9 小时前
板球实时数据接入实战:从Frames模型到多赛制适配
java·python·websocket·网络协议·架构
toooooop89 小时前
thinkphp查询数据表最后的自增id
前端·javascript·数据库
honkun610 小时前
vue 甘特图组件 vxe-gantt 配置拖拽调整任务起止日期时实时显示 Tooltip 提示
javascript·vue.js·甘特图·vxe-gantt
资讯综合10 小时前
2026全国云渲染网站排名 不同需求用户适配榜单
开发语言·前端·javascript
脉动数据行情110 小时前
Node.js WebSocket 实现贵金属实时行情监听 伦敦金 / 伦敦银自动重连方案
websocket·node.js·vim
HwJack2011 小时前
用 HML + CSS + JS 三段式写鸿蒙界面
javascript·css·harmonyos
linux_cfan11 小时前
HTML5 视频交互标注实践:用开源播放器 ZWPlayer 实现热区、测验与分支节点(附接入代码)
前端·javascript·音视频
YHHLAI11 小时前
基于 Next.js 16 + Redis 的全栈笔记博客系统
javascript·redis·笔记
晴天1613 小时前
前端 postMessage 使用场景
前端·javascript·网络