【Laravel】Pusher를 사용해 본다

12425 단어 PusherPHP7라라벨

환경



PHP: 7.2.5
Laravel: 7.0
pusher-php-server: 4.1

Pusher로 앱 만들기



먼저 Pusher에 계정을 만드십시오.

로그인하면 새로 Channels App을 작성하는 화면으로 전환합니다.


  • 앱 이름 입력란 아래에서 create apps for multiple environments를 선택하면 development, staging, production의 세 가지 환경의 앱을 동시에 만들 수 있습니다.
  • cluster는 특별한 이유가 없으면 ap3(도쿄 리전)을 선택합시다.
  • front-end tech와 back-end tech는 모두 괜찮습니다.
  • 자습서에 표시되는 언어가 선택한 것일 뿐입니다.
  • 이번은 back-end tech에 Laravel을 선택했습니다.


    • Laravel에서 Public Channel을 사용해보십시오.



    앱을 만든 후 먼저 전환하는 페이지의 Getting Started를 Laravel만 사용해 봅니다.

    Step1 이벤트 수신 페이지 작성.



    우선은 my-channel 의 my-event 라는 이벤트를 받는 페이지를 작성합니다.

    Getting Started의 Step1에서 Javascript를 선택합니다.

    거기에 쓰여진 index.html를 Laravel의 view에 작성합니다.

    resources/views/pusher-index.blade.php
    <!DOCTYPE html>
<head>
    <title>Pusher Test</title>
    <script src="https://js.pusher.com/6.0/pusher.min.js"></script>
    <script>

        // Enable pusher logging - don't include this in production
        Pusher.logToConsole = true;

        var pusher = new Pusher("{{ config('const.pusher.app_key') }}", {
            cluster: "{{ config('const.pusher.cluster') }}"
        });

        var channel = pusher.subscribe('my-channel');
        channel.bind('my-event', function(data) {
            alert(JSON.stringify(data));
        });
    </script>
</head>
<body>
<h1>Pusher Test</h1>
<p>
    Try publishing an event to channel <code>my-channel</code>
    with event name <code>my-event</code>.
</p>
</body>

    이때 app_key의 정보나 cluster의 정보를 그대로 쓰는 것은 위험하므로 상수로서 빼냅니다.

    config/const.php
    return [
    'pusher' => [
        'app_key' => env('PUSHER_APP_KEY'),
        'cluster' => env('PUSHER_APP_CLUSTER'),
    ]
];

    블레이드가 생성되면 라우팅을 설정합니다.

    routes/web.php
    Route::group(['prefix' => '/pusher'], function () {
    Route::get('/index', function () {
        return view('pusher-index');
    });
});

    이것으로 이벤트를 받는 페이지가 완성되었습니다.
    http://localhost:10080/pusher/index



    Step2 이벤트 전송을 위한 엔드포인트 생성



    다음은 이벤트를 발행하는 엔드포인트를 작성합니다.

    우선 pusher의 라이브러리를 추가합시다.
    composer require pusher/pusher-php-server
    .env 에서 방금 만든 Pusher 앱 설정을 설명합니다.
    앱의 키는 Getting Started 의 샘플내 또는 App Keys 탭에 기재되어 있으므로 그쪽을 참조해 주세요.

    .env
    PUSHER_APP_ID=12345
PUSHER_APP_KEY=hoge-app-key
PUSHER_APP_SECRET=hoge-app-secret
PUSHER_APP_CLUSTER=hoge-cluster
    broadcasting.php를 다시 씁니다. (Laravel7에서는 이미 설정되어 있으므로 필요하지 않습니다.)

    config/broadcasting.php
    return [
    ...
    'connections' => [
        'pusher' => [
            ...
            'options' => [
                'cluster' => env('PUSHER_APP_CLUSTER'),
                'useTLS' => true,
            ],
        ],
    ]
];

    그런 다음 이벤트를 발행하는 클래스를 만듭니다.

    app/Events/MyEvent.php
    namespace App\Events;

use Illuminate\Queue\SerializesModels;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

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

    public $message;

    public function __construct($message)
    {
        $this->message = $message;
    }

    public function broadcastOn()
    {
        return ['my-channel'];
    }

    public function broadcastAs()
    {
        return 'my-event';
    }
}

    마지막으로 이 이벤트를 호출하는 엔드포인트를 설정합시다.

    routes/web.php
    Route::group(['prefix' => '/pusher'], function () {
    Route::get('/index', function () {
        return view('pusher-index');
    });

    // 追加
    Route::get('/hello-world', function () {
        event(new App\Events\MyEvent('hello world'));
        return ['message' => 'send to message : hello world'];
    });
});

    동작 확인



    실제로 작동하는지 확인해보십시오.
  • 이벤트를 받을 페이지를 엽니다. (http://localhost:10080/pusher/index)
  • 브라우저의 다른 탭에서 이벤트를 게시하는 페이지를 엽니다. (http://localhost:10080/pusher/hello-world)


  • 수신 페이지에 메시지가 표시되면 성공합니다.



    • 참고 자료



    Pusher 공식 문서
    Pusher로 WebSocket 통신 시도
    PHP5.x에서 PHP7.x에서 pg_send_query pg_get_result 동작 변경
    【Laravel】 Pusher를 사용하여 실시간으로 이벤트 업데이트

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage