ホーム > プログラミング > Webチャットアプリを作る > 04. Pusherチャンネルへの接続

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

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

解説

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

前提

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

サーバー側の対応

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

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

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

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



以下を探します。



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



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

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

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

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

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

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

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

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



以下を探します。



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



解説)

・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」を「pusher」に書き換えます。

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

クライアント側の対応

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

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

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

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

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

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



以下を探します。



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



解説)

・概要
コメントアウトされている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ファイルの読み込みに関するコードを追加します。

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



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



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

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

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

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

動作確認

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

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

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

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

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

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



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

Pusher.comの「Debug console」の確認

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



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

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

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

参考

関連ページ

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

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


ご意見、ご感想、ご質問、ご要望等は、「コメントを投稿する」もしくは「ホーム > コンタクト」よりお願いいたします。
内容の誤り、誤字脱字、リンクミスなどの問題点を発見された場合には「コメントを投稿する」もしくは「ホーム > コンタクト」より連絡していただけると幸いです。


Copyright (c) 2005-2018 Nobuki HIRAMINE All rights reserved.