记录一次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 相关文章推荐
addEventListener和attachEvent二者绑定的执行函数中的this不相同
Dec 09 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
Oct 14 Javascript
ExtJS的拖拽效果示例
Dec 09 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
Feb 23 Javascript
使用text方法获取Html元素文本信息示例
Sep 01 Javascript
简介JavaScript中toTimeString()方法的使用
Jun 12 Javascript
JS集成fckeditor及判断内容是否为空的方法
May 27 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
Feb 13 Javascript
Vue 单文件中的数据传递示例
Mar 21 Javascript
使用vue-cli编写vue插件的方法
Feb 26 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
Aug 04 Javascript
antd form表单数据回显操作
Nov 02 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
ThinkPHP模版引擎之变量输出详解
2014/12/05 PHP
php+ajax实现无刷新分页
2015/11/18 PHP
flexigrid 参数说明
2010/11/23 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
2015/09/24 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
2015/10/31 Javascript
浅析jQuery Mobile的初始化事件
2015/12/03 Javascript
jQuery循环遍历子节点并获取值的方法
2016/04/14 Javascript
JS实现页面进入和返回定位到具体位置
2016/12/08 Javascript
Javascript 制作图形验证码实例详解
2016/12/22 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
nodejs个人博客开发第五步 分配数据
2017/04/12 NodeJs
浅谈struts1 &amp; jquery form 文件异步上传
2017/05/25 jQuery
JS实现前端页面的搜索功能
2018/06/12 Javascript
解决jQuery使用append添加的元素事件无效的问题
2018/08/30 jQuery
Vue 配合eiement动态路由,权限验证的方法
2018/09/26 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
2018/10/26 Javascript
js验证身份证号码记录的方法
2019/04/26 Javascript
详解Vue之事件处理
2020/07/10 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
[10:04]国际邀请赛采访专栏:DK.Farseer,mouz.Black^,采访员Josh专访
2013/08/05 DOTA
简单总结Python中序列与字典的相同和不同之处
2016/01/19 Python
python 中如何获取列表的索引
2019/07/02 Python
pandas针对excel处理的实现
2021/01/15 Python
css3实现超立体3D图片侧翻倾斜效果
2014/04/16 HTML / CSS
小学生获奖感言范文
2014/02/02 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书
2014年妇幼保健工作总结
2014/12/08 职场文书
大学生入党群众意见书
2015/06/02 职场文书
用Python制作灯光秀短视频的思路详解
2021/04/13 Python
如何在CocosCreator里画个炫酷的雷达图
2021/04/16 Javascript
python本地文件服务器实例教程
2021/05/02 Python
解决SpringCloud Feign传对象参数调用失败的问题
2021/06/23 Java/Android
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题
python实现一个简单的贪吃蛇游戏附代码
2022/06/28 Python