基于 Laravel + Swoole + Vue 搭建实时在线聊天室

最近更新：2024/08/18

基于 Laravel + Swoole + Vue 搭建实时在线聊天室

。

免费

立即下载

已杀毒检测

自动发货下载

付费安装源码

免费售后咨询

特别声明：原创产品提供以上服务，破解产品仅供参考学习，不提供售后服务（均已杀毒检测），如有需求，建议购买正版！如果源码侵犯了您的利益请留言告知！如何获得积分

基于 Laradock 本地开发环境进行演示和测试
后端基于 Laravel 5.8 + LaravelS 扩展包引入对 Swoole 的支持
基于 Swoole 提供的 WebSocket 服务器功能进行聊天通信
结合 Swoole 的异步任务和协程机制提升系统响应速度和性能
使用 Redis + MySQL 作为数据存储介质
实现用户注册登录功能，登录后用户才可以进入聊天室
支持文字 + 图片 + 表情 + 链接消息
支持查看历史消息和离线消息
支持与普通用户/机器人聊天
前端基于 Vue.js 框架实现 UI，并且引入 Vuex、Vue-Router 实现前后端分离
支持通过 Laravel Dusk 对项目进行自动化测试

最终实现的聊天室截图如下所示：

Laravel+Swoole 聊天室

整个项目的开发基于 Laradock，你可以参照这篇教程安装并初始化 Laradock：在 Mac/Windows 系统中使用 Laradock 搭建基于 Docker 的 Laravel 开发环境，当然你也可以选择其他集成开发环境，比如 Homestead、Valet、Laragon 等，不过本系列教程默认都是基于 Laradock，后续项目环境配置、工具安装、调试运行都是以 Laradock 为准，使用其他开发工具的请自行按照自己的环境进行调整。

完成 Laradock 的安装和环境初始化之后，需要在根目录下的 .env 文件中启用 NPM 相关配置：

WORKSPACE_INSTALL_NODE=true
WORKSPACE_NODE_VERSION=node
WORKSPACE_NPM_REGISTRY=http://registry.npm.taobao.org/

以及 Swoole 相关配置：

WORKSPACE_INSTALL_SWOOLE=true
...
PHP_FPM_INSTALL_SWOOLE=true

然后重新构建 workspace 和 php-fpm 镜像：

docker-compose build workspace php-fpm

让上述修改生效，并且在 workspace 和 php-fpm 容器中安装 Swoole 扩展。如果你还没有启动 Nginx、Redis、MySQL 的话，现在运行如下命令启动它们（后续教程假设它们都处于启动状态）：

docker-compose up -d nginx mysql redis

项目初始化

注：以下操作你可以在本地进行（需要本地安装过 PHP、Composer、Node.js 等软件），也可以进入 workspace 容器指定目录下操作。

接下来，我们来安装并初始化聊天室项目 webchat，由于我们在 .env 配置 APP_CODE_PATH_HOST 指向了与 laradock 同级的 wwwroot，所以我们可以在本地的 wwwroot 目录下通过 Composer 来创建这个项目：

composer create-project laravel/laravel webchat --prefer-dist -vvv

创建成功后，进入该项目目录，通过 Composer 安装 LaravelS 扩展包，以便快速在 Laravel 项目中使用 Swoole 提供的 API 进行编程，然后将该扩展包的配置文件和脚本文件发布到项目根目录下：

cd webchat
composer require hhxsv5/laravel-s
php artisan laravels publish

然后我们进入 workspace 容器运行 php bin/laravels start 启动 Swoole，验证 Swoole 环境是否就绪：

LaravelS

看到如上信息即表示 Swoole 运行环境是正常的。

接下来，由于我们后续有可能用到 Redis，所以先安装对应的扩展包：

composer require predis/predis

后端的环境配置先告一段落，我们接下来来到前端，运行 npm install 初始化前端依赖，初始化完成后执行如下命令安装 Vuex 和 Vue-Router：

npm install vuex vue-router --save-dev

这样，我们就完成了聊天室项目的所有初始化工作，如果后续开发过程中需要其他依赖我们在具体教程中再安装。

自动化测试

我们还可以为项目编写浏览器测试代码实现自动化测试，这可以通过 Laravel 框架提供的 Dusk 扩展包来实现，我们可以通过 Composer 来安装这个扩展包：

composer require --dev laravel/dusk

由于我们只需要在开发环境进行测试，所以加上了 --dev 选项。之后运行 php artisan dusk:install 在 tests 目录下初始化浏览器测试相关示例文件，该命令还会下载适配当前平台的 ChromeDriver 文件到扩展包的 bin 目录，这个时候可能会遇到网络问题导致下载失败：

不过由于 Dusk 扩展包已经自带了各个平台的 ChromeDriver 文件，所以可以忽略这个错误：

接下来，我们为项目设置虚拟域名 webchat.test，并且在 Laradock 根目录下的 nginx/sites 子目录中新增对应的虚拟主机配置 webchat.conf：

server {

    listen 80;
    listen [::]:80;

    server_name webchat.test;
    root /var/www/webchat/public;
    index index.php index.html index.htm;

    location / {
         try_files $uri $uri/ /index.php$is_args$args;
    }

    location ~ \.php$ {
        try_files $uri /index.php =404;
        fastcgi_pass php-upstream;
        fastcgi_index index.php;
        fastcgi_buffers 16 16k;
        fastcgi_buffer_size 32k;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        #fixes timeouts
        fastcgi_read_timeout 600;
        include fastcgi_params;
    }

    location ~ /\.ht {
        deny all;
    }

    location /.well-known/acme-challenge/ {
        root /var/www/letsencrypt/;
        log_not_found off;
    }

    error_log /var/log/nginx/webchat_error.log;
    access_log /var/log/nginx/webchat_access.log;
}