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)


相关推荐

  • linux查看全部环境变量_linux刷新环境变量命令

    linux查看全部环境变量_linux刷新环境变量命令阅读目录linux查看环境变量linux变量的种类设置变量的三种方法使用unset删除指定的环境变量删除PATH环境变量指定值常用的环境变量其他linux查看环境变量1.使用echo命令查看单个环境变量。例如:echo$PATH2.使用env查看所有环境变量。例如:env3.使用set查看所有本地定义的环境变量。linux变量的种类按变量的生存周期来划分,Linux变量可分…

  • mac goland2022永久激活码_最新在线免费激活[通俗易懂]

    (mac goland2022永久激活码)最近有小伙伴私信我,问我这边有没有免费的intellijIdea的激活码,然后我将全栈君台教程分享给他了。激活成功之后他一直表示感谢,哈哈~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html1T…

  • Activity工作流学习总结

    Activity工作流学习总结1.概念工作流(Workflow),就是“业务过程的部分或整体在计算机应用环境下的自动化”,它主要解决的是“使在多个参与者之间按照某种预定义的规则传递文档、信息或任务的过程自动进行,从而实现某个预期的业务目标,或者促使此目标的实现”。2.Activity介绍Activiti5是由Alfresco软件在2010年5月17日发布的业务流程管理(BPM)框架,它是覆盖了业务流程管理、工作流、…

  • eplan永久激活码【2021免费激活】「建议收藏」

    (eplan永久激活码)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html…

  • roc曲线的意义_实用!Biomarker表达差异图、ROC曲线&四格表的实操手册「建议收藏」

    roc曲线的意义_实用!Biomarker表达差异图、ROC曲线&四格表的实操手册「建议收藏」解螺旋·蘑菇老师详细讲解biomarker研究在课题设计方面需要注意的一些共性问题,包括标本类型、样本收集以及病例资料三大部分。本期课程则汇总了biomarker研究中的典型图表以形成”图表九宫格“,并着重讲解有关biomarker表达差异(基础表达和变化趋势)、诊断标志(ROC曲线和四格表)的相关图表;同时,依据模拟数据,实操演示Graphpad、SPSS软件制作相关图表的具体步骤,学员们可按照…

  • 就这样CSDN账号被人盗了??

    就这样CSDN账号被人盗了??

发表回复

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

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