環境
PHP: 7.2.5
Laravel: 7.0
pusher-php-server: 4.1
PusherでAppを作成する
まずは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'),
]
];
bladeを作成したらルーティングを設定します。
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）
- 受信ページにメッセージが表示されれば成功です。
