null - 程序员宅基地

Swoole 实践篇之结合 WebSocket 实现心跳检测机制-程序员宅基地

原文首发链接：Swoole 实践篇之结合 WebSocket 实现心跳检测机制
大家好，我是码农先森。

引言

前段时间在 Swoole 的交流群里，有群友提问：“如何判断用户端是否在线”。我给予的答案是：“通过在客户端实现心跳包” 来实时记录用户端的心跳数据，最终作为用户是否实时在线的依据。

结合我之前的经验，实现一个简单基于 Swoole 的 WebScoket 服务的心跳检测机制。在用户端会每间隔 5s 上报一次心跳数据，在管理端会每间隔 10 s 获取一次心跳数据，用于实时展示用户的在线状态。

技术实现

heartbeat.html 用户端页面主要是上报用户的心跳包，当用户在线时会每间隔 5s 上报一次数据，如果关闭掉该页面则会断开连接不再上报数据。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>WebSocket Heartbeat Example</title>
</head>
<body>
  <script>
    var socket = new WebSocket('ws://127.0.0.1:9502');
    var user_id = getQueryVariable("user_id")

    socket.onopen = function() {
      console.log('WebSocket 已连接');
      setInterval(function() {
        if (socket.readyState === WebSocket.OPEN) {
          socket.send(JSON.stringify({type: 'SetHeartbeat', user_id: user_id, user_name: "码农先森"+"(" + user_id + ")", "timestamp": Math.floor(Date.now() / 1000)}));
        }
      }, 5000); // 每隔5秒发送一次心跳数据
    };

    socket.onerror = function(error) {
      console.error('WebSocket 错误：' + error);
    };

    socket.onclose = function(event) {
      console.log('WebSocket 连接已关闭：' + event.code + ', ' + event.reason);
    };

    function getQueryVariable(variable)
    {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }
  </script>
</body>
</html>

admin.html 管理端页面主要是展示用户的在线状态，每间隔 10s 会获取一次心跳数据包，用于实时显示用户的状态状态。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>WebSocket Admin Example</title>
  <style>
    #json-data{
      text-align: center;
      border: 1px solid blue;
      width: 30%;
    }
</style>
</head>
  <div id="json-data"></div>
<body>
  <script>
    var socket = new WebSocket('ws://127.0.0.1:9502');

    socket.onopen = function() {
      console.log('WebSocket 已连接');
      setInterval(function() {
        if (socket.readyState === WebSocket.OPEN) {
          socket.send(JSON.stringify({type: 'GetHeartbeat', user: "admin"}));
        }
      }, 10 * 1000); // 定时每10s获取一次心跳数据
    };

    socket.onmessage = function(e) {
      const jsonData = JSON.parse(e.data);
      const container = document.getElementById('json-data');
      while (container.firstChild) {
        container.removeChild(container.firstChild);
      }
      jsonData.forEach(item => {
            const div = document.createElement('div');
            div.innerHTML = `<p>用户ID: ${item.user_id}, 用户名称: ${item.user_name}, 状态: ${item.status}</p>`;
            container.appendChild(div);
        });
    };

    socket.onerror = function(error) {
      console.error('WebSocket 错误：' + error);
    };

    socket.onclose = function(event) {
      console.log('WebSocket 连接已关闭：' + event.code + ', ' + event.reason);
    };
  </script>
</body>
</html>

websocket_server.php 服务主要是用于接收用户端上报的心跳数据，以及推送用户的心跳数据到管理端页面；心跳数据会存储到 Redis 缓存中，便于更新数据，在推送数据时会判断用户是否超过 30s 没有更新心跳数据，如果是则会判定为离线状态。

<?php

Swoole\Runtime::enableCoroutine($flags = SWOOLE_HOOK_ALL);

// 创建 WebSocket 服务
$server = new Swoole\WebSocket\Server("0.0.0.0", 9502);

// 监听 WebSocket 连接事件
$server->on('open', function (Swoole\WebSocket\Server $server, $request) {
    echo "新的客户端连接: {$request->fd}\n";
});

// 监听 WebSocket 消息事件
$server->on('message', function (Swoole\WebSocket\Server $server, $frame) {
    $data = json_decode($frame->data, true);
    if ($data["type"] == "SetHeartbeat") {
        echo "接收到了用户[{$data["user_name"]}]的心跳包\n";
        setHeartbeatCache($data);
    }

    if ($data["type"] == "GetHeartbeat") {
        $data = getHeartbeatCache();
        $results = [];
        foreach($data as $val) {
            $val = json_decode($val, true);
            $resutl["user_id"] = $val["user_id"];
            $resutl["user_name"] = $val["user_name"];
            $resutl["status"] = "在线";
            // 超过 30 秒没有心跳包, 则离线
            if (time() - $val["timestamp"] > 30) {
                $resutl["status"] = "离线";
            }
            $results[] = $resutl;
        }
        $server->push($frame->fd, json_encode($results));
    }
});

// 监听 WebSocket 关闭事件
$server->on('close', function ($ser, $fd) {
    echo "客户端 {$fd} 关闭连接\n";
});

// 启 WebSocket 服务
$server->start();

// 设置缓存
function setHeartbeatCache($data) {
    $redis = new Redis();
    $redis->connect('127.0.0.1', 6379);
    $redis->hSet('heartbeat', $data["user_id"], json_encode($data));
    $redis->close();
}

// 获取缓存
function getHeartbeatCache() {
    $redis = new Redis();
    $redis->connect('127.0.0.1', 6379);
    $data = $redis->hGetAll('heartbeat');
    $redis->close();
    return $data;
}

总结

这里实现的心跳检测机制是一个基础版的，心跳包的主要作用是用于检测用户端是否存活，有助于我们及时判断用户端是否存在断线的问题。在我之前开发过的项目中，有一个基于物联网在线直播抓娃娃的项目，其中就有需要实时监控设备在线状态的需求，该需求就是使用心跳包来实现的。实际上心跳检测技术，应用更广泛的是实时通信、或设备管理的场景偏多。

本文链接：https://blog.csdn.net/yxhbk/article/details/138095135

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

idea运行tomcat过程中中文变��_tomcat 运行-程序员宅基地

文章浏览阅读2.6k次。**需要配置一下tomcat编码**-Dfile.encoding=UTF-8_tomcat 运行

[TI TDA4 J721E]TIOVX OpenVX 框架下Kernel注册/Node使用_vxloadkernels-程序员宅基地

文章浏览阅读4k次，点赞11次，收藏27次。使用Python脚本生成步骤参照上一篇内容。[TI TDA4] TIOVX OpenVX框架下的Python脚本使用此处以TI 官方提供的Demo为例。~/vision_apps/apps/dl_demos/app_tidl_od一、host端注册调用链如下：main->app_tidl_od_main->app_init->tivxMytiovxLoadKernels tivxMytiovxLoadKernels函数位于~/vision_apps/k....._vxloadkernels

我的15年操作系统开源路——RT-Thread 创始人熊谱翔-程序员宅基地

文章浏览阅读401次。作者 | 熊谱翔出品 | 《程序员》编辑部放眼全球操作系统市场，从广泛角度来看，可以将其分为三大板块：其一，桌面/PC 端微软打造的 Windows（桌面数字化）；其二，手机移动端的苹果..._rtthread 什么时候出来的

java调用视图如何传参_java – 在使用具有不同片段/布局的视图寻呼机时如何传递片段参数？...-程序员宅基地

文章浏览阅读67次。目标：使用片段参数将字符串值从TextView传递到新片段TextView,但在FragmentPagerAdapter中使用具有不同布局/片段的ViewPager时.问题：新片段永远不会从前一个片段接收片段参数.我的设置：我的Activity托管了ViewPager和FragmentPagerAdapter.我重写了FragmentPagerAdapters getItem(int positi..._java访问视图传参

Android file类使用详解-SDcard_sdcard_print_file-程序员宅基地

文章浏览阅读1w次，点赞4次，收藏12次。Android file类使用详解-SDcard_sdcard_print_file

CMake中添加Qt模块的合理方法_cmake测试代码中能定义qt类吗-程序员宅基地

文章浏览阅读1.2w次，点赞7次，收藏63次。用CMake来组织的工程中要用Qt首先要设置、找到Qt相关模块。主要是通过find_package这个CMake命令。但网上很多教程都过时了，或者不够清晰灵活。因为这部分很常用，所以特别用一篇文章把我们目前在生产环境中使用的方法给大家介绍下。设置Qt库路径Qt版本很多，我们的开发机上一般也装有多个不同版本的Qt。个人尝试性的项目一般用最新版的Qt，而真正发布的产品一般用的是LTS版本Qt（LTS：Long Term Support，长期支持版本，目前最新的LTS是5.9）。我们的方法是在系统中添_cmake测试代码中能定义qt类吗

随便推点

【矩阵学习】Jacobian矩阵和Hessian矩阵_海森矩阵判断是否为驻点-程序员宅基地

文章浏览阅读6.4k次，点赞5次，收藏42次。【矩阵学习】Jacobian矩阵和Hessian矩阵Jacobian 矩阵Jacobian 行列式功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchar..._海森矩阵判断是否为驻点

回顾HTTP协议和报文_协议报文和数据报文的区别-程序员宅基地

文章浏览阅读487次。计算机网络这门课是在大二上的时候是作为主修课，当然上这门课的时候有点划水了。后来接触到校招这方面，下定决心恶补计算机网络这方面的知识，就买了一本《计算机网络:自顶向下的方法》研习。如果不想读谢希仁那版书（毕竟晦涩难懂），又想比较系统的了解计算机网络这方面知识，这本书真的非常推荐。划重点：简单回顾一下HTTP及其报文。1、什么是HTTP协议？HTTP 超文本传输协议 (HTTP-Hypertext transfer protocol)，是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用_协议报文和数据报文的区别

Flash / Flex Tutorial - How to Create a crossdomain.xml file-程序员宅基地

文章浏览阅读535次。Flash / Flex Tutorial - How to Create a crossdomain.xml file.This brief tutorial will teach you how to create a crossdomain.xml file so that you can access files and information from outside domains

Redis Sentinel机制与用法[转]_sentinel: redis://10.43.19.251:26379 频繁 added down-程序员宅基地

文章浏览阅读1.3k次。Redis Sentinel 机制与用法（一）概述Redis-Sentinel是Redis官方推荐的高可用性(HA)解决方案，当用Redis做Master-slave的高可用方案时，假如master宕机了，Redis本身(包括它的很多客户端)都没有实现自动进行主备切换，而Redis-sentinel本身也是一个独立运行的进程，它能监控多个master-slave集群，发现master宕机后能进行自动_sentinel: redis://10.43.19.251:26379 频繁 added down

HTML页面获取URL传递的参数值_html获取url地址中携带的参数-程序员宅基地

文章浏览阅读724次。【代码】HTML页面获取URL传递的参数值。_html获取url地址中携带的参数

SQL Server 配置管理器无法启动_sql服务设置时wmi无效参数-程序员宅基地

文章浏览阅读7.4k次。SQL Server 配置管理器---------------------------无法连接到 WMI 提供程序。您没有权限或者该服务器无法访问。请注意，您只能使用 SQL Server 配置管理器来管理 SQL Server 2005 和更高版本的服务器。 Invalid class [0x80041010]打开sql server 配置管理器的时候，报这个错。解决方法_sql服务设置时wmi无效参数