使用Swoole服务搭建简易聊天室代码

客官°小女子只卖身不卖艺 2022-12-07 04:28 159阅读 0赞

### 使用Swoole服务搭建简易聊天室 ###

*   *  服务端
     *  客户端
     *  启动服务端
     *  浏览器中访问聊天室

## 服务端 ##

创建chatserver.php 文件

<?php
    
    class Chat
    { 
        const HOST = '0.0.0.0';//ip地址 0.0.0.0代表接受所有ip的访问
        const PART = 81;//端口号
        private $server = null;//单例存放websocket_server对象
    
        public function __construct()
        { 
            //实例化swoole_websocket_server并存储在我们Chat类中的属性上，达到单例的设计
            $this->server = new swoole_websocket_server(self::HOST, self::PART);
            //监听连接事件
            $this->server->on('open', [$this, 'onOpen']);
            //监听接收消息事件
            $this->server->on('message', [$this, 'onMessage']);
            //监听关闭事件
            $this->server->on('close', [$this, 'onClose']);
            //设置允许访问静态文件
            $this->server->set([
                'document_root' => '/data/web/chat/public',//这里传入静态文件的目录
                'enable_static_handler' => true//允许访问静态文件
            ]);
            //开启服务
            $this->server->start();
        }
    
        /** * 连接成功回调函数 * @param $server * @param $request */
        public function onOpen($server, $request)
        { 
            echo $request->fd . '连接了' . PHP_EOL;//打印到我们终端
        }
    
        /** * 接收到信息的回调函数 * @param $server * @param $frame */
        public function onMessage($server, $frame)
        { 
        /** * TCP连接迭代器，可以使用foreach遍历服务器当前所有的连接，此属性的功能与swoole_server->connnection_list是一致的，但是更加友好。遍历的元素为单个连接的fd * * 连接迭代器依赖pcre库，未安装pcre库无法使用此功能 * * foreach($server->connections as $fd) * { * $server->send($fd, "hello"); * } * * echo "当前服务器共有 ".count($server->connections). " 个连接\n"; * * @var \Swoole\Connection\Iterator */
            echo $frame->fd . '来了，说：' . $frame->data . PHP_EOL;//打印到我们终端
            foreach ($server->connections as $fd) { //遍历TCP连接迭代器，拿到每个在线的客户端id
                //将客户端发来的消息，推送给所有用户，也可以叫广播给所有在线客户端
                $server->push($fd, json_encode(['no' => $frame->fd, 'msg' => $frame->data]));
            }
        }
    
        /** * 断开连接回调函数 * @param $server * @param $fd */
        public function onClose($server, $fd)
        { 
            echo $fd . '走了' . PHP_EOL;//打印到我们终端
        }
    
    }
    
    
    $obj = new Chat();
    
    
    ?>

## 客户端 ##

创建liaotian.html文件

<!doctype html>
    
    <html>
    
    <head>
    
        <meta charset="utf-8">
    
        <title>聊天室</title>
    
        <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    
    </head>
    
    <body>
    
    <textarea class="log" style="width: 100%; height: 500px;">
    
    =======聊天室======
    
    </textarea>
    
    <input type="button" value="连接" onClick="link()">
    
    <input type="button" value="断开" onClick="dis()">
    
    <input type="text" id="text">
    
    <input type="button" value="发送" onClick="send()">
    
    <script> function link() { var url = 'ws://20.20.24.131:81'; socket = new WebSocket(url); socket.onopen = function () { log1('连接成功') } socket.onmessage = function (msg) { log(msg.data); console.log(msg); } socket.onclose = function () { log1('断开连接') } } function dis() { socket.close(); socket = null; } function log1(var1) { $('.log').append(var1 + '\r\n'); } function log(var1) { var v = $.parseJSON(var1) $('.log').append('用户' + v['no'] + '说:' + v['msg'] + '\r\n'); } function send() { var text = $('#text').val(); socket.send(text); } function send2() { var json = JSON.stringify({ 'type': 'php', 'msg': $('#text2').attr('value')}) socket.send(json); } </script>
    </body>
    
    </html>

## 启动服务端 ##

php chatserver.php

![在这里插入图片描述][20200915095616927.png_pic_center]

## 浏览器中访问聊天室 ##

http://20.20.24.131/chat/liaotian.html  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center]点击链接，可以看到页面显示连接成功

打开服务端，可以看到  
![在这里插入图片描述][20200915100139954.png_pic_center]表示连接成功

输入奇葩天地网 点击发送  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center 1]服务端，可以看到收到了客户端的聊天内容  
![在这里插入图片描述][20200915100236892.png_pic_center]  
客户端，点击断开

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center 2]服务端，可以看到 客户端1，走了  
![在这里插入图片描述][20200915100336933.png_pic_center]

[20200915095616927.png_pic_center]: /images/20221123/caf1390cbf1b41019a6a54b8f6ba8b8c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/afe56f0e8cbf4883af5a61ce205ccea1.png
[20200915100139954.png_pic_center]: /images/20221123/77f04572bf3141c8997d44b5e8342a9a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/4868b83fe6ea41efb900e5f3e55c09a4.png
[20200915100236892.png_pic_center]: /images/20221123/b37c46a5139e4f058fab81dc79d2a5db.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/be62e5b21d8b4274944ea74ad6f54f53.png
[20200915100336933.png_pic_center]: /images/20221123/9cd3748343ea42a4893f125502f01437.png