本文首发在 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
至此，我们已经完成聊天室项目开发环境、项目初始化和测试环境的准备工作，接下来就可以进行项目开发了。
本文首发在 Laravel 学院：https://laravelacademy.org/post/19881.html，Laravel 学院致力于提供优质 Laravel 中文学习资源。
网友评论