メサイア・ワークス

pusher.comのリアルタイム通知を、laravel mixで実装してみた。

pusher.comのリアルタイム通知を、laravel mixで実装してみた。

以前にも同じようなのを作ったけど、pusherからの受信部分がPHPサンプルコードのままだったんで、laravel mixで実装してみた。

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

参考URL:
https://nextat.co.jp/staff/archives/213

0, laravel本体をインストール
composer create-project laravel/laravel chat

pusher.comの準備

1, pusherライブラリ
cd chat
composer require pusher/pusher-php-server

2. pusher.comのGetting Startedのサンプルコードが動作するかテスト

http://localhost/chat/public/recieve を開いた状態で
http://localhost/chat/public/sent にアクセスしたら、alertが出るか確かめる。

ここまでは、laravelとは無関係に動作する(Webサーバとブラウザのみでlaravelは関係ない)
laravel(laravel mix)で、pusher.comを使えるようにする

3, .envにpusher接続情報を記述
BROADCAST_DRIVER = pusher #logから変更する。logのままだとstorage/logsフォルダに出力されるだけ。
PUSHER_APP_ID = [Puserのapp_id]
PUSHER_KEY = [Puserのkey]
PUSHER_SECRET = [Puserのsecret]
PUSHER_CLUSTER = [Puserのcluster]

config/app.php内のブロードキャストプロバイダをコメントインする
//App\Providers\BroadcastServiceProvider::class,

4, pusher.comへの送信部分を作る(イベントクラスを定義して、インスタンス生成するだけ)

app/Events/pusher_sent.phpが生成されるので、チャンネル名・イベント名を指定&テキストをもらう

5, 送信処理を変更(routes/web.php)

URLにアクセスして、Getting Startedのページからpusherへ送信されているか確認する
※チャネル名(private/public)・イベント名に注意!

pusher.comからの受信は、意外と面倒!
laravel-echoというnode.jsパッケージを使う(pusher.comサンプルコードのpusher.min.jsは、もう使わない)
node.jsのコードは1行も書かないけど、実行環境は必要!
https://laravel.com/docs/5.7/broadcasting#receiving-broadcasts

1, node.jsがインストールされているか確認
node -v
npm -v

2, package.jsonに記述されているnode.jsパッケージを、laravelへインストールする
(winの場合、シンボリックリンクが作成できずERRORになるので–no-bin-linksをつける)
# git cloneした時にcomposer installするのと一緒の事
npm install –no-bin-links

# なんかcross-envにエラーが出るので個別インストールしてから、もう一回npm run dev
npm install –save-dev cross-env

3, コンパイルする
npm run dev

4, 変更時に自動コンパイルするように監視(Ctrl+Cで終了)
npm run watch

5, ようやく下準備が整ったので、laravel-echoパッケージをインストール
npm install –save laravel-echo pusher-js

6, resources/js/bootstrap.jsの最後に、pushere受信処理が記述されているが、コメントアウトされているのでコメントインする

7,resources/js/app.jsの最後にも、受信するチャネル名・イベント名を指定&処理を記述(イベント名の前にドットをつけるのを忘れずに!!)

8, laravel標準の認証画面だと、自動的にapp.jsを読み込む準備が出来ているので、それを利用する。
php artisan make:auth

http://localhost/chat/public/home を表示した状態で、
http://localhost/chat/public/sent にアクセスして
F12のconsoleに、message:テストメッセージが出てくれば受信完了!

モバイルバージョンを終了