记录一次websocket封装的过程


Posted in Javascript onNovember 23, 2020

在一个应用中,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封装的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
ExtJS 简介 让你知道extjs是什么
Dec 29 Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
Nov 02 Javascript
jquery动态添加删除div 具体实现
Jul 20 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
Jan 02 Javascript
JavaScript新窗口与子窗口传值详解
Feb 11 Javascript
ajax请求乱码的解决方法(中文乱码)
Apr 10 Javascript
javascript实现回到顶部特效
May 06 Javascript
浅析BootStrap栅格系统
Jun 07 Javascript
学习vue.js条件渲染
Dec 03 Javascript
vue展示dicom文件医疗系统的实现代码
Aug 27 Javascript
jQuery实现简易QQ聊天框
Feb 10 jQuery
JS出现404错误原理及解决方案
Jul 01 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
Nov 23 #Javascript
微信小程序实现锚点跳转
Nov 23 #Javascript
javascript实现电商放大镜效果
Nov 23 #Javascript
用webAPI实现图片放大镜效果
Nov 23 #Javascript
Vue 的 v-model用法实例
Nov 23 #Vue.js
JavaScript实现网页留言板功能
Nov 23 #Javascript
VUE+Element实现增删改查的示例源码
Nov 23 #Vue.js
You might like
图书管理程序(一)
2006/10/09 PHP
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
php获取当月最后一天函数分享
2015/02/02 PHP
PHP session会话操作技巧小结
2016/09/27 PHP
PHPMailer发送邮件
2016/12/28 PHP
javascript之卸载鼠标事件的代码
2007/05/14 Javascript
js 自定义的联动下拉框
2010/02/07 Javascript
js Date自定义函数 延迟脚本执行
2010/03/10 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
2013/04/02 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
2014/04/16 Javascript
jquery判断浏览器后退时候弹出消息的方法
2014/08/11 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
2015/03/03 Javascript
微信小程序利用co处理异步流程的方法教程
2017/05/20 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
2017/12/28 Javascript
修改node.js默认的npm安装目录实例
2018/05/15 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
[07:54]DOTA2-DPC中国联赛 正赛 iG vs VG 选手采访
2021/03/11 DOTA
Python中使用中文的方法
2011/02/19 Python
python复制文件的方法实例详解
2015/05/22 Python
python 添加用户设置密码并发邮件给root用户
2016/07/25 Python
pyhton列表转换为数组的实例
2018/04/04 Python
对python pandas读取剪贴板内容的方法详解
2019/01/24 Python
使用Python快速制作可视化报表的方法
2019/02/03 Python
使用OpenCV circle函数图像上画圆的示例代码
2019/12/27 Python
Python内存映射文件读写方式
2020/04/24 Python
Python根据字符串调用函数过程解析
2020/11/05 Python
中层干部竞争上岗演讲稿
2014/01/13 职场文书
电大毕业个人生自我鉴定
2014/03/26 职场文书
国际贸易系求职信
2014/08/09 职场文书
群众路线个人剖析材料及整改措施
2014/11/04 职场文书
2014年医院工作总结
2014/11/20 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书
box-shadow单边阴影的实现
2023/05/21 HTML / CSS