ホーム > プログラミング > 他のユーザーがログイン中かどうかを表示するアプリを作る > 03. チャットページの作成

03. チャットページの作成

チャットページを作成します。チャットページに入室中のユーザーの一覧を表示しますが、まだ表示内容はダミーです。

チャット機能は作成しません
(ユーザー認証なし、誰でも参加できるチャットアプリを作成する方法の解説は、「Webチャットアプリを作る ( Laravel + Pusher ( Publicチャンネル使用 ) )」にあります。
ユーザー認証あり、認証されたユーザーのみが参加できるチャットアプリを作成する方法の解説は、「Webチャットアプリ(ユーザー認証あり)を作る ( Laravel + Pusher ( Privateチャンネル使用 ) )」にあります。)

解説

チャットページの表示について、すべきことは以下です。

前提

02. ユーザー認証機能の追加」を実施していない場合は、実施します。

空のページの作成

まず、空のページ(≒内容のほとんどないページ)を表示するコードを記述します。

チャットページ用のコントローラーの作成

以下のコマンドを実行し、「ChatController」という名前のコントローラーを作成します。

チャットページ用のコントローラーの編集

作成した「ChatController」の内容を編集します。

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



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



解説)

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

チャットページを表示するためのルーティングの編集

チャットページが表示されるように、ルーティングファイルを編集します。

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



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



解説)

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

ダッシュボードページ用のコントローラーの編集

ダッシュボードページからクリックしてチャットページに移動できるように、ダッシュボードページにリンク作成します。

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



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



解説)

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

空のページの動作確認

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

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

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

ブラウザで、以下のURLにアクセスする。
http://[テスト用のWebサーバーを起動したデバイスのIPアドレス]:8000



ログインするとダッシュボードページが表示される。

「Chat」をクリックします。



「chat」と表示されるページが表示されます。

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

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

入室中のユーザーの一覧の表示

続いて、作成した空のページの内容として、入室中のユーザーの一覧の表示を追加します。

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

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



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



解説)

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

コントローラーの編集

作成したチャットページ用のテンプレートファイルが表示されるようにコントローラーを書き換えます。

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



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



解説)

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

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

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

チャットページの動作確認

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

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

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

ブラウザで、以下のURLにアクセスします。
http://[テスト用のWebサーバーを起動したデバイスのIPアドレス]:8000/chat



ダミーの入室中のユーザーの一覧が表示されます。

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

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

関連ページ

前項目:02. ユーザー認証機能の追加

次項目:04. Pusherチャンネルの作成


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


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