前端网络监控与断网重链

最新推荐文章于 2024-04-10 17:38:26 发布

凃老师

最新推荐文章于 2024-04-10 17:38:26 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/tjx11111/article/details/104443154

版权

本文探讨了在前端项目中遇到的WebSocket在网络断开和恢复时的自动连接问题，讲解了WebSocket的心跳和重连机制，并提供了实现代码。此外，还介绍了如何使用JavaScript创建页面检测用户的互联网速度，包括img加载和Ajax等测速方法的优缺点。

摘要由CSDN通过智能技术生成

业务背景

最近在做大屏数据可视化项目得时候，在思考项目交付和运行情况得时候，考虑到了需要在公司大屏显示器上面展示，突然想到了项目可能面临断网及其网速慢得情况下得一下展示问题，因此作为专栏进行这两个问题得讲解

问题一 WebSocket 在网络终端和重新联网后自动链接

知识点: 理解WebSocket心跳及重连机制

在使用websocket的过程中，有时候会遇到网络断开的情况，但是在网络断开的时候服务器端并没有触发onclose的事件。这样会有：服务器会继续向客户端发送多余的链接，并且这些数据还会丢失。所以就需要一种机制来检测客户端和服务端是否处于正常的链接状态。因此就有了websocket的心跳了。还有心跳，说明还活着，没有心跳说明已经挂掉了。

为什么叫心跳包呢？
它就像心跳一样每隔固定的时间发一次，来告诉服务器，我还活着。
- 心跳机制是？

心跳机制是每隔一段时间会向服务器发送一个数据包，告诉服务器自己还活着，同时客户端会确认服务器端是否还活着，如果还活着的话，就会回传一个数据包给客户端来确定服务器端也还活着，否则的话，有可能是网络断开连接了。需要重连~

那么需要怎么去实现它呢？如下所有代码：

let ws = null,
    wsUrl = "ws://xxx/rest/api/websocket",
    lockReconnect = false,
    tt = null,
    that = this;
    function MonitorWebSocket(wsUrl){
        this.timeout = 3000;
        this.timeoutObj = null;
        this.serverTimeoutObj= null;
        
        try {
            ws = new WebSocket(wsUrl);
            this.init(wsUrl);
        } catch(e) {
            console.log('catch');
            this.reconnect(wsUrl);
        }
    }
    MonitorWebSocket.prototype.init = function (wsUrl) {
        ws.