记录一次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 相关文章推荐
document对象execCommand的command参数介绍
Aug 01 Javascript
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
DWR实现模拟Google搜索效果实现原理及代码
Jan 30 Javascript
使用js的replace()方法查找字符示例代码
Oct 28 Javascript
深入理解javascript构造函数和原型对象
Sep 23 Javascript
jQuery的deferred对象详解
Nov 12 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
BootStrap table使用方法分析
Nov 08 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
May 04 Javascript
vue cli2.0单页面title修改方法
Jun 07 Javascript
elementUI table表格动态合并的示例代码
May 15 Javascript
jQuery属性选择器用法实例分析
Jun 28 jQuery
一篇文章让你搞懂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
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
利用php绘制饼状图的实现代码
2013/06/07 PHP
php网站地图生成类示例
2014/01/13 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
PHP线程的内存回收问题
2016/07/08 PHP
PHP使用FFmpeg获取视频播放总时长与码率等信息
2016/09/13 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
IE8 兼容性问题(属性名区分大小写)
2009/06/04 Javascript
js以对象为索引的关联数组
2010/07/04 Javascript
javascript拖拽效果延伸学习
2016/04/04 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
JS对象是否拥有某属性如何判断
2017/02/03 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
使用Vue组件实现一个简单弹窗效果
2018/04/23 Javascript
小程序server请求微信服务器超时的解决方法
2019/05/21 Javascript
微信小程序的开发范式BeautyWe.js入门详解
2019/07/10 Javascript
浅谈微信小程序列表埋点曝光指南
2019/10/15 Javascript
vue实现选中效果
2020/10/07 Javascript
Python 中 list 的各项操作技巧
2017/04/13 Python
PyQt5利用QPainter绘制各种图形的实例
2017/10/19 Python
python用插值法绘制平滑曲线
2021/02/19 Python
python单线程下实现多个socket并发过程详解
2019/07/27 Python
介绍CSS3使用技巧5个
2009/04/02 HTML / CSS
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
HTML5标签小集
2011/08/02 HTML / CSS
JAVA高级程序员面试题
2013/09/06 面试题
大学生优秀的自我评价分享
2013/10/22 职场文书
婚礼证婚人证婚词
2014/01/08 职场文书
自我鉴定书面格式
2014/01/13 职场文书
酒店管理毕业生自我鉴定
2014/03/02 职场文书
2014县委书记党的群众路线教育实践活动对照检查材料思想汇报
2014/09/22 职场文书
建筑专业毕业生求职信
2014/09/30 职场文书
四风个人对照检查材料思想汇报(办公室通用版)
2014/10/07 职场文书
工作业绩不及格检讨书
2014/10/28 职场文书
先进基层党组织材料
2014/12/25 职场文书