前端基于WebSocket封装

最新推荐文章于 2025-02-24 14:32:45 发布

盼盼盼

最新推荐文章于 2025-02-24 14:32:45 发布

阅读量1.2k

点赞数

分类专栏： vue 前端 javascript

本文链接：https://blog.youkuaiyun.com/come0across/article/details/108621606

版权

前端同时被 3 个专栏收录

54 篇文章

订阅专栏

javascript

18 篇文章

订阅专栏

vue

9 篇文章

订阅专栏

本文介绍了前端如何处理WebSocket连接，包括在无心跳的情况下，如何处理短连接并实现重新连接的逻辑。文中详细讲解了连接建立、关闭、信息接收以及消息发送的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.无心跳，短开连接之后重新连。

class webSocketClass {
  constructor(name) {
    this.lockReconnect = false;
    this.localUrl = "ws://XXXXXX";
    this.wsUrl = "";
    this.globalCallback = null;
    this.userClose = false;
    this.createWebSocket(name);
  }

  createWebSocket(url) {
    let that = this;
    that.wsUrl = url;
    try {
      that.ws = new WebSocket(that.localUrl + that.wsUrl);
      that.initEventHandle();
    } catch (e) {
      that.reconnect(url);
    }
  }

  //初始化
  initEventHandle() {
    let that = this;
    //连接成功建立后响应
    that.ws.onopen = function() {
      console.log("连接成功");
    }; 
    //连接关闭后响应
    that.ws.onclose = function() {
      if (!that.userClose) {
        that.reconnect(that.wsUrl); //重连
      }
    };
    that.ws.onerror = function() {
      if (!that.userClose) {
        that.reconnect(that.wsUrl); //重连
      }
    };
    that.ws.onmessage = function() {
      that.getWebSocketMsg(that.globalCallback);
    };
  }

  reconnect(url) {
    let that = this;
    if (that.lockReconnect) return;
    that.lockReconnect = true; //没连接上会一直重连，设置延迟避免请求过多
    setTimeout(function() {
      that.createWebSocket(url);
      that.lockReconnect = false;
    }, 30000);
  }

  webSocketSendMsg(msg) {
    this.ws.send(msg);
  }

  getWebSocketMsg(callback) {
    this.ws.onmessage = ev => {
      callback && callback(ev);
    };
  }

  closeSocket() {
    let that = this;
    if (that.ws) {
      that.userClose = true;
      that.ws.close();
    }
  }
}
export default webSocketClass;

调用方法

import WebSocketClass from '@/services/webSocket';
let ws = new WebSocketClass(url);

关闭方法

ws.closeSocket();

获取socket返回的信息

ws.getWebSocketMsg(ev => {
  console.log(JSON.parse(ev.data));
});

向socket发送消息

ws.webSocketSendMsg(msg);