
今回のチャットアプリ開発に使用するWebSocket、またSTOMPの概要についてご説明します。
WebSocket、またSTOMPが、今回開発するチャットアプリにどう関わってくるのか、その仕組みについて押さえることで、ハンズオン実施時に自分が今アプリ全体のどの部分を開発しているのか迷わず実装できるよう、またハンズオンを実施しながら理論と実装の関係について理解が深められるようにしていきます。
WebSocketの仕組みを使って、実際に複数の参加者でリアルタイムにグループチャットを行うアプリケーションの サーバサイド開発の第一歩として、Spring Bootプロジェクトの雛型作成を行います。
WebSocketエンドポイントや、リアルタイムでメッセージのやり取りを行う仲介役としての、メッセージブローカーの設定処理実装を通じて、 今後クライアントサーバー間でチャットを行う前提の、WebSocket通信の土台を整備します。
チャット機能開発のはじめの一歩として、チャットを行う際にやり取りするメッセージのタイプを管理するMessageTypeを実装していきます。
チャット機能開発第二弾として、前回実装したMessageTypeを踏まえて、メッセージのフォーマットを規定する、ChatMessageを実装していきます。
チャット機能開発最終章として、前回実装したChatMessageのフォーマットで、クライアントから送信されたメッセージを取得し、メッセージブローカー内のトピックに登録する、チャットメッセージのコントロール役としてChatControllerを実装していきます。
サーバサイド編の締めくくりとして、WebSocketセッションの切断を検知する、イベントリスナー機能を実装していきます。
クライアントサイド編の初めの一歩として、HTMLファイルの雛型を元に、チャットルームに参加するための、ユーザー名入力ページのHTMLを作成し、最終的にそのレイアウトを確認するところまで行っていきます。
クライアントサイド編の第二弾として、チャットページのHTMLを作成し、最終的にそのレイアウトの概要を確認するところまで行っていきます。
クライアントサイド編の第三弾として、ユーザー名入力ページのチャットルーム参加イベントに紐付く処理を、JavaScriptで実装していきます。
実装の最終章として、チャットページのメッセージ送信処理やメッセージ読込処理をJavaScriptで実装していきます。
これまで開発してきたチャットアプリを起動し、実際に複数人でリアルタイムチャットする簡単なデモを実施します。
<コースの概要>
本コースはご自身のPCを使用してWebSocket・STOMPとSpring Bootによるリアルタイムチャットアプリ開発ハンズオンを実施します。WebSocket・STOMPとは、Pub/Subとはから始まり、Java/Spring Bootによるサーバサイド開発(通信設定機能/チャット機能/イベントリスナー機能)、HTML/CSS/Bootstrap/JavaScript/jQueryによるクライアントサイド開発(ユーザー名入力ページ/チャットページ)、ユーザー体験価値向上のためのシングルページアプリケーション(SPA)/エラーハンドリング実装を通じて、リアルタイムチャットアプリ開発を実践的に学ぶことができます。
<他教材との違い>
本コースと他教材(書籍やYoutube動画教材等)との違いは以下の通りです。
・1本完結型コースであるためご自身でネット検索やマニュアル確認等を行う手間がかからない。
・WebSocket・STOMPとは何か、なぜその手順で設定するのか等、解説する技術や手順一つとってもその理由や背景を詳細に説明しているため途中で止まらずに受講できる。
・全レクチャー動画ダウンロード可能なため、場所を問わずどこからでも受講できる。
・全ハンズオンに完成版のコード等を添付しているため、コーディングミスによる原因調査等、余計な手間がかからない。
<コースの内容>
本コースの内容は以下の通りです。
コース概要
本コース受講にあたって
自己紹介
本コースのねらい
WebSocketハンズオン
概要編1 WebSocket・STOMPとは
概要編2 リアルタイムチャットアプリの仕組み
サーバサイド編1 Spring Bootアプリケーション雛型作成
サーバサイド編2 通信設定機能(ConnectionConfig実装)
サーバサイド編3 チャット機能(MessageType実装)
サーバサイド編4 チャット機能(ChatMessage実装)
サーバサイド編5 チャット機能(ChatController実装)
サーバサイド編6 イベントリスナー機能(ConnectionEventListener実装)
クライアントサイド編1 ユーザー名入力ページ(HTML作成)
クライアントサイド編2 チャットページ(HTML作成)
クライアントサイド編3 ユーザー名入力ページ(JavaScript実装)
クライアントサイド編4 チャットページ(JavaScript実装)
リアルタイムチャット確認
ボーナスレクチャー
ボーナスレクチャー
<参考文献>
[1] Chat Room Project using Spring Boot Web Socket step by step [Hindi]
<サイト名: Learn Code With Durgesh>
[2] Building a chat application with Spring Boot and WebSocket
<サイト名: CalliCoder>