webSocket断线重连(不需要心跳 ,纯前端 无需后端 超级简单)

webSocket断线重连

废话不多说直接上代码

<script>

    var websocket; //声明webSocket 对象

    //定时器 只执行一次的那种 只是为了限制重连频率 = =
    var heartCheck = {
        timeout: 5000, //重连时间
        timeoutObj: null,
        start: function(){
            this.timeoutObj = setTimeout(function(){
                getSocket() //这里重新创建 websocket 对象并赋值
            }, this.timeout)
        }
    }

    //第一次进来 websocket对象并赋值
    getSocket()

    function getSocket(){
        if('WebSocket' in window) {
            websocket = new WebSocket("ws://localhost:8080/doorplate/msgsocket?deviceId=551684123156");
            console.log("============Websocket");

            // 这里也可以判读 是否连接上 在进行下一步操作 这里事件紧张就不写了 比如属性变化...

            setSocket(websocket) //这里重写对象监听事件
        }else if ('MozWebSocket' in window) {
            websocket = new MozWebSocket("ws://localhost:8080/doorplate/msgsocket?deviceId=551684123156");
            console.log("=============MozWebSocket");
            setSocket(websocket)
        } else {
            websocket = new SockJS("http://localhost:8080/doorplate/msgsocket/sockjs?deviceId=551684123156");
            console.log("=============SockJS");
            setSocket(websocket)
        }
    }

    function  setSocket(websocket) {

        websocket.onopen = function(evnt) {
            console.log('连接已经建立');
        };
        websocket.onmessage = function(evnt) {
            document.getElementById("msg").innerHTML += evnt.data + '<br/>'
        };
        websocket.onerror = function(evnt) {
            console.log('发生错误');
        };
        websocket.onclose = function(evnt) {
            console.log('连接断开');
            //连接关闭启动定时任务 五秒后在创建
            heartCheck.start();
        }
    }

    //ps: 创建的socket 对象连接不上后端服务器也会执行 断开操作

</script>

ok 简单吧

  • 5
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
前端 WebSocket 断线重连是一种处理 WebSocket 连接异常断开的方法,以确保 WebSocket 连接的可靠性。以下是一个基本的断线重连示例: ```javascript let websocket = null; let lockReconnect = false; // 避免重复连接 function createWebSocket() { try { websocket = new WebSocket('ws://localhost:8080'); websocket.onopen = function () { console.log('WebSocket 连接成功'); }; websocket.onclose = function () { console.log('WebSocket 连接关闭'); reconnect(); }; websocket.onerror = function () { console.log('WebSocket 连接出错'); reconnect(); }; websocket.onmessage = function (event) { console.log('收到消息:', event.data); }; } catch (e) { console.log('WebSocket 连接异常:', e.message); reconnect(); } } function reconnect() { if (lockReconnect) { return; } lockReconnect = true; // 重连间隔递增 setTimeout(function () { createWebSocket(); lockReconnect = false; }, 5000); } createWebSocket(); ``` 以上代码中,`createWebSocket` 函数用于创建 WebSocket 连接,捕获连接成功、关闭、出错和收到消息的事件。如果连接关闭或出错,则调用 `reconnect` 函数进行重连。`reconnect` 函数会检查是否已经在重连中,如果是则不进行重连,否则等待一段时间后重新创建 WebSocket 连接。 需要注意的是,WebSocket 断线重连的实现也需要考虑到服务器的实现,例如服务器可能会限制客户端的连接频率或连接数量。因此,更复杂的实现方式可能需要考虑这些因素。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值