• PHP Swoole实现简易聊天室，附加小程序端连接websocket简易代码

    目录

    用到的工具：

    PHP Swoole拓展  |  PHP Redis拓展  | Redis 7

     一、安装上述必要工具（下面是以宝塔面板中操作为例）

    给PHP安装Swoole和Redis拓展：

    安装Redis软件

     二、创建websocket服务器文件"wss_server.php"

    具体看代码后面注释，主要注意点：

     三、通过php命令来运行服务端文件

     四、创建前端的chat.php文件

    具体看代码后面注释，主要注意点：

    附：小程序端连接websocket代码（需要将上面的服务端调整为只发给指定fd用户才行）

    Sham为了实现小程序中福利票券核销扫码时，用户能实时更新票券被核销的信息，所以学习使用websocket，以下通过搭建一个简单聊天室来记录备忘。

    用到的工具：

    PHP Swoole拓展  |  PHP Redis拓展  | Redis 7

     首先安装上述必要工具（下面是以宝塔面板中操作为例）

    给PHP安装Swoole和Redis拓展：

    找到PHP软件，进入“设置”，找到“安装拓展”，找到redis和Swoole4,点右面的安装，等待安装结束

    这里要注意系统默认的php版本是哪个，那么就安装哪个版本对应的拓展，查看php版本命令：

    php -v

     安装Redis软件

    如果用的宝塔面板，直接搜索Redis，然后安装等待结束即可

     下面就开始创建websocket服务器文件"wss_server.php"

    具体看代码后面注释，主要注意点：
    • Swoole用户连接后会生成唯一的fd（int格式的），需要缓存用户数据
    • 这里通过Redis来缓存websocket连接用户的数据，然后再后面调取
      这里Sham用的Redis的哈希表数据，通过hSet存储，然后hGet获取，
    • 这段代码是用于聊天室功能，用户发送消息后，会推送给发送者以外的其他所有在线用户。
    • 里面user_id，message需要和后面的chat.php对应
    2.     
    3.     use Swoole\WebSocket\Server;
    4.     use Swoole\WebSocket\Frame;
    5.     
    6.     // 创建 Redis 客户端实例
    7.     $redis = new Redis();
    8.     $redis->connect('127.0.0.1', 6379); //端口号见Redis软件设置，默认是6379
    9.     $redis->auth('xxxx');  //这里如果redis设置里密码，则增加这项
    10.  
    11.     // 创建 WebSocket 服务器
    12.     $ws = new Server("0.0.0.0", 8040);
    13.     
    14.     // 设置服务器配置
    15.     $ws->set([
    16.         'heartbeat_check_interval' => 60,
    17.         'heartbeat_idle_time' => 600,
    18.     ]);
    19.     
    20.     // 监听 Worker 启动事件
    21.     $ws->on('WorkerStart', function (Server $server, int $workerId) {
    22.     // 可以在这里做一些初始化工作
    23.     });
    24.     
    25.     // 监听连接事件
    26.     $ws->on('open', function (Server $server, $request) use (&$redis) {
    27.         // 当新用户连接时，记录用户信息
    28.         $user_id = $request->get['user_id'] ?? null;
    29.         $fd = $request->fd;
    30.         if ($user_id) {
    31.             // 将用户 ID 和 fd 存储到 Redis 哈希表
    32.             //可以理解为类似数组中，online_users表示数组名称，$request->fd 表示key值，$user_id表示value值
    33.             $redis->hSet('online_users', $request->fd, $user_id);
    34.             //在服务器后端显示哪个用户上线了
    35.             $msgs = [
    36.                 "from_user" => $user_id,    //显示消息是来自哪个用户
    37.                 "messages"=>"我上线啦！"
    38.             ];
    39.             //给所有用户广播谁上线了
    40.             broadcast($server,$redis, json_encode($msgs),$request->fd);
    41.         //var_dump($redis);
    42.         } else {
    43.             //echo "未提供用户 ID，fd: $fd\n";
    44.         }
    45.     });
    46.     
    47.     // 监听消息事件
    48.     $ws->on('message', function (Server $server, Frame $frame) use (&$redis) {
    49.         //将收到的数据进行转换
    50.         $data = json_decode($frame->data, true);
    51.         if (isset($data['message'])) {
    52.             $msgs = [
    53.                 //从哈希表中获取用户
    54.                 "from_user" => $redis->hGet('online_users',$frame->fd),     //显示消息是来自哪个用户
    55.                 "messages"=>$data['message']
    56.             ];
    57.              // 当用户发送消息时，广播给所有在线用户
    58.             broadcast($server,$redis, json_encode($msgs), $frame->fd);
    59.         }
    60.     });
    61.     
    62.     // 监听关闭事件
    63.     $ws->on('close', function (Server $server, $fd) use (&$redis) {
    64.         // 当用户断开连接时，从在线用户列表中移除该用户
    65.         $msgs = [
    66.             "from_user" => $redis->hGet('online_users',$fd),         //显示消息是来自哪个用户
    67.             "messages"=>"我下线啦！"
    68.         ];
    69.         //从redis的哈希表中删除用户
    70.         $redis->hDel('online_users', $fd);
    71.          // 用户离线时，广播给所有在线用户
    72.         broadcast($server,$redis, json_encode($msgs),$fd);
    73.     });
    74.     
    75.     
    76.     // 广播消息给所有在线用户
    77.     function broadcast(Server $server,$redis, $msg, $excludeFd = null) {
    78.         // 从redis的哈希表中获取所有在线用户的 FD
    79.         $onlineUsers = $redis->hKeys('online_users');
    80.         // 遍历在线用户并发送消息
    81.         foreach ($onlineUsers as $fds) {
    82.             //判断不是当前用户，同时用户在线时推送信息
    83.             if ($fds != $excludeFd && $server->isEstablished($fds)) {
    84.                 //给对应fds用户发送消息
    85.                 $server->push($fds, $msg);
    86.             }
    87.         }
    88.     }
    89.     // 启动服务器
    90.     $ws->start();

    创建完"wss_server.php"，然后我们需要通过php命令来运行它

    进入ssh或者创建定时任务执行shell都可以，运行如下命令，假设"wss_server.php"文件存放在"www/wwwroot"目录下

    php /www/wwwroot/wss_server.php

    如果没有报错等信息，则表示运行成功了

    下面创建前端的chat.php文件

    具体看代码后面注释，主要注意点：
    1. 为了防止因为空闲而导致与websocket服务器断开连接，需要设置心跳和重连（见代码）
    2. 这里因为是简易版，所有通过网址传参来通过user_id定于用户名，以区分用户，可修改其他方式，比如登录来获取
    2. "en">
    3.     
    4.         "UTF-8">
    5.         "X-UA-Compatible" content="IE=edge">
    6.         "viewport" content="width=device-width, initial-scale=1.0">
    7.         简易聊天By websocket
    8.         
    9.     
    10.     
    11.         
      简易聊天By websocket
    12.         
    13.         
      "dialogue">
    14.         
    15.         
    16.         
    17.         
    18.         
    19.

    完成上面的文件，通过http://aa.com/chat.php?userid=xxx来访问上面的前端，其中xxx表示用户名，如果显示“已连接服务器”，则表示已经成功了，然后就可以发给别人来小小的聊下天啦。

    注意：这个人员&聊天数据都是暂存的，关掉前端 或者重启websocket服务端都会导致数据重置清空。

    写在结尾：

    初次结束websocket和swoole，目前只能实现简单信息发送，暂时能满足小程序中需求，后续用到更多功能的时候再来学习。

    附：小程序端连接websocket代码（需要将上面的服务端调整为只发给指定fd用户才行）

    1. let use_socket=true; //这个是用来判断是否需要连接websocket的
    2. let socket; // WebSocket 连接对象
    3. let heartBeatTimer; // 心跳计时器
    4. let reconnectTimer; // 重连计时器
    5. const HEARTBEAT_INTERVAL = 15000; // 心跳间隔时间（15秒）
    6. const RECONNECT_INTERVAL = 1000; // 重连间隔时间（5秒）
    7.  
    8.   Page({
    9.   data: {
    10.   },
    11.  
    12.   // 初始化 WebSocket 连接
    13.     connectWebSocket() {
    14.     var that =this;
    15.     //定义socket来给后面使用
    16.     socket = wx.connectSocket({
    17.       url: 'wss://xxx.com?&user_id='+user_info[0].user_id, // 替换为你的 WebSocket 服务器地址，小程序需要通过wss连接，可以通过前面提到的ssl证书域名反代访问
    18.       success() {
    19.         console.log('WebSocket 连接成功');
    20.       },
    21.       fail(err) {
    22.         console.error('WebSocket 连接失败:', err);
    23.         that.reconnectWebSocket(); // 尝试重连
    24.       }
    25.     });
    26.  
    27.     // 监听 WebSocket 连接成功
    28.     socket.onOpen(() => {
    29.       var that=this;
    30.       console.log('WebSocket 已打开');
    31.       that.startHeartbeat(); // 开始心跳
    32.     });
    33.  
    34.     // 监听 WebSocket 连接关闭
    35.     socket.onClose(() => {
    36.       var that=this;
    37.       console.log('WebSocket 已关闭');
    38.       //当断开后任允许连接的话，则重连（这里Sham是发现不加判断的话，退出当前页之后还是会自动重连socket)
    39.       if(use_socket){
    40.         that.stopHeartbeat(); // 停止心跳
    41.         that.reconnectWebSocket(); // 尝试重连
    42.       }
    43.     });
    44.  
    45.     // 监听 WebSocket 错误
    46.     socket.onError((err) => {
    47.       var that=this;
    48.       console.error('WebSocket 错误:', err);
    49.       that.reconnectWebSocket(); // 尝试重连
    50.     });
    51.  
    52.     // 监听 WebSocket 消息
    53.     socket.onMessage((message) => {
    54.       var datas = JSON.parse(message.data);
    55.       //console.log(message)  //保险点打印数据来核对是否符合要求
    56.       var that = this;
    57.       //这里要确保发送的消息是json字符串格式的，不然会报错
    58.       var wss_res = JSON.parse(datas.messages);
    59.       if(wss_res.id !=null && wss_res.status !=null){
    60.         //这里以福利票券为例
    61.         var welfare_list = that.data.welfare_list;
    62.         //通过filter来筛选出指定id的票券
    63.         var show_qrcode_welfare = welfare_list.filter(item => item.id == wss_res.id)
    64.         var msg = show_qrcode_welfare[0].welfare_name
    65.         //弹出提醒对应票券已经被扫码核销
    66.         wx.showToast({
    67.           title: msg+' - 已被扫码！',
    68.           icon:'none',
    69.           duration:2500
    70.         })
    71.         //刷新数据（会从服务器重新获取数据）
    72.         setTimeout(function () {
    73.           that.onShow()
    74.         }, 2500)
    75.  
    76.       }
    77.       console.log(JSON.parse(message.data));
    78.       // 处理收到的消息
    79.     });
    80.   },
    81.  
    82.   // 开始心跳
    83.   startHeartbeat() {
    84.     var that=this;
    85.     that.stopHeartbeat(); // 防止多次启动
    86.     heartBeatTimer = setInterval(() => {
    87.       if (socket && socket.readyState === socket.OPEN) {
    88.         socket.send({
    89.           data: JSON.stringify({ type: 'ping' }), // 发送心跳包
    90.           success() {
    91.             console.log('心跳包已发送');
    92.           },
    93.           fail(err) {
    94.             console.error('心跳包发送失败:', err);
    95.             that.reconnectWebSocket(); // 如果发送失败，尝试重连
    96.           }
    97.         });
    98.       }
    99.     }, HEARTBEAT_INTERVAL);
    100.   },
    101.  
    102.   // 停止心跳
    103.   stopHeartbeat() {
    104.     if (heartBeatTimer) {
    105.       clearInterval(heartBeatTimer);
    106.       heartBeatTimer = null;
    107.     }
    108.   },
    109.  
    110.   // 尝试重连
    111.   reconnectWebSocket() {
    112.     var that=this;
    113.     if (reconnectTimer) return; // 防止重复重连
    114.     reconnectTimer = setTimeout(() => {
    115.       console.log('尝试重新连接 WebSocket');
    116.       that.connectWebSocket(); // 重新建立连接
    117.       reconnectTimer = null; // 重置重连计时器
    118.     }, RECONNECT_INTERVAL);
    119.   },
    120.  
    121.   /**
    122.   * 生命周期函数--监听页面加载
    123.   */
    124.   onLoad(options) {
    125.     var that = this;
    126.     that.connectWebSocket();
    127.   }
    128.   },
    129.  
    130.   /**
    131.   * 生命周期函数--监听页面初次渲染完成
    132.   */
    133.   onReady() {
    134.  
    135.   },
    136.  
    137.   /**
    138.   * 生命周期函数--监听页面显示
    139.   */
    140.   onShow() {
    141.     var that = this;
    142.     //页面显示后就执行心跳
    143.     that.startHeartbeat()；
    144.  
    145.   /**
    146.   * 生命周期函数--监听页面隐藏
    147.   */
    148.   onHide() {
    149.     //页面隐藏时停止心跳并设置不再连接socket
    150.     that.stopHeartbeat();
    151.     clearInterval(heartBeatTimer);
    152.     heartBeatTimer = null;
    153.     use_socket=false
    154.     wx.closeSocket({
    155.       success() {
    156.         console.log('WebSocket连接关闭成功');
    157.       },
    158.       fail(error) {
    159.         console.error('WebSocket连接关闭失败', error);
    160.       }
    161.     });
    162.   },
    163.  
    164.   /**
    165.   * 生命周期函数--监听页面卸载
    166.   */
    167.   onUnload() {
    168.     //页面销毁时停止心跳并设置不再连接socket
    169.     var that=this;
    170.     that.stopHeartbeat();
    171.     clearInterval(heartBeatTimer);
    172.     heartBeatTimer = null;
    173.     use_socket=false
    174.     wx.closeSocket({
    175.       success() {
    176.         console.log('WebSocket连接关闭成功');
    177.       },
    178.       fail(error) {
    179.         onsole.error('WebSocket连接关闭失败', error);
    180.       }
    181.     });
    182.   },
    183.  
    184.   /**
    185.   * 页面相关事件处理函数--监听用户下拉动作
    186.   */
    187.   onPullDownRefresh() {
    188.  
    189.   },
    190.  
    191.   /**
    192.   * 页面上拉触底事件的处理函数
    193.   */
    194.   onReachBottom() {
    195.  
    196.   },
    197.  
    198.   /**
    199.   * 用户点击右上角分享
    201.   onShareAppMessage() {
    203.   }*/
    204. })

  • 相关阅读:
    10.12广州见 | 第十六届智慧城市大会报名通道全面开启
    基于 Github 平台的 .NET 开源项目模板. 嘎嘎实用!
    【主流技术】ElasticSearch 在 Spring 项目中的实践
    GO sync.Map Store、Delete 、Load 、Range等方法使用举例
    Centos7下安装MySQL详细步骤
    基于Java+Springboot+vue体育用品销售商城平台设计和实现
    Apache Hive安装部署详细图文教程
    不要忽视web渗透测试在项目中起到的重要性
    OllamaFunctions 学习笔记
    划词标注或打标签的实现方案
  • 原文地址：https://blog.csdn.net/shamqu/article/details/142304735