平武建站

如何利用webSocket与Swoole打造一个小型聊天室

这篇文章给大家分享的是有关如何利用webSocket与Swoole打造一个小型聊天室的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联公司一直通过网站建设和网站营销帮助企业获得更多客户资源。 以"深度挖掘，量身打造，注重实效"的一站式服务，以网站设计、成都做网站、移动互联产品、营销型网站服务为核心业务。10余年网站制作的经验，使用新网站建设技术，全新开发出的标准网站，不但价格便宜而且实用、灵活，特别适合中小公司网站制作。网站管理系统简单易用，维护方便，您可以完全操作网站资料，是中小公司快速网站建设的选择。

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

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

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

  • 点击按钮发送不刷新页面，同时清空当前输入框内容，就简单的一个 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打造一个小型聊天室

感谢各位的阅读！关于“如何利用webSocket与Swoole打造一个小型聊天室”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！


网页标题：如何利用webSocket与Swoole打造一个小型聊天室
文章位置：http://pwwzsj.com/article/ijipog.html

其他资讯