electron-egg webSocket使用封装

websocket.js

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;

使用

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();
    },

<think>好的,我现在需要帮用户解决如何在electron-egg框架中实现记住账号密码的功能。首先,我得回忆一下electron-egg的基本结构和常用方法。用户提到的是记住用户名和密码,这通常涉及前端保存输入数据,以及后端可能的存储方式。 首先,用户可能需要在前端有一个登录表单,里面包含用户名和密码的输入框,以及一个“记住密码”的复选框。当用户勾选这个复选框并登录时,应用需要将用户名和密码保存下来,下次启动时自动填充。这通常使用本地存储机制,比如localStorage或者electron的secure存储方式。 然后,考虑安全性。直接保存明文密码不安全,所以可能需要加密存储。electron-egg有没有内置的加密模块?或者需要借助第三方库?比如使用crypto模块对密码进行加密后再存储。另外,用户可能希望记住密码的功能是可选的,所以需要在前端处理勾选状态。 接下来,后端部分是否需要处理?如果登录信息需要持久化,可能需要使用数据库或者本地文件存储。不过记住账号密码通常是在客户端保存,所以可能不需要后端处理。但需要确认electron-egg的存储机制,比如是否支持electron的store模块,或者使用electron-store这样的第三方库。 然后查看用户提供的引用内容,引用[1]和[2]是关于egg.js集成Redis的,可能和electron-egg无关,但引用[3]和[4]提到WebSocket和远程连接,可能不太相关。不过用户的问题是关于electron-egg的,可能需要查找该框架的文档或社区资源。 假设electron-egg基于Electron,那么可以使用electron的ipcMain和ipcRenderer来处理前端与主进程的通信。当用户勾选记住密码时,前端发送消息给主进程,将用户名和密码保存到本地。下次启动时,主进程读取存储的数据并发送给前端填充表单。 具体步骤可能包括:创建登录页面,添加复选框;处理登录逻辑,当复选框选中时,调用electron的存储API;加密敏感信息;应用启动时检查存储并自动填充。 还需要考虑不同操作系统的存储位置,以及如何安全地处理密码。可能还需要使用keytar这样的库来安全地存储密码,尤其是处理系统钥匙链。 最后,提供一个示例教程,包括代码片段和步骤说明,确保用户能按照步骤实现功能。同时,注意代码的正确性和安全性,避免常见的安全漏洞。</think>### 使用 electron-egg 实现记住用户名和密码功能 #### 实现步骤 1. **前端界面设计** 在登录页面添加用户名、密码输入框及“记住密码”复选框: ```html <input type="text" id="username" placeholder="用户名"> <input type="password" id="password" placeholder="密码"> <input type="checkbox" id="remember"> 记住密码 ``` 2. **存储模块封装** 使用 `electron-store` 实现本地数据持久化(需安装 `npm install electron-store`): ```javascript // main/controller/store.js const Store = require('electron-store'); const store = new Store(); // 保存账号密码 function saveCredentials(username, password) { store.set('remembered', { username: username, password: Buffer.from(password).toString('base64') // 简单加密 }); } // 读取账号密码 function getCredentials() { const data = store.get('remembered'); if (data) { return { username: data.username, password: Buffer.from(data.password, 'base64').toString() }; } return null; } ``` 3. **登录逻辑处理** 在登录按钮事件中判断是否勾选“记住密码”: ```javascript // renderer/login.js document.getElementById('login-btn').addEventListener('click', () => { const username = document.getElementById('username').value; const password = document.getElementById('password').value; const remember = document.getElementById('remember').checked; if (remember) { window.ipcRenderer.send('save-credentials', { username, password }); } // 调用登录接口... }); ``` 4. **主进程与渲染进程通信** 在主进程中监听存储请求: ```javascript // main/controller/login.js ipcMain.on('save-credentials', (event, { username, password }) => { saveCredentials(username, password); // 调用存储模块 }); // 启动时读取存储 app.on('ready', () => { const credentials = getCredentials(); if (credentials) { window.webContents.send('auto-fill', credentials); } }); ``` 5. **自动填充功能** 渲染进程接收自动填充事件: ```javascript // renderer/login.js window.ipcRenderer.on('auto-fill', (event, { username, password }) => { document.getElementById('username').value = username; document.getElementById('password').value = password; }); ``` #### 注意事项 - **安全性**:示例中仅使用 Base64 编码,实际项目建议使用加密库(如 `crypto-js`)或系统钥匙链(如 `keytar`) - **数据清理**:需提供“忘记密码”功能清除存储 - **跨平台兼容**:`electron-store` 默认路径为 `~/.config/${appName}/Config` #### 优化建议 - 可结合 `egg-redis` 实现分布式会话管理(参考引用[1][^1]) - 若涉及 WebSocket 实时通信,可参考《菜鸟教程》的聊天室设计(引用[3][^3])
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值