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

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

解説

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

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

前提

「04. 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ファイルのリビルト

以下のコマンドを実行し、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

関連ページ

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

次項目：06. チャットルームへの入室の情報発信