04. Pusherチャンネルへの接続

作成したPusherチャンネルに接続するためのコードを記述します。

解説

Pusherチャンネルへの接続について、すべきことは以下です。

• ブロードキャストサービスプロバイダを登録するコードをアンコメントする。
• 「Pusher Channels PHP SDK」をインストールする。
• Pusherチャンネルの利用資格情報を設定する。
• 「Laravel Echo」「Pusher-js」をインストールする。
• Laravel Echoのインスタンスを生成するコードをアンコメントする。
• チャットページ用のテンプレートファイルを編集し、cssファイルとjsファイルの読み込みに関するコードを追加する。
• cssファイルとjsファイルをリビルトする。

前提

「03. Pusherチャンネルの作成」を実施していない場合は、実施します。

サーバー側の対応

ブロードキャストサービスプロバイダを登録するコードのアンコメント

サーバー側では、メッセージをPusherチャンネルに送信します。
メッセージのPusherチャンネルへの送信は、Laravelのイベントのブロードキャストの機能を利用します。

Laravelのイベントのブロードキャストの機能を利用するためには、ブロードキャストサービスプロバイダを登録する必要があります。
ブロードキャストサービスプロバイダを登録するコードは、既に記述されていますが、コメントアウトされています。
ブロードキャストサービスプロバイダを登録するコードをアンコメントします。

以下のコマンドを実行し、「config/app.php」ファイルを開きます。

nano config/app.php

以下を探します。

'providers' => [ （・・・略・・・） /* * Application Service Providers... */ App\Providers\AppServiceProvider::class, App\Providers\AuthServiceProvider::class, // App\Providers\BroadcastServiceProvider::class, App\Providers\EventServiceProvider::class, App\Providers\RouteServiceProvider::class, ],

以下のように書き換えます。

'providers' => [ （・・・略・・・） /* * Application Service Providers... */ App\Providers\AppServiceProvider::class, App\Providers\AuthServiceProvider::class, App\Providers\BroadcastServiceProvider::class, App\Providers\EventServiceProvider::class, App\Providers\RouteServiceProvider::class, ],

解説）
「App\Providers\BroadcastServiceProvider::class,」をアンコメントします。

「ctrl + o」を押下し、ファイルを上書き保存します。
「ctrl + x」を押下し、ファイルを閉じます。

「Pusher Channels PHP SDK」のインストール

Pusherチャンネルを使用してイベントをブローキャストするためには、「Pusher Channels PHP SDK」が必要です。

以下のコマンドを実行し、「Pusher Channels PHP SDK」をインストールします。

composer require pusher/pusher-php-server

Pusherチャンネルの利用資格情報の設定

Pusherチャンネルの利用資格情報を、環境変数に設定します。

以下のコマンドを実行し、「.env」ファイルを開きます。

nano .env

以下を探します。

PUSHER_APP_ID= PUSHER_APP_KEY= PUSHER_APP_SECRET= PUSHER_HOST= PUSHER_PORT=443 PUSHER_SCHEME=https PUSHER_APP_CLUSTER=mt1

以下のように書き換えます。

PUSHER_APP_ID=[Pusherチャンネルの app_id の値] PUSHER_APP_KEY=[Pusherチャンネルの key の値] PUSHER_APP_SECRET=[Pusherチャンネルの secret の値] PUSHER_HOST= PUSHER_PORT=443 PUSHER_SCHEME=https PUSHER_APP_CLUSTER=ap3

解説）

・PUSHER_APP_ID

pusher.comで作成したPusherチャンネルの「app_id」の値を代入するコードを記述します。

・PUSHER_APP_KEY

pusher.comで作成したPusherチャンネルの「key」の値を代入するコードを記述します。

・PUSHER_APP_SECRET

pusher.comで作成したPusherチャンネルの「secret」の値を代入するコードを記述します。

・PUSHER_HOST

（空のまま）

・PUSHER_PORT

（433のまま）

・PUSHER_SCHEME

（httpsのまま）

・PUSHER_APP_CLUSTER

pusher.comで作成したPusherチャンネルの「secret」の値である「ap3」を代入するコードに書き換えます。

続いて、ブロードキャストドライバを「pusher」に変更します。

以下を探します。

BROADCAST_DRIVER=log

以下のように書き換えます。

BROADCAST_DRIVER=pusher

解説）

・BROADCAST_DRIVER

「log」を「pusher」に書き換えます。

「ctrl + o」を押下し、ファイルを上書き保存します。
「ctrl + x」を押下し、ファイルを閉じます。

クライアント側の対応

「Laravel Echo」「Pusher-js」のインストール

クライアント側では、Pusherチャンネルに接続し、Pusherチャンネルから送信されるメッセージを待ち受けます。
Pusherチャンネルから送信されるメッセージの待ち受けは、JavaScriptライブラリ「Laravel Echo」を利用します。「Laravel Echo」を利用するには、「pusher-js」も必要です。

以下のコマンドを実行し、JavaScriptライブラリ「Laravel Echo」と「pusher-js」をインストールします。

npm install --save-dev laravel-echo pusher-js

Laravel Echoのインスタンスを生成するコードのアンコメント

Laravel Echoを利用するためには、Laravel Echoのインスタンスを生成する必要があります。
Laravel Echoのインスタンスを生成するコードは既に記述されていますが、コメントアウトされています。
Laravel Echoのインスタンスを生成するコードをアンコメントします。

以下のコマンドを実行し、「resources/js/bootstrap.js」ファイルを開きます。

nano resources/js/bootstrap.js

以下を探します。

// import Echo from 'laravel-echo'; // import Pusher from 'pusher-js'; // window.Pusher = Pusher; // window.Echo = new Echo({ // broadcaster: 'pusher', // key: import.meta.env.VITE_PUSHER_APP_KEY, // wsHost: import.meta.env.VITE_PUSHER_HOST ?? `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`, // wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80, // wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443, // forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https', // enabledTransports: ['ws', 'wss'], // });

以下のように書き換えます。

import Echo from 'laravel-echo'; import Pusher from 'pusher-js'; window.Pusher = Pusher; window.Echo = new Echo({ broadcaster: 'pusher', key: import.meta.env.VITE_PUSHER_APP_KEY, //wsHost: import.meta.env.VITE_PUSHER_HOST ?? `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`, //wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80, //wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443, forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https', //enabledTransports: ['ws', 'wss'], cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER, });

解説）

・概要

コメントアウトされているLaravel Echoのインスタンス生成処理をアンコメントします。

・wsHost、wsPort、wssPort、enableTransports

Pusherを使用する際には必要ないので、コメントアウトします。Pusher互換のWebSocketパッケージ（laravel-websocketsやsoketi）を使用する際には必要となることがあります。

・cluster

Pusherを使用する際には必要なので、追記します。Pusher互換のWebSocketパッケージ（laravel-websocketsやsoketi）を使用する際には必要ないこともあります。

「ctrl + o」を押下し、ファイルを上書き保存します。
「ctrl + x」を押下し、ファイルを閉じます。

チャットページ

チャットページ用のテンプレートファイルの編集

チャットページ用のテンプレートファイルに、cssファイルとjsファイルの読み込みに関するコードを追加します。

以下のコマンドを実行し、チャットページ用のテンプレートファイルを開きます。

nano resources/views/chat.blade.php

内容を以下のようにします。

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Chat app</title> <!-- Styles&Scripts --> @vite(['resources/css/app.css', 'resources/js/app.js']) </head> <body> <h1>Chat app</h1> {{-- エンターキーによるボタン押下を行うために、 <button type="button">ではなく、<form>と<button type="submit">を使用。 ボタン押下(=submit)時にページリロードが行われないように、 onsubmitの設定の最後に"return false;"を追加。 (return false;の結果として、submitが中断され、ページリロードは行われない。）--}} <form method="post" action="" onsubmit="return false;"> ニックネーム : <input type="text" id="input_nickname" autocomplete="off" /> <br /> メッセージ : <input type="text" id="input_message" autocomplete="off" /> <button type="submit">送信</button> </form> <ul id="list_message"> <li><strong>太郎</strong><div>こんにちは</div></li> <li><strong>次郎</strong><div>ハロー</div></li> <li><strong>三郎</strong><div>こんばんわ</div></li> </ul> </body> </html>

解説）
「head」部に、「@vite(['resources/css/app.css', 'resources/js/app.js'])」を追記します。

「ctrl + o」を押下し、ファイルを上書き保存します。
「ctrl + x」を押下し、ファイルを閉じます。

cssファイルとjsファイルのリビルト

以下のコマンドを実行し、cssファイルとjsファイルをリビルドします。

npm run build

動作確認

Pusher.comの「Debug console」にアクセス

Pusher.comにアクセス。Sign inし、作成したチャンネルのページに移動します。
画面左のナビゲーションメニューの「Debug console」をクリックします。
「Debug console」画面を表示しておきます。

テスト用のWebサーバーの起動

以下のコマンドを実行し、テスト用のWebサーバーを起動します。

php artisan serve --host 0.0.0.0

チャットページにアクセス

「Debu console」画面を表示しているブラウザとは別に、ブラウザをもう一つ立ち上げ、以下のURLにアクセスします。
http://[テスト用のWebサーバーを起動したデバイスのIPアドレス]:8000/chat



「メッセージ入力フォーム」と「（ダミーの）メッセージリスト」が表示されます。

Pusher.comの「Debug console」の確認

表示していた「Debug console」画面を確認します。



チャットページのアクセスの結果として、「Debug console」に、「Connection」イベントが表示されます。

テスト用のWebサーバーの終了

動作を確認したら、「ctrl + c」を押下し、起動した開発用のWebサーバーを終了します。

参考

• Build a chat app with Vue.js and Laravel
• ブロードキャスト 9.x Laravel

関連ページ

前項目：03. Pusherチャンネルの作成

次項目：05. チャットメッセージの送信