[Go言語/JavaScript]WebSocketsでチャットアプリを実装!~ユーザーリスト表示編~

こんにちは。KOUKIです。
Go言語とJavaScriptでチャットアプリの作成方法を記事にしています。

前回は、Go言語側ではWebSocketsのエンドポイントを、JavaScript側ではWebSocketsオブジェクトをそれぞれ作成し、コネクションの確立をしました。

今回は、チャットに参加したユーザーのリストをページに表示する機能を作成します。

前回

ユーザーのリストアップ

YOUR NAMEの横にあるボックスには、チャットに参加したユーザーの一覧を表示します。

USER NAMEのボックスに名前を入れた時、サーバー側へユーザー名を送信し、オンライン中の全てのユーザーに新しいユーザーが参加したことを伝えます。

ユーザー名をWebSocketsで送信する

WebSockets経由で、ユーザー名をサーバー側へ送信します。

scripts.jsに以下の処理を追加しましょう。

actionやusernameは、サーバー側で定義した以下の構造体に合わせています。

usernameアクションをハンドリング

ブラウザからusernameアクションを受け取れるようになったので、handlers.goに以下の機能を追加します。

ListenToWsChannel関数は、前回作成した関数です。
switch文の「username」ケースは、先ほどJavaScriptで設定したusername Actionに紐づいています。

新しく追加したgetUserList関数では、clients変数に格納したユーザー情報を全て取得し、ブロードキャストします。初回コネクション時(ページを開いた時)は、ユーザー名が空の状態で渡される為、その場合は処理をスキップします。

レスポンスにユーザーリストを含める

レスポンス構造体にユーザーリスト情報を持たせましょう。

ユーザーリストの表示

scripts.jsのonmessageメソッドを以下のように書き換えます。

先ほど、サーバー側でアクション(response.Action = “list_users”)を定義しました。そのため、switch文でlist_usersケースを定義しています。

そして、HTMLのul要素にユーザーリストを追加するため、li要素をcreateElementメソッドで作成しています。

createElementメソッドなどの使い方は、アプリケーション実装記事でよく使っているので、よかったら参考にしてください。

動作確認

アプリを再起動し、ブラウザから「http://localhost:8080/」にアクセスして、動作確認しましょう。

Self Note(ユーザー名)を打ち込んだらリストに表示されたので、OKですね。

バグの修正

一見、問題なく動作しているように見えますが、バグがあります。

下記の画像は、ページを開いて「firstUser」と打ち込んだあと、ページをリロードして、再度「firstUser」を打ち込んだ時のものです。

firstUserが重複している

見ての通り、同一ページにも関わらず「firstUser」が重複して表示されています!

このバグを修正します。

原因

サーバー側の出力をよく見たら「failed websocket connection」と表示されていますね。

ページをリロードした時に、別のWebSocketsコネクションを貼りにいくため、上記のエラーが表示されます。複数のコネクションをサーバー側で保持しているわけですね。

対策

ページをリロードした時に、ユーザーをleave(退室状態)にすることで、この事象を回避します。

ページ離脱時にleftアクションを設定

scripts.jsに、画面離脱時に「left」アクションを実行する処理を書きます。

これで、ユーザーが退室したことをサーバーに知らせることができます。

leftアクションのハンドリング

次に、handlers.goのListenToWsChannel関数にleftアクションをハンドリングする処理を実装します。

wsChanからユーザーのコネクション情報が渡されるので、組み込み関数のdeleteでmapから削除すればOKです。

サーバーを立ち上げ直し、ブラウザのキャッシュクリア(念の為)をしてから、再度試してみてください。

次回

次回は、メッセージの送受信機能を実装していきます。

それでは、また!

Go記事まとめ

コメントを残す