Laravel Reverb

Lần đầu tiên, Laravel ra mắt một official package cho phép bạn xây dựng một Websocket Server. Trước đây, chúng ta phải sử dụng package bên thứ 3 như Laravel Websocket.

Reverb được xây dựng dựa trên EventLoop của ReactPHP chứ không phải cơ chế Long Polling hoặc các cơ chế HTTP tương tự.

EventLoop của ReactPHP được xây dựng bằng stream_select của PHP để tạo thành ứng dụng Concurrency. Nhờ vậy, nó sẽ không phụ thuộc vào các extension hay bất kì thư viện nào bên ngoài.

Về cơ bản, Reverb có cơ chế hoạt động tương đồng với NodeJS (Sử dụng EventLoop để xử lý bất đồng bộ).

Setup Laravel Reverb Cơ Bản

Để tìm hiểu sâu thêm về Laravel Reverb, chúng ta sẽ thực hiện một demo cơ bản của việc sử dụng Reverb trong dự án Laravel (Phiên bản được áp dụng trong bài viết là Laravel 11).

Đầu tiên, chúng ta sẽ khởi tạo dự án Laravel mới. Bạn có thể làm điều này bằng cách sử dụng lệnh sau:

composer create-project laravel/laravel reverb

Sau đó, hãy chạy lệnh sau để tạo cấu trúc bảng cơ sở dữ liệu:

php artisan migrate

Tiếp theo, chúng ta sẽ cài đặt Laravel Reverb - WebSocket Server vào dự án Laravel:

php artisan install:broadcasting

Sau khi cài đặt Laravel Reverb, chúng ta sẽ tạo event tên là UserCreated bằng lệnh sau:

php artisan make:event UserCreated

Bạn hãy mở tập tin UserCreated.php trong thư mục app/Events và chỉnh sửa nội dung như sau:

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;
use App\Models\User;

class UserCreated implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $user;

    /**
     * Create a new event instance.
     */
    public function __construct(User $user)
    {
        $this->user = $user;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return array<int, \Illuminate\Broadcasting\Channel>
     */
    public function broadcastOn(): array
    {
        return [
            new Channel('user-created'),
        ];
    }
}

Phía Client, chúng ta sẽ cài đặt thư viện Laravel Echo để giúp chúng ta dễ dàng subscribe đến channels và lắng nghe events broadcast từ Server-side Broadcasting Driver.

Trong bài viết này, chúng ta sẽ cần cài thêm thư viện pusher-js vì Reverb sử dụng Pusher Protocol để subscriptions, channels và messages cho WebSocket.

npm install --save-dev laravel-echo pusher-js

Tiếp theo, chúng ta sẽ xây dựng một giao diện đơn giản để có thể kiểm tra cách hoạt động của Laravel Reverb dễ dàng hơn.

Bạn hãy mở tập tin welcome.blade.php trong thư mục resources/views và chỉnh sửa nội dung như sau:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="ManhDan Blogs">
    <meta name="author" content="ManhDan Blogs">
    <meta name="generator" content="ManhDan Blogs 0.84.0">
    <title>Laravel Reverb</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="icon" href="https://manhdandev.com/web/img/favicon.webp" type="image/x-icon"/>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    @vite(['resources/js/app.js'])
</head>
<body>
    <div class="col-lg-8 mx-auto p-3 py-md-5">
    <header class="d-flex align-items-center pb-3 mb-3 border-bottom">
        <a href="https://manhdandev.com" class="d-flex align-items-center text-dark text-decoration-none" target="_blank">
            <img src="https://manhdandev.com/web/img/logo.webp" width="100px" height="100px">
        </a>
    </header>
    <main>
        <table class="table">
            <thead class="table-dark">
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Created</th>
                    <th>Updated</th>
                </tr>
            </thead>
            <tbody>
                <!-- Laravel Echo -->
            </tbody>
        </table>
    </main>
    <footer class="pt-5 my-5 text-muted border-top">
        &copy;Copyright &copy;2024 All rights reserved | This template is made with
        <i class="fa fa-heart-o"></i> by <a href="https://blog.dane.dev/" rel="noopener" target="_blank">ManhDanBlogs</a>
    </footer>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        window.addEventListener('load', function () {
            Echo.channel('user-created')
                .listen('UserCreated', (e) => {
                    var row = document.createElement("tr");

                    var cell1 = document.createElement("td");
                    cell1.textContent = e.user.id;
                    var cell2 = document.createElement("td");
                    cell2.textContent = e.user.name;
                    var cell3 = document.createElement("td");
                    cell3.textContent = e.user.email;
                    var cell4 = document.createElement("td");
                    cell4.textContent = e.user.created_at;
                    var cell5 = document.createElement("td");
                    cell5.textContent = e.user.updated_at;

                    row.appendChild(cell1);
                    row.appendChild(cell2);
                    row.appendChild(cell3);
                    row.appendChild(cell4);
                    row.appendChild(cell5);

                    document.querySelector("table tbody").appendChild(row);
                });
        })
    </script>
</body>
</html>

Cuối cùng, chúng ta sẽ biên dịch assets của dự án Laravel bằng lệnh sau:

npm run build

Kết quả của công việc bạn đã làm đang chờ bạn khám phá!

Sau khi đã hoàn thành các bước trên, giờ là lúc để chúng ta cùng nhau khám phá thành quả của công sức mình.

Đầu tiên, chúng ta sẽ khởi động Laravel Reverb bằng lệnh sau:

php artisan reverb:start

Tiếp theo, chúng ta sẽ khởi động Laravel Queues bằng lệnh sau:

php artisan  queue:work

Bạn mở trình duyệt lên và truy cập vào địa chỉ  http://127.0.0.1, bạn sẽ thấy giao diện màn hình như bên dưới:

Cuối cùng, bạn cũng có thể sử dụng Tinker để Dispatch một sự kiện UserCreated:

php artisan tinker
App\Events\UserCreated::dispatch(App\Models\User::factory()->create())

Sau khi thực hiện lệnh trên, chúng ta sẽ nhận được kết quả như sau:

Tips Setup cho môi trường Production và Development

Môi trường Production

Đầu tiên, bạn hãy chỉnh sửa tập tin .env như sau:

REVERB_APP_ID=683437
REVERB_APP_KEY=tey9khuvx93qwoi5qhmi
REVERB_APP_SECRET=zcoq2m30qpj8ad5xlicf
REVERB_HOST="manhdandev.com"
REVERB_PORT=443
REVERB_SCHEME=https

Lưu ý: Bạn hãy nhớ thay đổi giá trị REVERB_HOST thành Domain của dự án Laravel của bạn.

Tiếp theo, bạn hãy cài đặt thêm Proxy vào cấu hình Nginx của dự án Laravel của bạn như sau:

location /app {
    proxy_http_version 1.1;
    proxy_set_header Host $http_host;
    proxy_set_header Scheme $scheme;
    proxy_set_header SERVER_PORT $server_port;
    proxy_set_header REMOTE_ADDR $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";

    proxy_pass http://0.0.0.0:8080;
}

Môi trường Development

Nếu như môi trường Development của bạn xài HTTPS FAKE, mà bạn gặp trường hợp lỗi như sau:

[2024-05-15 11:06:18] local.ERROR: cURL error 60: SSL certificate problem: self-signed certificate (see https://curl.haxx.se/libcurl/c/libcurl-errors.html) for https://emme.dane.dev/apps/683437/events?
auth_key=tey9khuvx93qwoi5qhmi&auth_timestamp=1715771178&auth_version=1.0&body_md5=af060516c6190cac7d5b964a0814eb30&auth_signature=8f0e105
e00986340ed7c2c3693739301060d9bda179260d6362ddc07a9a3d747 {"exception":"[object] (GuzzleHttp\\Exception\\RequestException(code: 0): cURL error 60: 
SSL certificate problem: self-signed certificate (see https://curl.haxx.se/libcurl/c/libcurl-errors.html) for https://emme.dane.dev/apps/683437/events?
auth_key=tey9khuvx93qwoi5qhmi&auth_timestamp=1715771178&auth_version=1.0&body_md5=af060516c6190cac7d5b964a0814eb30&auth_signature=8f0e105
e00986340ed7c2c3693739301060d9bda179260d6362ddc07a9a3d747 at /app/vendor/guzzlehttp/guzzle/src/Handler/CurlFactory.php:211)

Bạn hãy mở tập tin config/broadcasting.php và thêm phần setting bên dưới để có thể vượt qua lỗi trên một cách dễ dàng:

'reverb' => [
    ...
    'client_options' => [
        'verify' => false,
        // Guzzle client options: https://docs.guzzlephp.org/en/stable/request-options.html
    ],
],

CÓ THỂ BẠN QUAN TÂM

Cloudflare's Turnstile CAPTCHA in Laravel

Cloudflare's Turnstile CAPTCHA in Laravel

Ngày 28/09/2022, Cloudflare đã thông báo về phiên bản beta mở của Turnstile, một giải pháp thay thế vô hình cho CAPTCHA. Bất kỳ ai, ở bất kỳ đâu trên Internet muốn thay thế CAPTCHA trên trang web c...

Laravel Controllers

Laravel Controllers

Trong mô hình MVC, chữ "C" là từ viết tắt của Controller và nó đóng vai trò rất quan trọng để phân tích các logic business. Khi người dùng truy cập vào trình duyệt, nó sẽ đi đến route đầu tiên, sau đó...

Laravel Authentication With Laravel UI

Laravel Authentication With Laravel UI

Laravel UI Laravel UI cung cấp một cách nhanh chóng để mở rộng các route và view cần thiết cho chức năng Authentication và bao gồm các cài đặt liên quan cho Bootstrap, React hoặc Vue. Mặc dù nó v...

How to insert into a database at lightning speed?

How to insert into a database at lightning speed?

Trong quá trình thực hiện dự án cho công ty, một trong những yêu cầu đặt ra là import dữ liệu từ file CSV (chứa dữ liệu từ hệ thống cũ) vào cơ sở dữ liệu MySQL của hệ thống mới. Do sự thay đổi cấu...

Laravel One to Many Eloquent Relationship

Laravel One to Many Eloquent Relationship

One to Many Relationship được sử dụng trong trường hợp một dữ liệu của một bảng được liên kết với một hoặc nhiều dữ liệu ở bảng khác. Ví dụ, một bài post có thể có nhiều comment. Vì vậy, trong hướn...

Laravel Many to Many Eloquent Relationship

Laravel Many to Many Eloquent Relationship

Many To many Relationship là mối quan hệ hơi phức tạp hơn mối quan hệ 1 - 1 và 1- n. Ví dụ một user có thể có nhiều role khác nhau, trong đó role cũng được liên kết với nhiều user khác nhau. Vì vậy...

Laravel Socialite Login With Linkedin

Laravel Socialite Login With Linkedin

LinkedIn LinkedIn là mạng xã hội tập trung vào mạng lưới nghề nghiệp và phát triển nghề nghiệp và chuyên nghiệp lớn nhất thế giới trên internet. Bạn có thể sử dụng LinkedIn để tìm công việc hoặc...

Integrating AI Assistant with CKEditor 5 in Laravel using Vite

Integrating AI Assistant with CKEditor 5 in Laravel using Vite

OpenAI OpenAI là một công ty nghiên cứu và triển khai trí tuệ nhân tạo, nổi tiếng với việc phát triển các mô hình AI tiên tiến. Mục tiêu của OpenAI là đảm bảo rằng trí tuệ nhân tạo tổng quát (AGI...

Laravel Has Many Through Eloquent Relationship

Laravel Has Many Through Eloquent Relationship

Has Many Through Relationship hơi phức tạp để hiểu một cách đơn giản, nó sẽ cung cấp cho chúng ta một con đường tắt để có thể truy cập dữ liệu của một quan hệ xa xôi thông qua một mối quan hệ trung gi...

ManhDanBlogs