ES6 class 封装websocket 使用

介绍

在《菜鸟教程中》这样介绍WebSocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明- 显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。
HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

特点

建立在 TCP 协议之上，服务器端的实现比较容易。
与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
数据格式比较轻量，性能开销小，通信高效。服务器与客户端之间交换的标头信息大概只有2字节;
可以发送文本，也可以发送二进制数据。
没有同源限制，客户端可以与任意服务器通信。
协议标识符是 ws（如果加密，则为wss），服务器网址就是 URL。ex：ws://example.com:80/some/path
不用频繁创建及销毁TCP请求，减少网络带宽资源的占用，同时也节省服务器资源。
WebSocket 是纯事件驱动的，一旦连接建立，通过监听事件可以处理到来的数据和改变的连接状态，数据都以帧序列的形式传输。服务端发送数据后，消息和事件会异步到达。
无超时处理。

适用场景

对数据的实时性要求比较强，客户端与服务频繁交互的场景, 比如：

通信
股票
直播
共享桌面
聊天室
实时共享
多人协作 ....

WebSocket API 介绍

构造函数WebSocket(url, protocols)：构造WebSocket对象，以及建立和服务器连接; protocols可选字段，代表选择的子协议。
状态变量readyState: 代表当前连接的状态，短整型数据，取值为CONNECTING(值为0)， OPEN(值为1), CLOSING(值为2), CLOSED(值为3)。
方法变量close(code, reason)：关闭此WebSocket连接。
状态变量bufferedAmount: send函数调用后，被缓存并且未发送到网络上的数据长度。
方法变量send(data): 将数据data通过此WebSocket发送到对端。
回调函数onopen/onmessage/onerror/onclose: 当相应的事件发生时会触发此回调函数

WebSocket 封装思想

基于上述的API上扩展方法，上述的API 方法通过初始化，和参数一起传入，不用做任何操作，还有直接初始化，之后通过对象调用
扩展心跳检测
断线重连

基础知识

ES6的基础语法
ES6的class

E6封装部分源码

封装心跳基类

什么是心跳？其实心跳就像人类的心脏一样，有跳动，说明还活着。为什么要使用心跳呢？因为我们在使用WebSocket 的过程中，总会遇到网络断开的情况等各种情况，但是在遇到这些情况的时候服务器端并没有触发 onclose 的事件。这样会有：服务器会继续向客户端发送多余的链接，并且这些数据还会丢失。所以就需要一种机制来检测客户端和服务端是否处于正常的链接状态。因此就有了 WebSocket 的心跳了。还有心跳，说明还活着，没有心跳说明已经挂掉了，是不是相当于人类的心脏。

心跳机制: 本次封装的封装心跳基类，每隔一段时间会向服务器发送一个数据包，告诉服务器自己还活着，同时客户端会确认服务器端是否还活着，如果还活着的话，就会回传一个数据包给客户端来确定服务器端也还活着，否则的话，有可能是网络断开连接了。需要重连。这个间隔时间参数开放，心跳完成有回调函数，该基类适合大多数有这样原理的场景。做到啦全局复用。

心跳基类源码：

/**
 * 心跳基类
 */
class Heart {
  HEART_TIMEOUT = null // 心跳计时器
  SERVER_HEART_TIMEOUT = null // 心跳计时器

  constructor () {
    this.timeout = 5000
  }
  // 重置
  reset () {
    clearTimeout(this.HEART_TIMEOUT)
    clearTimeout(this.SERVER_HEART_TIMEOUT)
    return this
  }
  /**
   * 启动心跳
   * @param {Function} cb 回调函数
   */
  start (cb) {
    this.HEART_TIMEOUT = setTimeout(() => {
      cb()
      this.SERVER_HEART_TIMEOUT = setTimeout(() => {
        cb()
        // 重新开始检测
        this.reset().start(cb())
      }, this.timeout)
    }, this.timeout)
  }
}

封装WebSocket API

该封装可以在首次吃实话传入各种配置，永久使用，也可以通过实例化进行调用。

封装WebSocket类源码：

**
 *  OPTIONS = {
 *    url: null, // 链接的通道的地址
 *    heartTime: 5000, // 心跳时间间隔
 *    heartMsg: 'ping', // 心跳信息,默认为'ping'
 *    isReconnect: true, // 是否自动重连
 *    isRestory: false, // 是否销毁
 *    reconnectTime: 5000, // 重连时间间隔
 *    reconnectCount: 5, // 重连次数 -1 则不限制
 *    openCb: null, // 连接成功的回调
 *    closeCb: null, // 关闭的回调
 *    messageCb: null, // 消息的回调
 *    errorCb: null // 错误的回调
 *   }
 */
class Socket extends Heart {
  ws = null

  RECONNEC_TTIMER = null // 重连计时器
  RECONNECT_COUNT = 10 // 变量保存，防止丢失

  OPTIONS = {
    url: null, // 链接的通道的地址
    heartTime: 5000, // 心跳时间间隔
    heartMsg: 'ping', // 心跳信息,默认为'ping'
    isReconnect: true, // 是否自动重连
    isRestory: false, // 是否销毁
    reconnectTime: 5000, // 重连时间间隔
    reconnectCount: 5, // 重连次数 -1 则不限制
    openCb: null, // 连接成功的回调
    closeCb: null, // 关闭的回调
    messageCb: null, // 消息的回调
    errorCb: null // 错误的回调
  }
  constructor (ops) {
    super()
    Object.assign(this.OPTIONS, ops)
    this.create()
  }
  /**
   * 建立连接
   */
  create () {
    if (!('WebSocket' in window)) {
      /* eslint-disable no-new */
      new Error('当前浏览器不支持，无法使用')
      return
    }
    if (!this.OPTIONS.url) {
      new Error('地址不存在，无法建立通道')
      return
    }
    delete this.ws
    this.ws = new WebSocket(this.OPTIONS.url)
    this.onopen()
    this.onclose()
    this.onmessage()
  }
  /**
   * 自定义连接成功事件
   * 如果callback存在，调用callback，不存在调用OPTIONS中的回调
   * @param {Function} callback 回调函数
   */
  onopen (callback) {
    this.ws.onopen = (event) => {
      clearTimeout(this.RECONNEC_TTIMER) // 清除重连定时器
      this.OPTIONS.reconnectCount = this.RECONNECT_COUNT // 计数器重置
      // 建立心跳机制
      super.reset().start(() => {
        this.send(this.OPTIONS.heartMsg)
      })
      if (typeof callback === 'function') {
        callback(event)
      } else {
        (typeof this.OPTIONS.openCb === 'function') && this.OPTIONS.openCb(event)
      }
    }
  }
  /**
   * 自定义关闭事件
   * 如果callback存在，调用callback，不存在调用OPTIONS中的回调
   * @param {Function} callback 回调函数
   */
  onclose (callback) {
    this.ws.onclose = (event) => {
      super.reset()
      !this.OPTIONS.isRestory && this.onreconnect()
      if (typeof callback === 'function') {
        callback(event)
      } else {
        (typeof this.OPTIONS.closeCb === 'function') && this.OPTIONS.closeCb(event)
      }
    }
  }
  /**
   * 自定义错误事件
   * 如果callback存在，调用callback，不存在调用OPTIONS中的回调
   * @param {Function} callback 回调函数
   */
  onerror (callback) {
    this.ws.onerror = (event) => {
      if (typeof callback === 'function') {
        callback(event)
      } else {
        (typeof this.OPTIONS.errorCb === 'function') && this.OPTIONS.errorCb(event)
      }
    }
  }
........
  /**
   * 销毁
   */
  destroy () {
    super.reset()
    clearTimeout(this.RECONNEC_TTIMER) // 清除重连定时器
    this.OPTIONS.isRestory = true
    this.ws.close()
  }
}

测试

本次测试是基于nodejs 的 nodejs-websocket 模块来实现的一个简单的demo

部分源码

const createServer = ws.createServer(function (conn) {
  //计算心跳时间
  conn.heart_time = 0

  let timer = setInterval(() => {
    //检查心跳时间
    if (conn.heart_time > heart_beat) {
      clearInterval(timer);
      conn.close()
    }
    conn.heart_time++
  }, 1000)
  //uid
  let uid = conn.path.split('/')[conn.path.split('/').length - 1] || '0'
  conn.uid = uid
  console.log(`用户${uid}已经连接`)
  conn.sendText(`Hello 用户${uid}!`)
.....
  //处理错误事件信息
  conn.on('error', function (err) {
    console.log('用户' + uid + ' 已经断开连接，错误原因： ' + err)
  })
}).listen(7041);

测试截图

作者：禅思院
链接：
https://juejin.cn/post/7434406493698785295

webSocket封装，心跳检测+断线重连基于ES6,已在生产上使用

ES6 class 封装websocket 使用

介绍

特点

适用场景

WebSocket API 介绍

WebSocket 封装思想

基础知识

E6封装部分源码

封装心跳基类

封装WebSocket API

测试

部分源码

测试截图

相关推荐

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?

关于HTML5被简称做H5，你怎么看?（html5缩写）

在SpringBoot+Vue3项目中通过Nginx代理WebSocket实现跨域通信

利用webSocket实现消息的实时推送

谈谈websocket跨域

前端开发规范(一、HTML篇)

html5 工业web组态-开发自定义的组件 (炫酷按钮)