【Laravel】 Pusher를 사용하여 실시간으로 이벤트 업데이트

16760 단어 PHP7PusherPHP라라벨

이번에 만드는 것



이 튜토리얼 을 참고로 서버에서 발행한 이벤트의 결과를 실시간으로 차트로 표현합니다.



JavaScript realtime chart quick start

환경



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

Pusher 앱 만들기



이 기사 을(를) 참고하여 앱을 만듭니다.

차트 페이지 만들기



튜토리얼 페이지 을 참고 (거의 copipe)에 Google Charts 를 사용하여 차트 UI를 만듭니다.

resources/views/realtime-chart.blade.php
<html>
    <body>
        <div id="chart_div" style="width: 100%; height: 500px;"></div>
        <script src="https://www.gstatic.com/charts/loader.js"></script>
        <script src="https://js.pusher.com/5.1/pusher.min.js"></script>
        <script>
            google.charts.load('current', {'packages': ['corechart']});
            google.charts.setOnLoadCallback(() => {
                // Instead of hard-coding the initial table data,
                // you could fetch it from your server.
                const dataTable = google.visualization.arrayToDataTable([
                    ['Year', 'Price'],
                    [2013, 400],
                    [2014, 460],
                ]);
                const chart = new google.visualization.AreaChart(
                    document.getElementById('chart_div'));
                const options = {
                    title: '1 BTC in USD',
                    hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
                    vAxis: {minValue: 0},
                    animation: {duration: 100, easing: 'out'}
                };
                chart.draw(dataTable, options);
                let year = 2015;
                Pusher.logToConsole = true;
                const pusher = new Pusher("{{ config('const.pusher.app_key') }}", { // Replace with 'key' from dashboard
                    cluster: "{{ config('const.pusher.cluster') }}",              // Replace with 'cluster' from dashboard
                    forceTLS: true
                });
                const channel = pusher.subscribe('price-btcusd');
                channel.bind('new-price', data => {
                    const row = [year++, data.value];
                    dataTable.addRow(row);
                    chart.draw(dataTable, options);
                });
            });
        </script>
    </body>
</html>

이때 Pusher의 인수에 직접 APP_KEY나 APP_CLUSTER의 값을 넣지 않고 상수 등을 작성하도록 합시다.

이 페이지에서는 price-btcusd 채널의 new-price 이벤트를 기다리고 있습니다.
이벤트가 발생하면 value 필드가 추출되어 새 데이터로 그래프에 추가됩니다.

마지막으로 이 페이지로의 라우팅을 설정하면 완료됩니다.

routes/web.php
Route::get('/realtime-chart', function () {
    return view('realtime-chart');
});

서버에서 이벤트 발행



이벤트를 받는 페이지를 작성했으므로, 이번에는 이벤트를 발행하는 처리를 작성합시다.

먼저 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

또한 이것을 호출하는 상수를 만듭니다.

config/const.php
return [
    'pusher' => [
        'app_id' => env('PUSHER_APP_ID'),
        'app_key' => env('PUSHER_APP_KEY'),
        'app_secret' => env('PUSHER_APP_SECRET'),
        'cluster' => env('PUSHER_APP_CLUSTER'),
    ]
];
config/app.php 에 Pusher 를 추가합니다.

config/app.php
return [
    ...
    'aliases' => [
        ...
        'Pusher' => Pusher\Pusher::class,
    ]
]

실제로 이벤트를 발행하는 처리를 구현합니다.
namespace App;

use Pusher\Pusher;

class RealtimeChartEvent
{
    public function run()
    {
        $pusher = new Pusher(
            config('const.pusher.app_key'),
            config('const.pusher.app_secret'),
            config('const.pusher.app_id'),
            array(
                'cluster' => config('const.pusher.cluster')
            )
        );

        $i = 0;

        // 毎秒新しいランダムな値をvalueに含めたイベントを発行する
        // 実際に使用する場合は毎秒では無く、データの変更をトリガーにしてイベントを発行してください
        while (true) {
            $pusher->trigger('price-btcusd', 'new-price', array(
                'value' => rand(0, 5000)
            ));

            // 何回イベントを発行したかを確認するために追加
            $i ++;
            echo('send ' . $i . ' times' . PHP_EOL);

            sleep(1);
        }
    }
}

동작 확인


  • 만든 차트 페이지를 엽니다. ( http://localhost:10080/realtime-chart)
  • tinker 를 열고 방금 만든 이벤트를 실행합니다. (영구 루프이므로 종료하려면 control + c) 
    • $ php artisan tinker

>>> $event = new App\Events\RealtimeChartEvent();
>>> $event->run();
  • 실행 로그가 흐르고 차트가 실시간으로 작동하면 성공합니다. 


    • send 1 times
send 2 times
send 3 times
send 4 times
send 5 times
...

    Pusher 대시보드에서 이벤트 확인



    Pusher 대시보드에서 Channels → 앱 선택 → Overview 를 열면 방금 만든 앱에 얼마나 많은 연결과 메시지가 전송되었는지 확인할 수 있습니다.



    참고 자료



    JavaScript realtime chart quick start
    【Laravel】Pusher를 사용해 본다
    Pusher 공식 문서
    Class 'Pusher\Pusher' not found #26
    【Laravel】Pusher를 사용해 본다
    [PHP] 목록에서 하나의 데이터를 추출하는 방법

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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