今回作るもの
こちらのチュートリアルを参考に、サーバで発行したイベントの結果をリアルタイムにチャートで表現します。
JavaScript realtime chart quick start
環境
PHP: 7.2.5
Laravel: 7.0
pusher-php-server: 4.1
Pusher Appの作成
こちらの記事を参考にAppを作成してください。
チャートページの作成
チュートリアルのページを参考（ほぼコピペ）にGoogle Chartsを使用してチャートUIを作成します。
<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フィールドが抽出され、新しいデータとしてグラフに追加されます。
最後にこのページへのルーティングを設定すれば完了です。
Route::get('/realtime-chart', function () {
return view('realtime-chart');
});
サーバーからイベントを発行する
イベントを受け取るページを作成したので、今度はイベントを発行する処理を作成しましょう。
まずPusherのライブラリを追加します。
composer require pusher/pusher-php-server
.envにPusherアプリの設定を記載します。
アプリのキーはGetting Startedのサンプル内、またはApp Keysタブに記載されているのでそちらを参照してください。
PUSHER_APP_ID=12345
PUSHER_APP_KEY=hoge-app-key
PUSHER_APP_SECRET=hoge-app-secret
PUSHER_APP_CLUSTER=hoge-cluster
またこれを呼び出すための定数を作成します。
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を追加します。
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を開くと、作成したAppにどれぐらいのconnectionとmessageが送られたかを確認することができます。
参考資料
JavaScript realtime chart quick start
【Laravel】Pusherを使ってみる
Pusher公式ドキュメント
Class 'Pusher\Pusher' not found #26