서버 라이브러리

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

대시보드의 앱 키와 시크릿을 사용하세요. 채널, 이벤트, 인가 엔드포인트는 Pusher와 똑같이 동작합니다. 라이브러리 레퍼런스 ↗