如何利用webSocket与Swoole打造一个小型聊天室
创始人
2024-11-24 00:23:22
0次

本来就是作为一个很小的案例来写的,包含的功能点也不是那多,索性就按照最最最低配置来搞。

  • 能够显示聊天消息的聊天区,同时兼顾显示链接状态,当前是否连接成功,或者服务端是否断开连接,而前端不知道的状况。

  • 一个输入框,纯粹的输入框 ?

  • 点击按钮发送不刷新页面,同时清空当前输入框内容,就简单的一个 button 而已,点击执行,不支持回车发送。

  • 收到消息,滚动条自动触底,这个功能在某些使用场景是方便的,但又会造成某些场景使用不方便,方便在于有新消息不需要人工滚动,不方便在于,可能你在看历史消息,它自动触底了…还需要根据自己实际需求优化一下下。

  • 随机昵称,当然不需要保存,刷新即丢,在收到消息如果是自己发送的,则显示 [ 我 ] 在某某时候发送了某某消息,而不是显示昵称字符串。

项目环境

直接粘贴复制的

composer create-project topthink/think tpcd tpcomposer require topthink/think-swoole

因为是测试项目,所有的都是默认安装,在安装完之后,访问前端页面,使用 view 方法会报错,百度一下就有解决方案了。

webSocket 的使用

参考文档:https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket

  1. onopen() 发起连接,连接成功后执行。

  2. onclose() 连接断开后执行。

  3. onmessage() 收到服务端消息后执行。

  4. onerror() 服务器异常执行。
    其实,webSocket 就这些常用方法,也没啥特殊要求的,他就是作为一个保持连接,接收服务器状态的一个浏览器的 API 存在,非常简洁方便。

前端页面代码:

        打工人聊天室                               

聊天区域

            
            你好打工人:昵称 
            本次连接FD:  
                                    发送

JS 代码:

在服务器信息回执时,会有第一次连接回执,还是服务端发送消息回执的状态区别,通过 msgType 来分辨,如果是第一次连接的回执消息,则把 FD 做一个页面留存,并不显示在聊天消息区,如果收到的是消息回执,就直接显示到聊天消息区。

还有就是,前后端相互通信发送的东西,都是字符串性质最优,我前端处理的方法是先组合成一个对象,然后转 JSON 串。

服务端代码
   服务端需要 callback 前端过来的消息,转成对象数据,然后增加点自定义数据直接原样返回,并且群发到前端。

on('open', function ($ws, $request){        $fd = $request->fd;        $data = json_encode([            'fd' => $request->fd,            'msgType' => 1  //代表第一次连接,前端处理fd        ]);        $ws->push($request->fd, $data);    });    //监听WebSocket消息事件    $ws->on('message', function ($ws, $frame) {        $stats = $ws->stats();        //格式化接收到json        $data = json_decode($frame->data);        // 原基础上不动,增加一些自定义        $data->msgType = 2; //代表服务器端回复        $data->time = date('Y-m-d H-i-s');        $data = json_encode($data);        //因为是聊天室,所以包括自己都需要收到回执,就直接群发 swoole 提供 connections 方法 包含了所有在线的 fd        foreach ($ws->connections as $conn_fd){            $ws->push($conn_fd,$data);        }    });    //监听WebSocket连接关闭事件    $ws->on('close', function ($ws, $fd) {//        echo "client-{$fd} is closed\n";    });    $ws->start();

代码齐全之后,接下来就只需要在控制台执行以下 PHP 文件就行。
如何利用webSocket与Swoole打造一个小型聊天室

然后前台直接访问你的网站地址,我的是本地 127.0.0.1
如何利用webSocket与Swoole打造一个小型聊天室

多开几个窗口模拟多个用户,然后发送消息测试即可:
如何利用webSocket与Swoole打造一个小型聊天室

相关内容

热门资讯

空调连续工作多久需要停机休息 空调连续工作的时间取决于多个因素,包括空调的型号、功率、使用环境和维护情况等。一般来说,空调可以连续...
空调哪个符号是除湿的 空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异,但一般来说,除湿...
格力空调多长时间加一次氟利昂 1、一般情况下,空调对氟利昂的使用量是非常小的,所以在空调使用了四年左右的时候再考虑加也没问题。2、...
空调用多长时间需要加氟一次 一般情况下是五年。当出现以下这几种情况时,空调才需要加氟。1、空调的室内机和室外机各有两个接口,当接...
格调生活·C标思享荟:卡萨帝在... 9月12日的郑州龙湖金融岛,夜风轻拂,灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
品牌价值破千亿、高端份额持续领... 9月12日,“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
空调主板坏了修800还是换新的 空调主板坏了是修还是换新,需要考虑多个因素,以下是一些建议:1. 维修成本:如果维修费用较低,比如 ...
空调开多久需要休息多长时间 问题:空调开多久需要休息多长时间回答:1、在使用空调的过程中,一般空调开7~8个小时左右需要休息2~...
中央空调多长时间清洗一次 1、一般空调开机前清洗一次即可,空调开机中间时段再清洗一次,空调关机时清洗一次,这样比较合理。2、空...
中央空调氟利昂多久加一次 看空调制热和制冷程度,很多人的观点认为氟利昂必须一年放一次,其实这个观点是错误的,理解上面有点偏差,...