ts封装websocket,支持失败重连、心跳、事件订阅
前言
一直很想体验下websocket,苦于一直没有机会,乘着这次优化,封装了一个原生的websocket处理类,本来是想用Socket.io的,但是它只能和它配套的server端使用,对于一些非封装的服务端,没法直接使用,于是只能自己封装了。
功能:
- 支持失败重连
- 支持心跳
- 支持重新初始化
- 事件订阅
- ts愉悦的类型推断,传入事件名和回调函数,能自动推断出结果类型
- 支持手动断卡,重新初始化即可重新连接
为什么需要重新初始化,因为我们的spa项目中,用户退出登录需要断开socket连接,用户登录后又需要重新连接,所以重新初始化承接的是切换用户重连的功能。
事件订阅是由于socket传递消息全靠原生的onmessage事件,在通过这个事件的event对象里面的一些属性去区分具体事件,所以我们需要一个事件分发机制,用于通知对应事件。
再者,有些事件是长期的,订阅一次后可能没法重新订阅,比如app.vue中的处理,所以我设计的事件订阅会一直持有所有订阅,除非你手动off移除,这样的话,哪怕重新初始化连接socket,相对于的事件通知也不会丢失。
源码
此处内容已隐藏回复后方可阅读。
分类:
TypeScript
标签:
websocket失败重连心跳事件订阅
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿站点。未经许可,禁止转载。
全部评论 9
1
Google Chrome Windows 10ctxx
Google Chrome MacOS132132
Google Chrome Windows 10user
Google Chrome Windows 10123
Google Chrome Windows 10111
Google Chrome Windows 10moxiaoying
Google Chrome Androidmalou佛
Google Chrome Windows 10木灵鱼儿
FireFox Windows 10