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のサンプルコードが動作するかテスト

routes/web.phpに記述
Route::get('/sent', function(){
    // 右側の送信部分
});

Route::get('/recieve', function(){
return <<<HTML
    // 左側の受信部分
HTML;
});

routes/web.phpに記述

Route::get('/sent', function(){

// 右側の送信部分

});

Route::get('/recieve', function(){

return <<<HTML

// 左側の受信部分

HTML;

});

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への送信部分を作る(イベントクラスを定義して、インスタンス生成するだけ)

php artisan make:event pusher_sent

1	php artisan make:event pusher_sent

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

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

// implements ShouldBroadcastしないとpusher送信してくれない
class pusher_sent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    // インスタンス生成する時に、テキストを受け取り、pusher.comへ送信
    public $message;
    public function __construct($message)
    {
        $this->message = $message;
    }

    // チャンネル名・イベント名を指定
    public function broadcastOn()
    {
        //return new PrivateChannel('channel-name');
        // privateじゃなくてpublicにする
        return new Channel('my-channel');
    }
    public function broadcastAs()
    {
        return 'my-event';
    }
}

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;

use Illuminate\Queue\SerializesModels;

use Illuminate\Broadcasting\PrivateChannel;

use Illuminate\Broadcasting\PresenceChannel;

use Illuminate\Foundation\Events\Dispatchable;

use Illuminate\Broadcasting\InteractsWithSockets;

use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

// implements ShouldBroadcastしないとpusher送信してくれない

class pusher_sent implements ShouldBroadcast

{

use Dispatchable, InteractsWithSockets, SerializesModels;

// インスタンス生成する時に、テキストを受け取り、pusher.comへ送信

public $message;

public function __construct($message)

{

$this->message = $message;

}

// チャンネル名・イベント名を指定

public function broadcastOn()

{

//return new PrivateChannel('channel-name');

// privateじゃなくてpublicにする

return new Channel('my-channel');

}

public function broadcastAs()

{

return 'my-event';

}

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

Route::get('/sent', function(){
    // インスタンス生成するだけで、自動的にpusher送信してくれる
    event(new App\Events\pusher_sent('テストメッセージ'));
});

Route::get('/sent', function(){

// インスタンス生成するだけで、自動的にpusher送信してくれる

event(new App\Events\pusher_sent('テストメッセージ'));

});

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受信処理が記述されているが、コメントアウトされているのでコメントインする

import Echo from 'laravel-echo'

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    encrypted: true
});

import Echo from 'laravel-echo'

window.Pusher = require('pusher-js');

window.Echo = new Echo({

broadcaster: 'pusher',

key: process.env.MIX_PUSHER_APP_KEY,

cluster: process.env.MIX_PUSHER_APP_CLUSTER,

encrypted: true

});

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

$(document).ready(function() {
    //受信するチャネル名・イベント名を指定＆処理を記述
    window.Echo.channel('my-channel')
        // イベント名の前にドットをつけるのを忘れずに！！
        .listen('.my-event', (e) => {
            console.log(e);
        });
});

$(document).ready(function() {

//受信するチャネル名・イベント名を指定＆処理を記述

window.Echo.channel('my-channel')

// イベント名の前にドットをつけるのを忘れずに！！

.listen('.my-event', (e) => {

console.log(e);

});

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

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

関連記事