简单封装一个websocket构造函数

问题描述

最近维护一个老项目,发现项目中有大量重复代码,特别是websocket的调用这一块,同样的代码复制了十几个页面,于是自己封装了一个websocket调用的构造函数。

export default class CreateWebSocket {
  constructor(url) {
    // ws地址
    this.url = url;
    // 定义ws对象
    this.ws = null;
    // ws定时器
    this.wsTimer = null;
    this.onDataReceived = null;
    this.wsInit();
  }

  // 初始化ws
  wsInit = () => {
    // 销毁ws
    this.wsDestroy();
    // 初始化ws
    this.ws = new WebSocket(this.url);
    // ws连接建立时触发
    this.ws.addEventListener("open", this.wsOpenHanler);
    // ws服务端给客户端推送消息
    this.ws.addEventListener("message", this.wsMessageHanler);
    // ws通信发生错误时触发
    this.ws.addEventListener("error", this.wsErrorHanler);
    // ws关闭时触发
    this.ws.addEventListener("close", this.wsCloseHanler);
  };
  wsOpenHanler = (event) => {
    console.log("ws建立连接成功");
  };
  wsMessageHanler = (e) => {
    console.log("接收数据", e);
    //方法1
    // var event = new CustomEvent("onMessage", { detail: e });
    // this.ws.dispatchEvent(event);

    //方法2
    this.onDataReceived && this.onDataReceived(e);
  };
  getData = (callback) => {
    this.onDataReceived = callback;
  };
  //断开重连
  reconnect = () => {
    this.wsTimer && clearTimeout(this.wsTimer);
    this.wsTimer = setTimeout(() => {
      this.wsInit();
    }, 5000);
  };

  wsErrorHanler = (event) => {
    console.log(event, "通信发生错误");
    this.reconnect();
  };
  wsCloseHanler = (event) => {
    console.log(event, "ws连接关闭");
    this.reconnect();
  };
  wsDestroy = () => {
    if (this.MyWebSocket !== null) {
      this.ws.removeEventListener("open", this.wsOpenHanler);
      this.ws.removeEventListener("message", this.wsMessageHanler);
      this.ws.removeEventListener("error", this.wsErrorHanler);
      this.ws.removeEventListener("close", this.wsCloseHanler);
      this.ws.close();
      this.ws = null;
      this.wsTimer && clearTimeout(this.wsTimer);
    }
  };
}

页面调用

const socket = new Create('ws://190.201.8.203:80');
//方法一
socket.ws.addEventListener('onMessage', (event) => {
    //此处写接收到数据后的处理逻辑            
})
//方法二
socket.getData(data=>{
   //此处写接收到数据后的处理逻辑
})

注意
离开页面一定要卸载ws

socket && socket.wsDestroy(); 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值