Building a Live Online Chat Room Based on Laravel + Swoole + Vue (P1)

Building a Live Online Chat Room Based on Laravel + Swoole + Vue (Part 1): Environment Preparation

Project Overview

Starting today, the academy will lead you to build a “big project” based on Swoole-develop online chat rooms. Of course, it is still in the Laravel framework, and the front-end UI is based on Vue components. This project mainly involves the following technologies:

Demonstrate and test based on Laradock’s local development environment
Backend based on Laravel 5.8 + LaravelS extension package introduces support for Swoole
Chat communication based on WebSocket server function provided by Swoole
Combine Swoole’s asynchronous tasks and coroutines to improve system response speed and performance
Use Redis + MySQL as a data storage medium
Implement user registration and login function, users can enter the chat room after login
Support text + picture + expression + link message
Support viewing historical messages and offline messages
Support chat with ordinary users / bots
The front end implements the UI based on the Vue.js framework, and introduces Vuex and Vue-Router to achieve front-end and back-end separation
Supports automated testing of projects with Laravel Dusk

The screenshot of the chat room finally implemented is shown below:

This is image title

Note: The front-end UI of this project is borrowed from the front-end project https://github.com/hua1995116/webchat

Development environment

The development of the entire project is based on Laradock. Of course, you can also choose other integrated development environments, such as Homestead, Valet, Laragon. Wait, but this series of tutorials are based on Laradock by default. The subsequent project environment configuration, tool installation, debugging and running are subject to Laradock. Please use other development tools to adjust according to your own environment.

After completing the installation and initialization Laradock environment, the need in the root directory .env to enable NPM configuration file:

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

And Swoole related configuration:

WORKSPACE_INSTALL_SWOOLE=true
...
PHP_FPM_INSTALL_SWOOLE=true

Then rebuild workspace and php-fpm mirrors:

docker-compose build workspace php-fpm

Let the above changes to take effect, and in workspace and php-fpm install Swoole expansion vessel. If you haven’t started Nginx, Redis, MySQL, now run them as follows (the following tutorials assume that they are all started):

docker-compose up -d nignx mysql redis

Project initialization

Note: You can perform the following actions (requires PHP, Composer, Node.js and other local software installed), you can also enter a local workspace vessel operating under the specified directory.

Next, we installed and initialized chat room project webchat, because we were .env configured APP_CODE_PATH_HOST to point to the laradock same level wwwroot, so we can locally wwwroot to create the project directory by Composer:

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

After successful creation, enter the project directory, install LaravelS extension package through Composer , in order to quickly use the API provided by Swoole for programming in Laravel project, and then publish the configuration file and script file of the extension package to the project root directory:

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

Then we enter the workspace vessel running php bin/laravels start start Swoole, verify Swoole environment is ready:

This is image title

Seeing the above information indicates that the Swoole operating environment is normal.

Next, since we may use Redis in the future, install the corresponding extension package first:

composer require predis/predis

Environment configuration backend to come to an end, we next come to the front, running npm install initialize the front-dependent, execute the following command to install Vuex and Vue-Router after initialization is complete:

npm install vuex vue-router --save-dev

In this way, we have completed all the initialization of the chat room project. If other dependencies are needed during the subsequent development, we will install them in the specific tutorial.

automated test

We can also write browser test code for the project to implement automated testing. This can be achieved through the Dusk extension package provided by the Laravel framework. We can install this extension package through Composer:

composer require --dev laravel/dusk

Since we only need to be tested in the development environment, so the added --dev options. After running php artisan dusk:install in tests the directory browser initialization related test sample files, this command will download a file adapter ChromeDriver current platform expansion pack to the bindirectory, this time may experience network problems if the download fails:

This is image title

However, since the Dusk extension package already comes with ChromeDriver files for each platform, you can ignore this error:

This is image title

Next, we set up a virtual domain name for the project webchat.test, and in the root directory of Laradock nginx/sites new subdirectory corresponding virtual host configuration 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;
}

Then the local host /etc/hosts mapping this domain name:

webchat.test 127.0.0.1

Finally restart Nginx in the Laradock root directory:

docker-compose up -d nginx

At this point, we can have http://webchat.test access to a chat room project.

Back to the webchat project, in .env modification APP_URL to the configuration of our domain names:

APP_URL=http://webchat.test

Then run php artisan dusk and test passes, it means that our Dusk test environment is also OK:

This is image title

At this point, we have completed the preparation of the chat room project development environment, project initialization and test environment, and then we can start project development.

#laravel #vuejs #swoole