H??ng d?n Laravel Websockets t?o Server Push realtime

T?o project

composer create-project laravel/laravel larawebsockets

M? file .env và nh?p thông tin Database:

DB_DATABASE=your-db-name
DB_USERNAME=root
DB_PASSWORD=

Cài ??t Laravel websockets – Server Side

cd vào th? m?c project v?a t?o sau ?ó cài package

composer require beyondcode/laravel-websockets

publish migration c?a package:

php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="migrations"

t?o table cho package:

php artisan migrate

publish config:

php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="config"

cài package pusher server:

composer require pusher/pusher-php-server:7.0.2

m? file .env ch?nh broadcast driver và các thông tin pusher:

BROADCAST_DRIVER=pusher

PUSHER_APP_ID=websockettutorial
PUSHER_APP_KEY=any-key
PUSHER_APP_SECRET=123456
PUSHER_HOST=localhost
PUSHER_PORT=6001
PUSHER_SCHEME=http
PUSHER_APP_CLUSTER=mt1

m? file /config/app.php, tìm dòng bên d??i và uncomment:

App\Providers\BroadcastServiceProvider::class,

T?o event:

php artisan make:event SendMessage

ch?nh file event v?a t?o:

<?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;

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

    public $message;
    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct($message)
    {
        $this->message = $message;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new Channel('my-channel');
    }

    public function broadcastWith()
    {
        return [
            'data' => $this->message
        ];
    }
}

M? file routes\web.php và thêm ?o?n bên d??i:

Route::get('send-event', function() {
    $text = "hello";
    broadcast(new \App\Events\SendMessage($text));
});

ch?y server test project:

php artisan serve

ch?y websockets server:

php artisan websockets:serve

Có th? xem các s? ki?n trên websockets server t?i ???ng d?n /laravel-websockets vd:

http://localhost:8000/laravel-websockets

Ch?y event ?ã t?o tr??c ?ó:

http://localhost:8000/send-event

n?u hi?n thông tin trên trang /laravel-websockets là ?ã cài ??t thành công phía server

Cài ??t Laravel websockets – Client Side

cài package Laravel Echo & Pusher-js

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

m? file resources\js\bootstrap.js

tìm và uncomment ?o?n sau:

import Echo from 'laravel-echo';

import Pusher from 'pusher-js';
window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    wsHost: import.meta.env.VITE_PUSHER_HOST ? import.meta.env.VITE_PUSHER_HOST : `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
    wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
    wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
});

m? file view có s?n  resources\views\welcome.blade.php thêm ?o?n sau vào bên trên th? </body>

@vite('resources/js/app.js')

        <script>
            document.addEventListener("DOMContentLoaded", function(event) { 
                
                 Echo.private(`my-channel`)
                     .listen('SendMessage', (e) => {
                     console.log(e.data);
                });
               
            });
        </script>

Done