Laravel là một framework PHP mạnh mẽ và linh hoạt, nổi bật với khả năng hỗ trợ các ứng dụng thời gian thực thông qua broadcasting. Trong bài viết này, chúng ta sẽ khám phá cách sử dụng Laravel Broadcast với Pusher để xây dựng một ứng dụng thời gian thực. Bạn sẽ học cách cài đặt và cấu hình Pusher, thiết lập các kênh broadcast trong Laravel, và cuối cùng là gửi và nhận các sự kiện thời gian thực trong ứng dụng của bạn. Qua hướng dẫn này, bạn sẽ thấy rõ sự tiện lợi và hiệu quả của việc tích hợp Laravel và Pusher trong việc phát triển ứng dụng hiện đại.

Các bước thực hiện : 

Bước 1 : Tạo laravel app

Đầu tiên chúng ta cần tạo 1 laravel app với dòng lệnh : 

composer create-project laravel/laravel labroadcast

Tạo file config broadcasting trong thư mục  config/broadcasting.php với lệnh :

php artisan install:broadcasting

Vào file .env thêm config :

PUSHER_APP_ID=16421xx
PUSHER_APP_KEY=9b1df2e5ce5bef2c9xxx
PUSHER_APP_SECRET=5c4d039ef6d91ca8fxxx
PUSHER_HOST=
PUSHER_PORT=443
PUSHER_SCHEME=https
PUSHER_APP_CLUSTER=ap1

và 

BROADCAST_CONNECTION=pusher

Bước 2 : Add pusher vào project :

Chúng ta cài pusher server với dòng lệnh :

composer require pusher/pusher-php-server

Bước 3 : Tạo router 

Trong file routes/web.php

Route::get('/channelsend',[\App\Http\Controllers\ChannelController::class,'index']);

Bước 4 : Tạo controller :

Trong file app/Http/Controllers/ChannelController.php : 

toOthers();
    }
}

Bước 5 : Tạo event :

Trong file  :app/Events/TestbroadcastEvent.php
 

message = $message;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return array
     */
    public function broadcastOn(): array
    {
        return [
            //new PrivateChannel('private-channelp.1'),
           // new Channel('private-channelp.1'),
           new Channel('channelp.1'),
        ];
    }
    public function broadcastAs()
    {
        return 'create';
    }
}

Code ở client

Code trên nextjs demo với file src/app/test/page.tsx

'use client';

import React, { useEffect, useState } from 'react';
import Head from 'next/head';
import Script from 'next/script';

const TestPage = () => {
    const [dataget, setDataget] = useState('');

    useEffect(() => {
        if (typeof window !== "undefined") {
            if (!window.pusherInitialized) {
                // Sử dụng window.Pusher sau khi script đã được tải
                window.Pusher.logToConsole = true;
                const pusher = new window.Pusher('9b1df2e5ce5bef2c9xxx', {
                    cluster: 'ap1',
                    // channelAuthorization: {
                    //     transport: "jsonp",
                    //     endpoint: "http://localhost:8000/broadcasting/auth",
                    // },
                });

                const channel = pusher.subscribe('private-channelp.1');
                channel.bind('create', function (data) {
                    console.log(data.message);
                    setDataget(data.message);
                });

                window.pusherInitialized = true;
            }
        }
    }, []);

    return (
        <>