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

朱雀 2023-01-01 15:58 246阅读 0赞

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

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

原ReconnectingWebSocket的[GITHUB下载地址][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资源包][ReconnectingWebSocket _ _SlWebSocket]

[GITHUB]: https://github.com/joewalnes/reconnecting-websocket/
[ReconnectingWebSocket _ _SlWebSocket]: https://download.csdn.net/download/qq_35606400/14017452

发表评论取消回复

表情：

评论列表（有 0 条评论，246人围观）

还没有评论，来说两句吧...

相关阅读

相关 ActiveMQ的断线自动重连机制

ActiveMQ的断线自动重连机制 ActiveMQ是一个开源的消息中间件，提供了可靠的消息传递机制。在使用ActiveMQ时，我们经常会遇到网络断线的情况，为了保证消息的可

刺骨的言语ヽ痛彻心扉/ 2024年03月23日 23:54/ 0 赞/ 65 阅读

相关【Netty】三、Netty心跳检测与断线重连

Netty心跳检测一、Netty心跳检测与断线重连案例客户端代码 NettyClient NettyCli

﹏ヽ暗。殇╰゛Y/ 2023年10月09日 15:02/ 0 赞/ 77 阅读

相关 JAVA 实现websocket作为客户端（自动断线重连）

因为很少有这样作为客户端的使用，但是遇上特殊需求还是要作为客户端使用，spring-boot-starter集成的无法实现客户端，直接上代码 pom引入，这里使用的sprin

不念不忘少年蓝@/ 2023年05月29日 02:34/ 0 赞/ 19 阅读

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

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

朱雀/ 2023年01月01日 15:58/ 0 赞/ 247 阅读

相关理解WebSocket心跳及重连机制

在使用websocket的过程中，有时候会遇到网络断开的情况，但是在网络断开的时候服务器端并没有触发onclose的事件。这样会有：服务器会继续向客户端发送多余的链接，并且这些

落日映苍穹つ/ 2022年12月22日 08:48/ 0 赞/ 321 阅读

相关 vue + websocket心跳重连机制

注意！！！ 1. 当页面涉及到主动关闭连接的操作时，则不能在 this.onclose() 内调用 this.reconnect() 重连方法（除非你能够区分主动断开

川长思鸟来/ 2022年10月15日 07:58/ 0 赞/ 337 阅读

相关初探和实现websocket心跳重连

心跳重连缘由在使用websocket过程中，可能会出现网络断开的情况，比如信号不好，或者网络临时性关闭，这时候websocket的连接已经断开，而浏览器不会执行webs

墨蓝/ 2022年05月30日 00:20/ 0 赞/ 256 阅读

相关 netty实现心跳机制与断线重连

转载自：[https://blog.csdn.net/z69183787/article/details/52671543][https_blog.csdn.net_z

水深无声/ 2022年05月27日 04:22/ 0 赞/ 277 阅读

相关 Netty4 实现心跳机制与断线重连

转自：[https://segmentfault.com/a/1190000006931568][https_segmentfault.com_a_11900000069315

ゝ一纸荒年。/ 2022年04月23日 02:50/ 0 赞/ 290 阅读

相关 WebSocket断线重连

$scope.timeout = 10800,//3分钟发一次心跳 $scope.timeoutObj = null, $scope.serverTimeoutObj

小咪咪/ 2021年09月30日 15:22/ 0 赞/ 423 阅读