WebSocket断线自动重连javascript库(含心跳包)

WebSocket断线自动重连javascript库(含心跳包)ReconnectingWebSocket是一个小型的JavaScript库,封装了WebSocketAPI提供了在连接断开时自动重连的机制。//只需要简单的将:varws=newWebSocket(‘ws://….’);//替换成:varws=newReconnectingWebSocket(‘ws://….’);原ReconnectingWebSocket的GITHUB下载地址下面是我从ReconnectingWebSocket源代码里根据我自身.

大家好,又见面了,我是你们的朋友全栈君。

ReconnectingWebSocket 是一个小型的 JavaScript 库,封装了 WebSocket API
提供了在连接断开时自动重连的机制。

// 只需要简单的将:
var ws = new WebSocket('ws://....');
// 替换成:
var ws = new ReconnectingWebSocket('ws://....');

原ReconnectingWebSocket的GITHUB下载地址
下面是我从ReconnectingWebSocket源代码里根据我自身的业务需求修改的重连库

(function (global, factory) { 

if (typeof define === 'function' && define.amd) { 

define([], factory);
} else if (typeof module !== 'undefined' && module.exports){ 

module.exports = factory();
} else { 

global.SlWebSocket = factory();
}
})(this, function () { 

if (!('WebSocket' in window)) { 

return;
}
function SlWebSocket(url, protocols, options) { 

// Default settings
var settings = { 

/** Whether this instance should log debug messages. */
debug: false,
/** Whether or not the websocket should attempt to connect immediately upon instantiation. */
automaticOpen: true,
/** The number of milliseconds to delay before attempting to reconnect. */
reconnectInterval: 1000,
/** The maximum number of milliseconds to delay a reconnection attempt. */
maxReconnectInterval: 30000,
/** The rate of increase of the reconnect delay. Allows reconnect attempts to back off when problems persist. */
reconnectDecay: 1.5,
/** The maximum time in milliseconds to wait for a connection to succeed before closing and retrying. */
timeoutInterval: 2000,
/** The maximum number of reconnection attempts to make. Unlimited if null. */
maxReconnectAttempts: null,
/** The binary type, possible values 'blob' or 'arraybuffer', default 'blob'. */
binaryType: 'blob',
/** 心跳包定时器-by slong .*/
heartbeat_time: null,
/** 心跳持续时间-by slong .*/
heartbeat_duration: 30,
/** 心跳包数据-by slong .*/
heartbeat_content: ''
}
if (!options) { 
 options = { 
}; }
// Overwrite and define settings with options if they exist.
for (var key in settings) { 

if (typeof options[key] !== 'undefined') { 

this[key] = options[key];
} else { 

this[key] = settings[key];
}
}
// These should be treated as read-only properties
/** The URL as resolved by the constructor. This is always an absolute URL. Read only. */
this.url = url;
/** The number of attempted reconnects since starting, or the last successful connection. Read only. */
this.reconnectAttempts = 0;
/** * The current state of the connection. * Can be one of: WebSocket.CONNECTING, WebSocket.OPEN, WebSocket.CLOSING, WebSocket.CLOSED * Read only. */
this.readyState = WebSocket.CONNECTING;
/** * A string indicating the name of the sub-protocol the server selected; this will be one of * the strings specified in the protocols parameter when creating the WebSocket object. * Read only. */
this.protocol = null;
// Private state variables
var self = this;
var ws;
var forcedClose = false;
var timedOut = false;
var eventTarget = document.createElement('div');
// Wire up "on*" properties as event handlers
eventTarget.addEventListener('open',       function(event) { 
 self.onopen(event); });
eventTarget.addEventListener('close',      function(event) { 
 self.onclose(event); });
eventTarget.addEventListener('connecting', function(event) { 
 self.onconnecting(event); });
eventTarget.addEventListener('message',    function(event) { 
 self.onmessage(event); });
eventTarget.addEventListener('error',      function(event) { 
 self.onerror(event); });
// Expose the API required by EventTarget
this.addEventListener = eventTarget.addEventListener.bind(eventTarget);
this.removeEventListener = eventTarget.removeEventListener.bind(eventTarget);
this.dispatchEvent = eventTarget.dispatchEvent.bind(eventTarget);
/** * This function generates an event that is compatible with standard * compliant browsers and IE9 - IE11 * * This will prevent the error: * Object doesn't support this action * * http://stackoverflow.com/questions/19345392/why-arent-my-parameters-getting-passed-through-to-a-dispatched-event/19345563#19345563 * @param s String The name that the event should use * @param args Object an optional object that the event will use */
function generateEvent(s, args) { 

var evt = document.createEvent("CustomEvent");
evt.initCustomEvent(s, false, false, args);
return evt;
};
this.open = function (reconnectAttempt) { 

let that = this;
ws = new WebSocket(self.url, protocols || []);
ws.binaryType = this.binaryType;
if (reconnectAttempt) { 

if (this.maxReconnectAttempts && this.reconnectAttempts > this.maxReconnectAttempts) { 

return;
}
} else { 

eventTarget.dispatchEvent(generateEvent('connecting'));
this.reconnectAttempts = 0;
}
if (self.debug || SlWebSocket.debugAll) { 

console.debug('SlWebSocket', 'attempt-connect', self.url);
}
var localWs = ws;
var timeout = setTimeout(function() { 

if (self.debug || SlWebSocket.debugAll) { 

console.debug('SlWebSocket', 'connection-timeout', self.url);
}
timedOut = true;
localWs.close();
timedOut = false;
}, self.timeoutInterval);
ws.onopen = function(event) { 

// that.send();// 触发心跳包,一般接入成功就会进行token等鉴权判断,所以该行可忽略
clearTimeout(timeout);
if (self.debug || SlWebSocket.debugAll) { 

console.debug('SlWebSocket', 'onopen', self.url);
}
self.protocol = ws.protocol;
self.readyState = WebSocket.OPEN;
self.reconnectAttempts = 0;
var e = generateEvent('open');
e.isReconnect = reconnectAttempt;
reconnectAttempt = false;
eventTarget.dispatchEvent(e);
};
ws.onclose = function(event) { 

clearTimeout(timeout);
ws = null;
if (forcedClose) { 

self.readyState = WebSocket.CLOSED;
eventTarget.dispatchEvent(generateEvent('close'));
} else { 

self.readyState = WebSocket.CONNECTING;
var e = generateEvent('connecting');
e.code = event.code;
e.reason = event.reason;
e.wasClean = event.wasClean;
eventTarget.dispatchEvent(e);
if (!reconnectAttempt && !timedOut) { 

if (self.debug || SlWebSocket.debugAll) { 

console.debug('SlWebSocket', 'onclose', self.url);
}
eventTarget.dispatchEvent(generateEvent('close'));
}
var timeout = self.reconnectInterval * Math.pow(self.reconnectDecay, self.reconnectAttempts);
setTimeout(function() { 

self.reconnectAttempts++;
self.open(true);
}, timeout > self.maxReconnectInterval ? self.maxReconnectInterval : timeout);
}
};
ws.onmessage = function(event) { 

if (self.debug || SlWebSocket.debugAll) { 

console.debug('SlWebSocket', 'onmessage', self.url, event.data);
}
var e = generateEvent('message');
e.data = event.data;
eventTarget.dispatchEvent(e);
};
ws.onerror = function(event) { 

if (self.debug || SlWebSocket.debugAll) { 

console.debug('SlWebSocket', 'onerror', self.url, event);
}
eventTarget.dispatchEvent(generateEvent('error'));
};
}
// Whether or not to create a websocket upon instantiation
if (this.automaticOpen == true) { 

this.open(false);
}
/** * 改造后的send方法 * * @param data a text string, ArrayBuffer or Blob to send to the server. */
this.send = function(type,param) { 

if (ws) { 

if (self.debug || SlWebSocket.debugAll) { 

console.debug('SlWebSocket', 'send', self.url, data);
}
clearTimeout(this.heartbeat_time);// 清除上次未执行的心跳
this.heartbeat_time = setTimeout(this.send.bind(this),this.heartbeat_duration * 1000,'__HEARTBEAT__');
if(type === '__HEARTBEAT__'){ 

ws.send(this.heartbeat_content);
}
else if(typeof type === 'object'){ 

ws.send(JSON.stringify(type));
}
else if(type && param){ 

ws.send(JSON.stringify({ 
type,param}));
}
} else { 

throw 'INVALID_STATE_ERR : Pausing to reconnect websocket';
}
};
/** * Transmits data to the server over the WebSocket connection. * * @param data a text string, ArrayBuffer or Blob to send to the server. */
this.sendRaw = function(data) { 

if (ws) { 

if (self.debug || SlWebSocket.debugAll) { 

console.debug('SlWebSocket', 'send', self.url, data);
}
return ws.send(data);
} else { 

throw 'INVALID_STATE_ERR : Pausing to reconnect websocket';
}
};
/** * Closes the WebSocket connection or connection attempt, if any. * If the connection is already CLOSED, this method does nothing. */
this.close = function(code, reason) { 

// Default CLOSE_NORMAL code
if (typeof code == 'undefined') { 

code = 1000;
}
forcedClose = true;
if (ws) { 

ws.close(code, reason);
}
};
/** * Additional public API method to refresh the connection if still open (close, re-open). * For example, if the app suspects bad data / missed heart beats, it can try to refresh. */
this.refresh = function() { 

if (ws) { 

ws.close();
}
};
}
/** * An event listener to be called when the WebSocket connection's readyState changes to OPEN; * this indicates that the connection is ready to send and receive data. */
SlWebSocket.prototype.onopen = function(event) { 
};
/** An event listener to be called when the WebSocket connection's readyState changes to CLOSED. */
SlWebSocket.prototype.onclose = function(event) { 
};
/** An event listener to be called when a connection begins being attempted. */
SlWebSocket.prototype.onconnecting = function(event) { 
};
/** An event listener to be called when a message is received from the server. */
SlWebSocket.prototype.onmessage = function(event) { 
};
/** An event listener to be called when an error occurs. */
SlWebSocket.prototype.onerror = function(event) { 
};
/** * Whether all instances of SlWebSocket should log debug messages. * Setting this to true is the equivalent of setting all instances of SlWebSocket.debug to true. */
SlWebSocket.debugAll = false;
SlWebSocket.CONNECTING = WebSocket.CONNECTING;
SlWebSocket.OPEN = WebSocket.OPEN;
SlWebSocket.CLOSING = WebSocket.CLOSING;
SlWebSocket.CLOSED = WebSocket.CLOSED;
return SlWebSocket;
});

使用时把new new WebSocket(‘ws://…’)替换成new SlWebSocket(‘ws://…’);
下载ReconnectingWebSocket + 修改后的SlWebSocket资源包

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/161192.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 回溯法之01背包问题

    回溯法之01背包问题一、问题n皇后问题的解空间树是一颗排列树,而01背包问题的解空间树应该是一颗子集树。再简述下该问题:有n件物品和一个容量为c的背包。第i件物品的价值是v[i],重量是w[i]。求解将哪些物品装入背包可使价值总和最大。所谓01背包,表示每一个物品看成一个整体,要么全部装入,要么都不装入。这里n=5,c=10,w={2,2,6,5,4},v={6,3,5,4,6}。01背…

    2022年10月17日
  • crontab 定时任务配置

    crontab 定时任务配置2019独角兽企业重金招聘Python工程师标准>>>…

  • Mybatis分页插件-PageHelper的使用

    Mybatis分页插件-PageHelper的使用Mybatis分页插件-PageHelper的使用怎样配置mybatis这里就不提了,我来说说我配置这个分页插件的过程吧。下载JAR包分页插件pagehelper.jar:https://oss.sonatype.org/content/repositories/releases/com/github/pagehelper/pagehelper/http://repo1.maven.org/ma

  • 安全测试:BurpSuite 学习使用教程

    安全测试:BurpSuite 学习使用教程一、简介:BurpSuite是用于攻击web应用程序的集成平台。它包含了许多Burp工具,这些不同的burp工具通过协同工作,有效的分享信息,支持以某种工具中的信息为基础供另一种工具使用的方式发起攻击。这些工具设计了许多接口,以促进加快攻击应用程序的过程。所有的工具都共享一个能处理并显示HTTP消息,持久性,认证,代理,日志,警报的一个强大的可扩展的框架。它主要用来做安全性渗透测试

  • 源码编译安装memcached和PHP扩展memcache整理总结

    源码编译安装memcached和PHP扩展memcache整理总结

  • 俄罗斯介入叙利亚始末_俄罗斯为什么不帮助利比亚

    俄罗斯介入叙利亚始末_俄罗斯为什么不帮助利比亚导读对于美国国土安全部禁止该国所有国家机构使用俄罗斯卡巴斯基实验室软件的做法,俄罗斯政府于9月14日提出批评。卡巴斯基实验室否认美国政府提出的所有指控,并表示愿意与美国国土安全部合作。俄罗斯总统新闻秘书德米特里·佩斯科夫9月14日对记者表…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号