今天我们来了解websocket封装的内容，下文给大家分享了websocket封装过程，及引入和使用，需要的朋友可以参考，下面我们一起来学习一下吧。

    在一个应用中，websocket一般都是以单例形式存在的，即在整个应用中，websocket实例始终保持唯一。但有时我们要用到websocket实例的时候，可能websocket还没实例化，所以要做成异步的形式来获取实例。

一、封装。先创建 socket.ts 文件

import EventEmitter from 'events'; // 这里用到了 events 包
const ee = new EventEmitter();
class Ws {
 private wsUrl: string = '';
 private socket: WebSocket | undefined; // socket实例
 private lockReconnect: boolean = false; // 重连锁
 private timeout: NodeJS.Timeout | undefined;

 // 初始化socket，一般在应用启动时初始化一次就好了，或者需要更换wsUrl
 public init(wsUrl: string) {
  this.wsUrl = wsUrl;
  this.createWebSocket();
 }

 // 获取socket实例
 public getInstance(): Promise<WebSocket> {
  return new Promise((resolve, reject) => {
   if (this.socket) {
    resolve(this.socket);
   } else {
    ee.on('socket', (state: string) => {
     if (state === 'success') {
      resolve(this.socket);
     } else {
      reject();
     }
    });
   }
  });
 }

 // 创建socket
 private createWebSocket() {
  try {
   console.log('websocket 开始链接');
   const socket = new WebSocket(this.wsUrl);
   socket.addEventListener('close', () => {
    console.log('websocket 链接关闭');
    this.socket = undefined;
    this.reconnect();
   });
   socket.addEventListener('error', () => {
    console.log('websocket 发生异常了');
    this.socket = undefined;
    this.reconnect();
   });
   socket.addEventListener('open', () => {
    // 可在此进行心跳检测
    // this.heartCheck.start();
    console.log('websocket open');
    this.socket = socket;
    ee.emit('socket', 'success');
   });
   socket.addEventListener('message', (event) => {
    console.log('websocket 接收到消息', event);
   });
  } catch (e) {
   console.log('socket catch error', e);
   this.reconnect();
  }
 }

 // 重连
 private reconnect() {
  if (this.lockReconnect) {
   return;
  }
  console.log('websocket 正在重新连接');
  this.lockReconnect = true;
  //没连接上会一直重连，设置延迟避免请求过多
  this.timeout && clearTimeout(this.timeout);
  this.timeout = setTimeout(() => {
   this.createWebSocket();
   this.lockReconnect = false;
  }, 5000);
 }
}

export default new Ws();

二、引入并使用

import socket from '@/utils/ws';

socket
 .getInstance()
 .then((ws) => {
   // 这里的 ws 就是实例化后的 websocket，可以直接使用 websocket 原生 api
  console.log('getInstance ws', ws);
  ws.addEventListener('message', (event) => {
    console.log('ws 接收到消息', event);
   });
 })
 .catch(() => {});

    以上就是关于websocket封装过程的介绍啦，本文代码有一定的借鉴价值，有需要的朋友可以参考，希望对大家学习websocket封装有帮助，想要了解更多可以继续浏览群英网络其他相关的文章。

文本转载自脚本之家

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• Typescript类型使用有什么好处，规范及应用都有哪些

  目录类型系统强类型和弱类型(类型安全)静态类型与动态类型(类型检查)JavaScript自由类型系统的问题Flow静态类型检查方案Typescript语言规范与基本应用Typescript作用域Typescript原始类型Typescript Object类型Typescript数组类型Typescript元组类型(t

• node.js导致进程退出是什么原因？

  node.js导致进程退出是什么原因？NodeJS进程推出的因素通常是主动退出、未捕获的异常、未处理的 promise rejection、未处理的 Event Emitter error 事件和系统信号这三种，接下来我们详细了解看看。

• 如何实现让小程序弹窗的底层页面不滚动

  这篇文章主要介绍了微信小程序弹窗禁止页面滚动的实现代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

• js实现短信验证码倒计时功能

  现在很多网站很软件都添加了短信验证的功能，我们在使用时发现一般获取一次验证码之后，需要等待一段时间才能获取下一次验证码，那么发送短信验证间隔是如何实现呢？这篇文章就主要介绍使用js实现短信验证码倒计时功能。

• 用vue怎么样实现dom异步更新？

  这篇文章给大家分享的是有关vue实现dom异步更新的内容，包括Vue异步更新DOM的原理和实例，对大家理解vue dom异步更新有一定的帮助，感兴趣的朋友可以参考。