基于 Laravel + Swoole + Vue 搭建实时在线聊天室(一):环境准备篇

项目概述

今天开始,学院君将带领大家基于 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 开发环境,当然你也可以选择其他集成开发环境,比如 HomesteadValetLaragon 等,不过本系列教程默认都是基于 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

然后重新构建 workspacephp-fpm 镜像:

docker-compose build workspace php-fpm

让上述修改生效,并且在 workspacephp-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

然后我们进入 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:installtests 目录下初始化浏览器测试相关示例文件,该命令还会下载适配当前平台的 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;
}

然后在本地主机 /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

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

学院君 has written 1346 articles

Laravel学院院长,终身学习者

积分:187597 等级:P12 职业:手艺人 城市:杭州

3 条回复

  1. shijunti19 shijunti19 says:

    这玩意把我网站搞死了哭。。。 1.已经做好的网站不能开这个,整合你网站就废了,常驻内存没几个扩展支持的! 2.只适合单独的聊天项目什么的,里面全是坑需要自己一个个填,指不定哪天会塌陷。 3.常驻内存,并没提高网站并发,反而耗光内存! 有没有单独的,没laravels这种全部整合的

登录后才能进行评论,立即登录?