laravel5.7で、リアルタイムチャットや通知に必要なpusher.comを使ってみた

laravel5.7で、リアルタイムチャットや通知に必要なpusher.comを使ってみた

リアルタイムチャットや通知には、サーバ側からブラウザ側へアクションをしないとダメなのだが、そもそもHTTPはブラウザ側からの一期一会のアクションしか存在しない(郵便ポストに投函して返事を待つイメージ)
GET(このファイルくれ!)→index.html
POST(このデータでなんとかして!)→index.html(申し込みフォームや検索など)

なので、node.jsなどを使ってWebSocket(電話のようにつなげっぱなしな状態)を利用しないと、phpではリアルタイムチャットや通知を実現できない!

一番最初の下準備として、PusherのPHP SDK, Laravel Echo(ブロードキャスト/WebSocket)をインストールする

pusher.comのアカウントとCreate new app(laravel+JS)を作ったら、Getting Startedに、受信処理(HTML)と送信処理(PHP)があるので、そのままコピペすれば、laravelでpusher送受信が出来る
routes/web.php

/receiveのページを開いた状態で、/sendのページにアクセスすると、pusher.com経由で、/receiveページにalertが表示される!!
これはこれで簡単だけど、あちこちに同じ処理を書くのは大変なので、laravelのお作法に沿って記述する。

0, config/app.phpで、なぜかブロードキャストだけコメントアウトされているので、コメントインする

1, .envに、pusher.comへのアクセス情報を記述。これでlaravelからpusherへアクセス出来るようになる。

2, チャット用のMessageモデルを作る

3, Eloquentには、最初からCRUD操作する時にpusherに通知する機能がある!

Laravel 5.1 Broadcastig EventsでPusherを利用してリアルタイム更新アプリを作成するには

4, app/Providers/AppServiceProvider.phpに、チャットで発言されたら、イベント発火するように記述

5, Messageレコードを新規作成されたら、pusher通知を行うようにする。
※pusher通知の書き込み(event)には、channel名, event名, app_id, key, secret, clusterが必須!
pusher通知の読み込み(listener)には、channel名, event名, app_id, clusterが必須!(key, secretは不要)
同じapp_id内で、channel名やevent名で通知を使い分ける。

app/Events/MessageCreated.php

6, resources/views/index.blade.phpなどに、受信処理(HTML)をコピペしておく
最初の/receiveを利用しても良い。

7, 適当なルーティングで、Messageレコード新規作成して、受信処理(HTML)が正常に動作するか確認する。

これで、なんとなくpusher(リアルタイム通知)が使えるようなったので、次はプライベート・イベント(ログインした特定のユーザ向け)を実装してみよう。
今回のは、パプリック・イベントなので、ログインとか無関係だった。

コメントを残す

メールアドレスが公開されることはありません。