本文作者:DurkBlue

webSocket 前端心跳机制

webSocket 前端心跳机制摘要: 1前言...

1前言

websocket 一般 每隔 90 秒无操作则会自动断开  ,需要加入一个心跳机制 来防止 自断

2. 实验过程

(1)设定一个jsp 或html 文件都行 ,加入元素

webSocket 前端心跳机制 第1张

(2)js 源码 

//避免重复链接
var lockReconnect = false;
//路径
var wsUrl = $("#wsUrl").val();
console.log("路径" + wsUrl);
//webSocket对象
var ws;
//时间间隔
var tt;
if ("WebSocket" in window) {
    console.log("支持WebSocket")
} else {
    alert("该浏览器不支持WebSocket")
}
//创建ws连接
var createWebSocket = function (wsUrl) {
    try {
        //成功
        ws = new WebSocket(wsUrl);
        webSocketInit();//初始化webSocket连接函数
    } catch (e) {
        //失败
        console.log('catch');
        //重连
        //重连函数
        webSocketReconnect(wsUrl);
    }
};
//初始化方法,成功后执行
var webSocketInit = function () {
    //连接关闭函数
    ws.onclose = function () {
        console.log("连接已关闭...");
        webSocketReconnect(wsUrl)//如果连接关闭则重连
    };
    //连接错误函数
    ws.onerror = function () {
        console.log("连接错误...");
        webSocketReconnect(wsUrl)//如果连接错误则重连
    };
    //连接建立,发送信息
    ws.onopen = function () {
        var message1 = {
            "type": "SUB",
            "service": "业务1-确认第一次发送信息"
        };
        ws.send(JSON.stringify(message1));//webSocket业务订阅——可以有多个业务
        // var message2 = {
        //     "type": "SUB",
        //     "service": "业务2"
        // };
        // ws.send(JSON.stringify(message2));
        //心跳检测启动
        heartCheck.start();//订阅业务发送之后启动心跳检测机制
    };
    //业务订阅成功后接受服务端推送消息  ,其实是个字符串
    ws.onmessage = function (evt) {
        console.log('接收到消息' + evt.data);
        $("#span").html(evt.data);
        // var DATA=JSON.parse(evt.data);
        // if (DATA.service=="业务1") {
        //     console.log("接收业务1的数据");
        //     //接收业务1的数据,并进行相关逻辑处理
        // }
        // if (DATA.service=="业务2"){
        //     console.log("接收业务1的数据");
        //     //接收业务2的数据,并进行相关逻辑处理
        // }
        //接收一次后台推送的消息,即进行一次心跳检测重置
        heartCheck.reset();
    };
};
var webSocketReconnect = function (url) {
    console.log("socket 连接断开,正在尝试重新建立连接");
    if (lockReconnect) {
        return;
    }
    lockReconnect = true;
    //没连接上会一直重连,设置延迟,避免请求过多
    //
    //s中清楚setTimeout的定时触发设置,之所以加个timer,是为了方便第二次赋值给timer。
    // 也就是说直接clearTImeout(timer)则timer就不存在了 再次访问就是error了。
    // 而timer&&clearTimeout(timer)则将timer 变成undefined
    tt && clearTimeout(tt);
    tt = setTimeout(function () {
       createWebSocket(url);
    }, 4000)
};
//心跳检测  .所谓的心跳检测,就是隔一段时间向服务器仅限一次数据访问,因为长时间不使用会导致ws自动断开,
// 一般是间隔90秒内无操作会自动断开,因此,在间隔时间内进行一次数据访问,以防止ws断开即可,
//这里选择30秒,倒计时30秒内无操作则进行一次访问,有操作则重置计时器
//
//封装为键值对的形式,成为js对象,与json很相似
var heartCheck={
    timeout: 30000,//30秒
    timeoutObj: null,
    reset: function(){//接收成功一次推送,就将心跳检测的倒计时重置为30秒
        clearTimeout(this.timeoutObj);//重置倒计时
        this.start();
    },
    start: function(){//启动心跳检测机制,设置倒计时30秒一次
        this.timeoutObj = setTimeout(function(){
            var message = {
                "type": "t10010",
                "service":"运行心跳业务一次 =="+ new Date()
            };
            // JSON.stringify()的作用是将 JavaScript 对象转换为 JSON 字符串
            //而JSON.parse()可以将JSON字符串转为一个对象。
            console.log("心跳一次");
            ws.send(JSON.stringify(message));//启动心跳
        },this.timeout)
    }
    //onopen连接上,就开始start及时,如果在定时时间范围内,onmessage获取到了服务端消息,
    // 就重置reset倒计时,距离上次从后端获取消息30秒后,执行心跳检测,看是不是断了。
};
//开始创建webSocket连接
createWebSocket(wsUrl);
///
function mysend() {
    var text = $("#text").val();
    console.log("text:" + text);
    //向ws发送信息
    ws.send(text);
}

 (3)测试截图

webSocket 前端心跳机制 第2张

webSocket 前端心跳机制 第3张

3.心得

所谓的心跳检测,就是隔一段时间向服务器进行一次数据访问,因为长时间不使用会导致ws自动断开,
一般是间隔90秒内无操作会自动断开,因此,在间隔时间内进行一次数据访问,以防止ws断开即可,
这里选择30秒,倒计时30秒内无操作则进行一次访问,有操作则重置计时器
此篇文章由DurkBlue发布,转载请注明来处
文章投稿或转载声明

来源:DurkBlue版权归原作者所有,转载请保留出处。本站文章发布于 04-08
温馨提示:文章内容系作者个人观点,不代表DurkBlue博客对其观点赞同或支持。

赞(0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享

发表评论取消回复

快捷回复:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog

评论列表 (暂无评论,204人围观)参与讨论

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