Install
npm i react-native-reconnecting-websocket
概览
在React-Naitve中调用的WebSocket并不是调用web或者NodeJs中的那个WebSocket API，只是使用方式被设计得一样而已。详见源代码 react-native/WebSocket.js
WebSocket，以下简称WS，目前自带有onOpen、onMessage、onClose、onError四种监听事件以及close()和send()两种方法，
当发生网路故障或者服务器故障时会断开链接，这时再重新链接WS时需要开发者再次实例化WS，如下reconnect()方法
var ws = new WebSocket();
ws.onClose(){
ws.reconnect()
}
ws.reconnect(){
ws = new WebSocket()
}
如果又断开时需要延迟一段时间重试以减少开销，因此还要在onClose方法中继续拓展
ws.onClose(){
setTimeout(function(){
ws.reconnect()
},3000)
}
在某些场景中，WS可能永远不会再被重连，我们还要考虑添加重连次数限制
ws.onOpen(){
clearTimeout(timeout)
reconnectAttempts = 0; //重连次数归零
}
ws.onClose(){
if(maxReconnectAttempts === reconnectAttempts){
//超出重连限制时禁止重连
return false
}
timeout = setTimeout(function(){
reconnectAttempts++;
ws.reconnect()
})
}
仅仅是新增重连机制，就要在onOpen和onClose中添加这么多代码，还没有考虑到代码的鲁棒性。对于RN外包团队来说，很难做到多项目复用，即使复用也使得代码变得冗余臃肿，既然RN的WS也是模仿Web端进行设计的，那么如果能仅拓展源代码将会使得业务更加模块化开发。
React-Native/Libraries/WebSocket.js
通过打印console.log(new WebSocket())可以看到有一个属性_subscriptions，里面是所有注册的监听事件（上述说到的四种事件）。可以看出，RN在处理监听事件上是用的发布订阅事件模型，详见 WebSocketEvent.js，基于此，我们可以在_subscriptions中增加自定义事件达到不污染业务代码onClose、onOpen
如何拓展
详见 https://github.com/React-Sextant/react-native-reconnecting-websocket
基本原理
class ReconnectingWebSocket extends WebSocket{
}
github上有对Web端进行拓展的包joewalnes/reconnecting-websocket，但不兼容RN。
心跳包
1.日常开发代码
import ReconnectingWebSocket from "react-native-reconnecting-websocket"
ws = new ReconnectingWebSocket("ws://...");
ws.onopen = (e) => {
console.log("onopen",e)
};
ws.onmessage = (evt) => {
console.log("onmessage",JSON.parse(evt.data))
};
ws.onclose = (e) => {
console.log("onclose",e)
};
ws.onerror = (e) => {
console.log("onerror",e)
};
// add listen connecting event
// @params reconnectAttempts 尝试重连的次数
ws.onconnecting = (reconnectAttempts) => {
console.log("onconnecting", reconnectAttempts)
}
2.断网联网监听
NetInfo.addEventListener('connectionChange',(info) => {
if(info.type == 'none' || info.type == 'unknown') {
heartCheck.reset();
ws.close();
}else {
heartCheck.reset();
ws.reconnect();
}
});
3.添加心跳包heartbeat
ws.onopen = (e) => {
// execute immediately!
ws.send("heartbeat string");
heartCheck.reset().start()
};
ws.onmessage = (evt) => {
heartCheck.reset().start()
};
var heartCheck = {
timeout: 10000,//default 10s
timeoutObj: null,
serverTimeoutObj: null,
reset:function(){
clearTimeout(this.timeoutObj);
clearTimeout(this.serverTimeoutObj);
return this;
},
start:function(){
let self = this;
this.timeoutObj = setTimeout(function(){
if(ws.readyState === ws.OPEN){
ws.send("heartbeat string");
}
self.serverTimeoutObj = setTimeout(function(){
ws.reconnect(); // 重连
}, self.timeout)
}, this.timeout)
}
}
别忘了务必在卸载组件前清除定时器！
componentWillUnmount(){
// 清除定时器
heartCheck.reset();
// 主动关闭ws连接
ws && typeof ws.close === "function" && ws.close();
}
关于心跳定时器和ws状态
- 如果ws状态为
CONNECTING时，使用ws.send()会使应用崩溃INVALID_STATE_ERR，
所以要这样使用send才安全:if(ws.readyState !== ws.CONNECTING){ ws.send(heartStr) } - 如果ws状态为
CLOSEING或者CLOSED，即非OPEN使，使用ws.send()会使socketerror
对于react-native-reconnecting-websocket而言，只有在onerror时才会自动重连，onclose时不会。所以当心跳返回发生超时时，我们有两种方案:
- 使用
ws.reconnect()主动重连start:function(){ let self = this; this.timeoutObj = setTimeout(function(){ if(ws.readyState === ws.OPEN){ //只在OPEN状态发送心跳 ws.send("heartbeat string"); } self.serverTimeoutObj = setTimeout(function(){ ws.reconnect(); // 本库提供的 }, self.timeout) }, this.timeout) } - 非OPEN状态下也使用
ws.send()主动使socket error，触发重连start:function(){ let self = this; this.timeoutObj = setTimeout(function(){ if(ws.readyState !== ws.CONNECTING){ //只要不是CONNECING都发送 ws.send("heartbeat string"); } self.serverTimeoutObj = setTimeout(function(){ ws.close(); }, self.timeout) }, this.timeout) } //监听到close时重置定时器以触发`ws.send()` ws.onclose = ()=>{ heartCheck.reset().start() }
其他
安卓原生module包
感兴趣的还可以直接修改原生包
package com.facebook.react.modules.websocket
参考
- [1] API设计参考reconnecting-websocket
github.com - [2] react-native-reconnecting-websocket
npm@1.0.3 - [3] 更多补完文档请参阅https://github.com/React-Sextant/react-native-bridge-docs
