記事を書いた経緯
SpringBootでチャットを作りたかったので、ネットで「SpringBoot チャット」で調べると、WebSocketを使った記事しか出てきませんでした。WebSocketは簡単にチャットを作れていいのですが、その反面、カスタマイズのしにくさを私は感じました。例えば、「チャットの相手のPCがチャット画面を開いたままスリープに入ったときに自分が送ったメッセージを、相手のPCがスリープから復帰した後にどう受信させるか？」などです。
そこで私は数日間考えたのですが、その結果、「WebSocketを使わなくてもチャットは作れるじゃん！」と気づき、実際に最低限の機能を実装できました。
この記事は、私と同様な悩みを持っている方に届けばいいなと思い、書きました。
概要
SpringBootでDMができるチャットアプリを作りました。
このチャットアプリの特徴は、WebSocketを使っていない点です。HTTPメソッドのGETとPOSTのみで作りました。作りが単純なので、カスタマイズしやすいと思います。
デモ
デモの見どころとしては、
- 24秒あたりからチャットのデモが始まります
- 1分27秒あたりでは、自動的に画面がスクロールします
- 1分33秒あたりでは、チャットルームを一度閉じて、再度チャットルームを開くことで、メッセージが保存されていることを確かめています
ソースコード
データベースを作るためのSQLも同じ場所にアップロードしています。
機能
実装した機能としては以下のようなものがあります。
- ユーザー登録
- ログイン
- チャット
チャットをする仕組み
仕組みは単純で、ユーザーがチャット画面に到達すると、1秒毎に非同期のPOSTで新着メッセージを取ってきています。クライアント側の処理は、ソースコードのchat.htmlとchat.jsを、サーバー側の処理はMessageController.javaのrecieve()というメソッドを見ると分かりやすいと思います。
まず、クライアントは新着メッセージを貰うために、チャット相手のIDと自分が最後に受信したメッセージの送信日時（まだ何もメッセージを受信していない場合はnull）というような情報をサーバーに渡します（下図の①）。
サーバーは渡された情報をもとにデータベースを調べ、新着メッセージのリストを返します（下図の②）。
苦労した点
ロジックは以外にも簡単にできました。一方で、HTMLやCSSの知識に乏しいため、チャット画面のUIは苦労しました。チャット画面のUIには、以下の記事を参考にしました。
今後、実装していきたい機能
- ユーザーが一覧できる画面で、LINEのような未読件数の分かる機能
- アイコンや名前などのユーザー情報を変更できる機能
- 全メッセージを保持するテーブルでの検索の回数を減らす機能