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

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

智能推荐

一个ngrok如何穿透多个端口？_ngrok多个端口-程序员宅基地

文章浏览阅读2.7k次，点赞2次，收藏4次。如何不充钱就可以穿透多个端口？./ngrok authtoken 授权码之前这个操作的生成的yml文件中修改端口可添加多个addr：port端口可随意配置_ngrok多个端口

C语言 char转uint8_t-程序员宅基地

文章浏览阅读5.9k次。char转uint8_t：static int char2uint(char *input, uint8_t *output){ for(int i = 0; i < 24; i++) { output[i] &= 0x00; for (int j = 1; j >= 0; j--) { char hb = input[i*2 + 1 - j]; if (hb >= '0' &..._char转uint8_t

android 陀螺仪简单使用，判读手机是否静止状态_安卓陀螺仪多少才算静止-程序员宅基地

文章浏览阅读6.5k次，点赞5次，收藏13次。陀螺仪允许您在任何给定时刻确定Android设备的角速度。简单来说，它告诉您设备绕X，Y和Z轴旋转的速度有多快。最近，即使是预算手机正在制造，陀螺仪内置，增强现实和虚拟现实应用程序变得如此受欢迎。通过使用陀螺仪，您可以开发可以响应设备方向的微小更改的应用程序。创建陀螺仪对象和管理器manager// Register it, specifying the polling interv..._安卓陀螺仪多少才算静止

lib静态库逆向分析_libtersafe-程序员宅基地

文章浏览阅读4.7k次，点赞3次，收藏16次。当我们要分析一个lib库里的代码时，首先需要判断这是一个静态库还是一个导入库。库类型判断lib文件其实是一个压缩文件。我们可以直接使用7z打开lib文件，以查看里面的内容。如果里面的内容是obj文件，表明是静态库。如果里面的内容是dll文件，表明是导入库。导入库里面是不包含代码的，代码包含在对应的dll文件中。从lib中提取obj静态库是一个或者多个obj文件的打包，这里有两个方法从中提取obj：Microsoft 库管理器 7z解压Microsoft 库管理器(li_libtersafe

Linux的网络适配器_linux 查询网络适配器-程序员宅基地

文章浏览阅读5.3k次，点赞3次，收藏3次。了解一下，省的脑壳痛桥接模式对应的虚拟网络名称“VMnet0” 桥接模式下，虚拟机通过主机的网卡进行通信，若物理主机有多块网卡（有线的和无线网卡），应选择桥结哪块物理网卡桥接模式下，虚拟机和物理主机同等地位，可以通过物理主机的网卡访问外网（局域网），一个局域网的其他计算机可以访问虚拟机。为虚拟机设置一个与物理网卡在同个网段的IP，则虚拟机就可以与物理主机以及局域..._linux 查询网络适配器

【1+X Web前端等级考证】 | Web前端开发中级理论 (附答案)_1+xweb前端开发中级-程序员宅基地

文章浏览阅读3.4w次，点赞77次，收藏438次。# 前言2020 12月 1+X Web 前端开发中级模拟题大致就更这么多,我的重心不在这里,就不花太多时间在这里面了。但是，说说1+X Web前端开发等级考证这个证书,总有人跑到网上问：这个证书有没有用？这个证书含金量高不高？# 关于考不考因为这个是工信部从2019年才开始实施试点的，目前还在各大院校试点中，就目前情况来看，知名度并不是很高，有没有用现在无法一锤定音，看它以后办的怎么样把，软考以前也是慢慢地才知名起来。能考就考吧，据所知，大部分学校报考，基本不用交什么报考费(小部分学校，个别除._1+xweb前端开发中级

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

引言

技术实现

总结

智能推荐

一个ngrok如何穿透多个端口？_ngrok多个端口-程序员宅基地

C语言 char转uint8_t-程序员宅基地

android 陀螺仪简单使用，判读手机是否静止状态_安卓陀螺仪多少才算静止-程序员宅基地

lib静态库逆向分析_libtersafe-程序员宅基地

Linux的网络适配器_linux 查询网络适配器-程序员宅基地

【1+X Web前端等级考证】 | Web前端开发中级理论 (附答案)_1+xweb前端开发中级-程序员宅基地

随便推点

项目组织战略管理及组织结构_项目组织的具体形态的是战略管理层-程序员宅基地

图像质量评价及色彩处理_图像颜色质量评价-程序员宅基地

MATLAB运用规则,利用辛普森规则进行数值积分-程序员宅基地

【AI之路】使用huggingface_hub优雅解决huggingface大模型下载问题-程序员宅基地

mysql数据库查看编码，mysql数据库修改编码_查看数据库编码-程序员宅基地

机器学习(十八)：Bagging和随机森林_bagging数据集-程序员宅基地

推荐文章

热门文章

相关标签