前言

一直很想体验下websocket,苦于一直没有机会,乘着这次优化,封装了一个原生的websocket处理类,本来是想用Socket.io的,但是它只能和它配套的server端使用,对于一些非封装的服务端,没法直接使用,于是只能自己封装了。

功能:

  1. 支持失败重连
  2. 支持心跳
  3. 支持重新初始化
  4. 事件订阅
  5. ts愉悦的类型推断,传入事件名和回调函数,能自动推断出结果类型
  6. 支持手动断卡,重新初始化即可重新连接

为什么需要重新初始化,因为我们的spa项目中,用户退出登录需要断开socket连接,用户登录后又需要重新连接,所以重新初始化承接的是切换用户重连的功能。

事件订阅是由于socket传递消息全靠原生的onmessage事件,在通过这个事件的event对象里面的一些属性去区分具体事件,所以我们需要一个事件分发机制,用于通知对应事件。

再者,有些事件是长期的,订阅一次后可能没法重新订阅,比如app.vue中的处理,所以我设计的事件订阅会一直持有所有订阅,除非你手动off移除,这样的话,哪怕重新初始化连接socket,相对于的事件通知也不会丢失。

源码

此处内容已隐藏回复后方可阅读。

分类: TypeScript 标签: websocket失败重连心跳事件订阅

评论

全部评论 5

  1. 123
    123
    Google Chrome Windows 10
    评论123456
  2. 111
    111
    Google Chrome Windows 10
    测试12312312312
  3. moxiaoying
    moxiaoying
    Google Chrome Android
    vueuse不是有现成的吗?
  4. malou佛
    malou佛
    Google Chrome Windows 10
    我的评价是:写的很一般
    1. 木灵鱼儿
      木灵鱼儿
      FireFox Windows 10
      @malou佛[脱单doge]吊毛昵称已经出卖了你

目录