记录一次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 相关文章推荐
动态调用css文件——jquery的应用
Feb 20 Javascript
jQuery 中关于CSS操作部分使用说明
Jun 10 Javascript
javascript 哈希表(hashtable)的简单实现
Jan 20 Javascript
JavaScript打字小游戏代码
Dec 26 Javascript
javascript实现平滑无缝滚动
Aug 09 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
Oct 26 Javascript
Angular如何在应用初始化时运行代码详解
Jun 11 Javascript
Vue常用的几个指令附完整案例
Nov 06 Javascript
微信小程序配置服务器提示验证token失败的解决方法
Apr 03 Javascript
webpack4 SplitChunks实现代码分隔详解
May 23 Javascript
使用vue实现多规格选择实例(SKU)
Aug 23 Javascript
JavaScript中如何调用Java方法
Sep 16 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
五款常用mysql slow log分析工具的比较分析
2011/05/22 PHP
php array_walk() 数组函数
2011/07/12 PHP
smarty模板引擎之配置文件数据和保留数据
2015/03/30 PHP
php读取qqwry.dat ip地址定位文件的类实例代码
2016/11/15 PHP
PHP实现下载远程图片保存到本地的方法
2017/06/19 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
Yii2 queue的队列使用详解
2019/07/19 PHP
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
2019/12/13 PHP
PHP获取php,mysql,apche的版本信息及更多服务器信息
2021/03/09 PHP
Javascript实现真实字符串剩余字数提示的实例代码
2013/10/22 Javascript
java与javascript之间json格式数据互转介绍
2013/10/29 Javascript
使用js实现关闭js弹出层的窗口
2014/02/10 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
简单谈谈javascript中的变量、作用域和内存问题
2015/08/30 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
Angular中使用MathJax遇到的一些问题
2017/12/15 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
2018/01/22 Javascript
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
2019/02/28 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
javascript的delete运算符知识点总结
2019/11/19 Javascript
从源码解析Python的Flask框架中request对象的用法
2016/06/02 Python
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
如何启动时不需输入用户名与密码
2014/05/09 面试题
节能环保标语
2014/06/12 职场文书
十佳少先队员演讲稿
2014/09/12 职场文书
先进个人事迹材料
2014/12/29 职场文书
违反学校规则制度检讨书
2015/01/01 职场文书
2015年全国爱眼日活动方案
2015/05/05 职场文书
2015年创先争优工作总结
2015/05/23 职场文书
小学思品教学反思
2016/02/20 职场文书
2019经典广告词集锦!
2019/07/02 职场文书
MySQL 原理优化之Group By的优化技巧
2022/08/14 MySQL