Laravel과 함께 Soketi를 사용하는 방법

오늘 포스트에서는 Soketi를 Laravel과 함께 WebSockets 서버로 사용하는 방법을 살펴보겠습니다. 이 게시물은 모든 것을 로컬에서 사용하고 Pt.2에서는 Soketi를 EC2에 배포할 것입니다.

전제 조건:

• Laravel 9 프로젝트.
• 노드 js
• 파이썬 3.x
• 지트
• gcc 컴파일러 및 빌드 종속성

Make sure to have all above tools installed on your machine before move on.

참고: Soketi를 설치하는 방법에는 여러 가지가 있습니다. 공식 확인docs

참고 2: 내 경우와 같이 Mac OS를 사용하는 경우 brew를 사용하여 위의 세 가지 패키지를 모두 설치합니다.

brew install gcc
...

1단계: Soketi 설치 및 실행

이제 다음을 실행하여 컴퓨터에 전역적으로 Soketi를 설치합니다.

npm install -g @soketi/soketi

설치가 완료되면 다음을 실행합니다.

soketi start

다음과 같은 결과를 얻어야 합니다.

2단계: Laravel 관련 패키지(클라이언트, 서버) 설치

라라벨에서 푸셔 드라이버를 사용하려면 Composer 패키지 관리자를 사용하여 푸셔 채널 PHP SDK를 설치해야 합니다:

composer require pusher/pusher-php-server

클라이언트 측에 이벤트를 수신하려면 NPM을 실행하는 다음 두 패키지를 설치해야 합니다.

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

마지막으로 설치laravel/breeze:

composer require laravel/breeze

php artisan breeze:install

3단계: Laravel로 Soketi 구성

먼저 config/broadcasting.php 파일을 열고 pusher 드라이버를 다음과 같이 변경합니다.

'connections' => [

    // ...

    'pusher' => [
        'driver' => 'pusher',
        'key' => env('PUSHER_APP_KEY', 'app-key'),
        'secret' => env('PUSHER_APP_SECRET', 'app-secret'),
        'app_id' => env('PUSHER_APP_ID', 'app-id'),
        'options' => [
            'host' => env('PUSHER_HOST', '127.0.0.1'),
            'port' => env('PUSHER_PORT', 6001),
            'scheme' => env('PUSHER_SCHEME', 'http'),
            'encrypted' => true,
            'useTLS' => env('PUSHER_SCHEME') === 'https',
        ],
    ],
],

새 구성 세부 정보로 .env 파일을 업데이트해야 합니다.

PUSHER_APP_KEY=app-key
PUSHER_APP_ID=app-id
PUSHER_APP_SECRET=app-secret
PUSHER_HOST=127.0.0.1
PUSHER_PORT=6001

VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"

또한 .env에서 BROADCAST_DRIVER를 pusher로 변경합니다.

이제 resources/js/bootstrap.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,
    wsHost:
        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"],
});

4단계: Laravel과 함께 Soketi 사용

새 이벤트 만들기php artisan make:event OrderStatusUpdated
그것을 열고 다음과 같이 변경하십시오.

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

    public function __construct()
    {
    }

    public function broadcastOn()
    {
        return new Channel('orders');
    }
}

그런 다음 resources/js/bootstrap.js 끝에 다음 코드를 추가합니다.

window.Echo.channel("orders").listen("OrderStatusUpdated", (e) => {
    console.log(e);
});

실행되면 수신하는 간단한 이벤트 리스너입니다OrderStatusUpdated.

이제 web.php로 이동하여 이벤트 실행을 위한 새 경로를 생성합니다.

Route::get('/fire', function () {
    OrderStatusUpdated::dispatch();

    return 'Event has been sent!';
});

5단계: 테스트

브라우저에서 두 개의 탭을 엽니다.

먼저soketi.test/dashboard 콘솔을 열어 이벤트를 확인합니다.

두 번째 방문soketi.test/fire으로 이벤트 진행

두 번째 URL을 누르면 첫 번째 탭에서 REAL-TIME WAY로 이벤트를 볼 수 있습니다 :)

========== 끝 =============

또 다른 유용한 리소스:

1- Laravel의 방송 이벤트에 대해 자세히 설명하는 Laracastcourse.

2- 자세한 내용은 Soketi의 공식docs을 항상 확인하십시오.

PT.2에서 만나요 :)