当前位置: 首页 > article >正文

node.js-WebScoket心跳机制(服务器定时发送数据,检测连接状态,重连)

1.WebScoket心跳机制是?

        基于上一篇文章,WebScoket在浏览器和服务器间完成一次握手,两者间创建持久性连接,并进行双向数据连接。node.js-node.js作为服务器,前端使用WebSocket(单个TCP连接上进行全双工通讯的协议)-CSDN博客文章浏览阅读645次,点赞17次,收藏11次。node.js作为服务器,前端使用WebSocket(单个TCP连接上进行全双工通讯的协议) https://blog.csdn.net/2301_76671906/article/details/146199752?fromshare=blogdetail&sharetype=blogdetail&sharerId=146199752&sharerefer=PC&sharesource=2301_76671906&sharefrom=from_link        心跳机制简单的来说,就是(1)客户端向服务器利用定时(setInterval)发送消息(心跳包)。(2)前端监听WebScoket的关闭连接(onclose()事件)时重新创建连接。

  •         客户端定时向服务器发送心跳数据包,保持持久性连接。
  •         服务器定时向客户端发送心跳数据包,检测客户端连接是否正常。

2.WebScoket心跳机制的必要性?

        必要的,心跳机制通过检测服务器与客户端连接状态,处理连接失败后重连或其他的异常情况。

3.WebScoket心跳机制的缺点?

  •         不断地定时发送心跳数据包,会消耗服务器的资源。
  •         检测到连接失败后,重新连接会导致部分的数据丢失。

4.例子

<!DOCTYPE html>
<html>
<head>
    <title>WebSocket测试</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="app">
        <input v-model="inputMessage" @input="sendMessage" placeholder="输入消息">
        <p>收到的消息: {{ receivedMessage }}</p>
    </div>

    <script>
        // 创建WebSocket实例,连接到本地的8080端口
        const ws = new WebSocket('ws://localhost:8080');

        const app = new Vue({
            el: '#app',
            data: {
                inputMessage: '',
                receivedMessage: ''
            },
            methods: {
                sendMessage() {
                    // 如果WebSocket连接已打开
                    if (ws.readyState === WebSocket.OPEN) {
                        // 发送输入框中的内容
                        ws.send(this.inputMessage);
                    }
                }
            }
        });

        // 当WebSocket连接成功时触发
        ws.onopen = function() {
            console.log('已连接到服务器');
            // 1.连接成功后开始心跳
            startHeartbeat();
        };

        // 2.当收到服务器发送的消息时触发
        ws.onmessage = function(event) {
            console.log('收到消息: ' + event.data);
            // 更新Vue实例中的receivedMessage变量
            app.receivedMessage = event.data;
            //重置心跳计时器
            resetHeartbeat();
        };

        // 3.当WebSocket连接关闭时触发
        ws.onclose = function() {
            console.log('连接已关闭');
            // 停止心跳计时器
            stopHeartbeat();
             // 添加重新连接逻辑
        };

        // 4.心跳相关发送心跳消息和重置心跳计时器
        let heartbeatIntervalId;
        const heartbeatInterval = 30000; // 心跳间隔,单位为毫秒
        function startHeartbeat() {
            heartbeatIntervalId = setInterval(() => {
                if (ws.readyState === WebSocket.OPEN) {
                    ws.send('heartbeat'); // 发送心跳消息
                    console.log('发送心跳消息');
                } else {
                    stopHeartbeat(); // 如果连接关闭,停止心跳
                }
            }, heartbeatInterval);
        }

        // 心跳重置定时器
        function resetHeartbeat() {
            clearInterval(heartbeatIntervalId); // 清除心跳计时器
            startHeartbeat(); // 重新开始心跳计时器
        }
        // 停止心跳计时器 
        function stopHeartbeat() {
            clearInterval(heartbeatIntervalId); 
        }
    </script>
</body>
</html>

node.js作为服务器进行对应的接受相关的代码在上一篇文章。

主要实现思路:

  •         WebScoket连接成功时开启心跳
  •         当服务器发送消息时,重置心跳,开启心跳
  •         监听连接关闭时,停止心跳
  •         重连服务器未涉及,待学习

http://www.kler.cn/a/588461.html

相关文章:

  • 游戏成瘾与学习动力激发策略研究——自我效能理论
  • 深入理解Linux网络随笔(七):容器网络虚拟化--Veth设备对
  • 基于javaweb的SSM+Maven网上选课管理系统设计与实现(源码+文档+部署讲解)
  • JavaScript性能优化的12种方式
  • Function 和 Consumer函数式接口
  • Ubuntu docker镜像恢复至原始文件
  • React使用路由表
  • 使用GoldenGate完成SQLserver到Oracle的数据实时同步
  • Django项目之订单管理part3
  • Markdig:强大的 .NET Markdown 解析器详解
  • 【AI时代移动端安全开发实战:从基础防护到智能应用】
  • 责任链模式:优雅处理请求的设计艺术
  • k8s 网络基础解析
  • 织梦dedecmsV5.7提示信息提示框美化(带安装教程和效果展示)
  • python中print函数的flush如何使用
  • kubernetes|云原生|部署单master的kubernetes 1.25.5版本集群完全记录(使用contained 运行时)
  • 【VUE2】第五期——VueCli创建项目、Vuex多组件共享数据、json-server——模拟服务端api
  • CSS3学习教程,从入门到精通,CSS3 文字样式语法知识点及案例代码(7)
  • 消息队列的特性与使用场景:Kafka、ActiveMQ、RabbitMQ与RocketMQ的深度剖析
  • 图论之cruskal算法(克鲁斯卡尔)