ไลบรารีเซิร์ฟเวอร์

Laravel แบบเรียลไทม์ด้วย WebSocket

Laravel Broadcasting บนเซิร์ฟเวอร์และ Laravel Echo บนเบราว์เซอร์ โดยไม่ต้องแก้โค้ด

ลงชื่อเข้าใช้เพื่อดูโค้ดตัวอย่างเหล่านี้พร้อมโฮสต์คลัสเตอร์ของคุณเอง ลงชื่อเข้าใช้

ใช้เอเจนต์เขียนโค้ด AI อยู่ใช่ไหม? คัดลอกพรอมต์สำหรับเอเจนต์ ↓

1. ติดตั้ง

   composer require pusher/pusher-php-server
   npm install --save-dev laravel-echo pusher-js

2. ตั้งค่าข้อมูลรับรองของแอป

   BROADCAST_CONNECTION=pusher
   PUSHER_APP_ID=YOUR_APP_ID
   PUSHER_APP_KEY=YOUR_APP_KEY
   PUSHER_APP_SECRET=YOUR_APP_SECRET
   PUSHER_HOST=ws.hibira.io
   PUSHER_PORT=443
   PUSHER_SCHEME=https
   PUSHER_APP_CLUSTER=ap
   
   VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
   VITE_PUSHER_HOST="${PUSHER_HOST}"
   VITE_PUSHER_PORT="${PUSHER_PORT}"
   VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"

3. ตั้งค่าไคลเอนต์

   // resources/js/echo.js
   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,
     cluster: 'ap',
     wsHost: import.meta.env.VITE_PUSHER_HOST,
     wsPort: import.meta.env.VITE_PUSHER_PORT,
     wssPort: import.meta.env.VITE_PUSHER_PORT,
     forceTLS: import.meta.env.VITE_PUSHER_SCHEME === 'https',
     enabledTransports: ['ws', 'wss'],
   });
   
   window.Echo.private('orders.' + orderId)
     .listen('OrderShipped', (e) => console.log(e.order));

4. เผยแพร่อีเวนต์

   // Any event that implements ShouldBroadcast
   OrderShipped::dispatch($order);

ใช้ app key และ secret จากแดชบอร์ดของคุณ ช่อง อีเวนต์ และ endpoint การยืนยันสิทธิ์ทำงานเหมือนกับที่ใช้กับ Pusher ทุกประการ ข้อมูลอ้างอิงไลบรารี ↗