基于 Laravel + Swoole + Vue 搭建实时在线聊天室（一）：环境准备篇

本文首发在 Laravel 学院：https://laravelacademy.org/post/19881.html，Laravel 学院致力于提供优质 Laravel 中文学习资源。

项目概述

今天开始，学院君将带领大家基于 Swoole 搞个「大项目」 —— 开发在线聊天室，当然还是在 Laravel 框架中，前端 UI 还是基于 Vue 组件实现，本项目主要涉及以下技术：

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

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

Laravel+Swoole 聊天室

注：本项目前端 UI 借鉴自 https://github.com/hua1995116/webchat 这个前端项目。

开发环境

整个项目的开发基于 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 镜像：

docker-compose up -d workspace

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

docker-compose up -d nignx 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

然后我们运行 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 目录，这个时候可能会遇到网络问题导致下载失败：

image

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

image

接下来，我们为项目设置虚拟域名 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;

}

然后在本地主机 /etc/hosts 中映射这个域名：

webchat.test 127.0.0.1

最后在 Laradock 根目录下重启 Nginx：

docker-compose up -d nginx

此时，我们已经可以通过 http://webchat.test 访问聊天室项目了。

回到 webchat 项目，在 .env 中修改 APP_URL 为我们配置的域名：

APP_URL=http://webchat.test

然后运行 php artisan dusk，测试通过，则表示我们的 Dusk 测试环境也是 OK 的：

Laravel Dusk

至此，我们已经完成聊天室项目开发环境、项目初始化和测试环境的准备工作，接下来就可以进行项目开发了。