Laravel + Swoole 打造IM简易聊天室

梦里梦外; 2023-10-06 19:09 53阅读 0赞

#### Laravel + Swoole 打造IM简易聊天室 ####

*  应用场景：实现简单的即时消息聊天室
 *   *  (一)扩展安装
     *  (二)webSocket服务端代码
     *  (三)客户端实现

## 应用场景：实现简单的即时消息聊天室 ##

### (一)扩展安装 ###

`pecl install swoole`

安装完成后可以通过以下命令检测Swoole是否安装成功

`php -m | grep swoole`

### (二)webSocket服务端代码 ###

我们需要通过Laravel Command来实现,因为Swoole只能运行在PHP CLI模式下。

1.生成Command类

`php artisan make:command SwooleServer`

2.编写webSocket Server逻辑

<?php
    
    namespace App\Console\Commands;
    
    use Illuminate\Console\Command;
    
    class SwooleServer extends Command
    {
        
        /**
         * The name and signature of the console command.
         *
         * @var string
         */
        protected $signature = 'swoole:server';
    
        /**
         * The console command description.
         *
         * @var string
         */
        protected $description = 'swoole websocket';
    
        /**
         * Create a new command instance.
         *
         * @return void
         */
        public function __construct()
        {
        
            parent::__construct();
        }
    
        /**
         * Execute the console command.
         *
         * @return mixed
         */
        public function handle()
        {
        
            //创建server
            $server = new \Swoole\WebSocket\Server("0.0.0.0", 9502);
            
            //连接成功回调
            $server->on('open', function (\Swoole\WebSocket\Server $server, $request) {
        
                $this->info($request->fd . '链接成功');
            });
    
            //收到消息回调
            $server->on('message', function (\Swoole\WebSocket\Server $server, $frame) {
        
                $content = $frame->data;
    
                //推送给所有链接
                foreach ($server->connections as $fd){
        
                    $server->push($fd,$content);
                }
            });
    
            //关闭链接回调
            $server->on('close', function ($ser, $fd) {
        
                $this->info($fd . '断开链接');
            });
    
            $server->start();
        }
    }

3.运行服务端

`php artisan swoole:server`

### (三)客户端实现 ###

1.HTML+JS代码实现

<div style="width:600px;margin:0 auto;border:1px solid #ccc;">
        <div id="content" style="overflow-y:auto;height:300px;"></div>
        <hr />
        <div style="height:40px;background:white;">
            <input type="text" class="form-control" id="message"  placeholder="请输入内容">
            <button type="button" class="btn btn-primary" onclick="sendMessage()">Primary</button>
        </div>
    </div>
    
    <script type="text/javascript">
        if(window.WebSocket){
          
              // 端口和ip地址对应不要写错
              var webSocket = new WebSocket("ws://127.0.0.1:9502");
              webSocket.onopen = function (event) {
          
                  console.log('webSocket 链接成功');
              };
              
              //收到服务端消息回调
              webSocket.onmessage = function (event) {
          
                var content = document.getElementById('content');
                content.innerHTML = content.innerHTML.concat('<p style="margin-left:20px;height:20px;line-height:20px;">'+event.data+'</p>');
              }
              
              var sendMessage = function(){
          
                  var data = document.getElementById('message').value;
                  webSocket.send(data);
              }
          }else{
          
              console.log("您的浏览器不支持WebSocket");
          }
    </script>

通过以上的代码便完善一个基本的简易聊天室,但是距离一个真正完善的及时通讯系统构建还相差甚远,具体的理解和应用都写在了代码注释中,如有不能理解的地方,可以去查看Swoole官方文档以及Webscoket Api.

附上聊天室演示图:

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][de2c81401d394d43bb53dd219d67d344.png]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/f01aad7e174e45dd802f26a26de6b638.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[de2c81401d394d43bb53dd219d67d344.png]: https://img-blog.csdnimg.cn/de2c81401d394d43bb53dd219d67d344.png