Webアプリを実際に構築してサーバーにデプロイして公開してみましょう。
サンプルWebアプリとして、JavascriptとPHPで簡易なHTTPサーバーに設置するだけで動作する、リアルタイムチャットアプリを作ってみました。
Webアプリのプログラムは、サンプルをGithubにアップしているので、cloneして誰でも簡単に使う事ができます。
Webアプリを作って、公開するという手順の理解と、その体験をしてもらう事が目的なので、今回紹介するチャットアプリ以外のプログラムを使ってもらっても構いませんが、
今回はWebアプリの構築についての解説も含めて学習を進めていきたいと思います。
チャットアプリ : SimpleChat
Github
https://github.com/yugeta/simple_chat
ローカルの任意の場所で次のコマンドを打ち込んで、Githubからプログラム一式をダウンロードしてください。
git clone https://github.com/yugeta/simple_chat.git
こちらに全てのサンプルプログラムの完成コードが入っています。
構造の説明
dockerフォルダ
ローカル環境で実行できるようにdocker-composeでコンテナを構築しています。
（
Nginx + PHP8.1で構成されています。）
起動方法は、以下のコマンドで実行できます。
cd docker
docker compose up -d
※もし初回エラーが出るようなら、次のコマンドを実行してから、上記のdockerコマンドを実行してください。
docker compose build
以下のURLでアクセスすると、チャットアプリが表示されます。
http://localhost:8888/
srcフォルダ
プログラム一式が入っています。
dockerを起動すると、アクセスのルートディレクトリがこのフォルダになります。
チャットツールについて
今回作成したチャットツールを立ち上げると（ブラウザアクセスすると）、次のような画面が表示されます。
自分の名前を入力して、「送信」を押すと簡単にログインできます。
※今回は、サンプルプログラムなので、セキュリティなどは考慮していません。
Googleログインなどと連携すると、セキュリティレベルの高いチャットツールにもバージョンアップする事ができますね。
チャット画面
最初は、コメントは何も書かれていませんが、発言フォームと、会話一覧の画面が表示されます。
logoutボタンを押すと、退出できますが、同じ名前でログインすることで、自分のチャットデータを保持する事ができます。
※別のユーザーが同じ名前でログインする制御は作っていないので、厳密なユーザーログイン認証を行いたい場合は、OAuthや、メールアドレスなどと連携した独自ログインシステムを構築する必要があります。
チャットの使い方
説明など必要ないと思いますが、画面上部のテキスト入力エリアに、文字を入力して、「送信」ボタンを押すと、チャットの会話画面に、自分の発言が表示されます。
同時に、同じURLにアクセスしているユーザーの画面も自動更新されます。
チャットルームについて
今回のサンプルツールでは、ルームの概念などは入れていないため、全てdata/chat.logにjson形式（複数行記述方式）でデータが追記されていきます。
ルームの概念を入れると、いろいろなユーザーが独自のルームに対応するチャットシステムを構築することも可能なので、改造してみると、いろいろな場面で流用できるツールにもなり得ますね。
簡単解説
本来チャットシステムを作ろうと思ったら、ポーリングという技術を使って、NodejsやPythonなどのサーバー側でのデータ待受処理環境を構築する必要があるのですが、今回はjavascriptで更新データの確認を行う仕様で簡易に行なっています。
要するに数秒おきに、サーバーに問い合わせをして、最終書き込みが更新されていたら、追記分のデータを取得して表示更新する仕様でソレっぽくしています。
リアルタイムと言っていますが、実際は、3秒間隔でサーバー問い合わせを行なっているので、少しタイムラグを感じるかもしれません。
もし、大人数でこのチャットシステムを使いたい場合は、3秒を5秒や10秒に変更する事でサーバー問い合わせの頻度を減らす事ができるので、調整してもらうといいかと思います。
今回のプログラムソースを、プログラミングに慣れていない人が見るとファイル数も多く、classでの処理構築がわかりにくいかもしれませんが、極めてシンプルなコードで書いているので、読めるようになると、webアプリの作成自体のプログラミングも難なく行えるようになるでしょう。
このプログラムを理解して学習したい人は、次のポイントでソースをみてもらうといいかと思います。
・ログイン、ログアウト処理
・トーク部分のHTML構造をasset/talk.htmlのファイルで統一しているので、convert.jsと、asset.jsの組み合わせ処理
・チャットの送受信や初期設定などを行なっている、text.js
・cssによる、HTML構造のデザイン表示処理
・PHPのデータ読み書き処理と、main.phpによるエンドポイント処理
あとがき
今回のプログラムは、4時間ほどで作成して、Githubにアップできました。
正直、表示デザインなどはあまりこだわらず、見た目は置いといて機能重視で構築しました。
ユーザーアイコン画像の登録や、色バリエーション、ユーザー認証など、こだわれば色々と手を入れたくなる箇所はありましたが、
Webアプリの構築サンプルとしては、十分だと思います。
0 件のコメント:
コメントを投稿