websocket中断重连就用它了!


大家好,我是可爱又机灵的开源小妹。今天给大家介绍一款 websocket 相关的 JS 库,reconnecting-websocket

概述

在说该项目之前我们先大概说一下 websocket,我们先看下面一个小例子: 我在发布系统中发布项目前端页面如何知道发布结果呢,
一种是通过 ajax 不停的轮询请求服务端获取状态这种性能不是很高,
还有一种就是服务端状态变更了主动通知客户端,这个就是可以通过 websocket来完成。
我们在使用 websocket 有的时候中断了,这个时候就需要进行断线重连,reconnecting-websocket 则提供了自动重连,它是一个 javascript封闭的 websocket 库,非常小,gzip 压缩之后小于 600 字节。

简单使用

我们最开始使用 websocket 的时候如下:

1
var ws = new WebSocket('ws://....');

我们只需要把上面的代码替换成下面的就可以了,当 websocket 断开了它会帮你自动重连,下载对应的 reconnecting-websocket.js 文件 引入可以直接使用

1
2
3
4
<script type="text/javascript" src="js/reconnecting-websocket.js"></script>
<script>
var ws = new ReconnectingWebSocket(url, protocols, options);
</script>

除了在项目中直接引入 js 文件,在 vue 项目中也是可以使用的

1
import ws from 'reconnecting-websocket';

上面方法中包含了三个参数,作用分别如下:
url:必选项,需要连接的地址,就类似上面的发布系统的地址
protocols:可选项,根据WebSocket规范,可选的协议字符串或数组。
options:是一些可选参数,可以创建的时候指定,也可以后续使用的时候在做处理。
上面只是简单的时候,有的时候想进行调试或者设置一些高级的参数 就是通过 options 进行操作的。

1
2
3
4
5
6
var socket = new ReconnectingWebSocket(url, null, {debug: true, reconnectInterval: 1000});

//下面的代码和上面的效果是一样的
var socket = new ReconnectingWebSocket(url);
socket.debug = true;
socket.timeoutInterval = 1000;

上面的 debug 就表示此实例是否应记录调试消息。调试消息一般是打印到控制台中,reconnectInterval 则表示重新链接延迟的毫秒数。
除上上面列的两个还有很多选项呢,下面小妹列出几个常用的参数:

  • maxReconnectInterval:延迟重新连接尝试的最大毫秒数。
  • timeoutInterval:在关闭并重试之前等待连接成功的最长时间(以毫秒为单位)。
  • maxReconnectAttempts:重新连接的最大次数。如果为空,将永远继续进行重新连接尝试。默认为空

除了常见的属性以外,它还包含了几个常用的方法就像 ws.close(code, reason)、ws.refresh()、ws.send(data) 等。
经过小妹的介绍是不是感觉很简单呢,今天小妹就介绍到这里

总结

reconnecting-websocket 实际上是 js 对 websocket api的封装,主要功能就是提供了自动重新连接的功能,感兴趣的小伙伴赶快来尝试一下吧。


文章作者: 开源小分队
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 开源小分队 !
  目录