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

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

前回は、チャットにアクセスしたユーザーのリストを画面に表示する処理を実装しました。

そろそろWebSocketsにも慣れてきたのではないでしょうか。

前回と同じ要領で、メッセージを表示する機能を実装したいと思います。

前回

メッセージ表示機能の実装

チャットからメッセージを送信後、サーバー側で全ユーザーにメッセージをブロードキャストし、チャット上にそれを表示させます。

ここからメッセージを送る

メッセージを送信する

最初に、チャットからメッセージを送信する機能を実装します。

これで、メッセージボックスにメッセージを入力し、Enterを押下するとメッセージが送信されるようになりました。

送信ボタンを押下した時もメッセージを送れるようにbuttonタグを編集します。

また、jsonDataに設定しているパラメータ(usernameなど)は、サーバー側のconnect.goに定義したペイロード構造体に合わせています。

メッセージをbroadcastする

handlers.goのListenToWsChannel関数にboradcastのハンドリング処理を実装します。

メッセージを表示する

メッセージをチャット上に表示する処理を実装します。

まずは、チャットエリアの情報を取得しましょう。

次に、WebSocketsのonmessageにbroadcastのハンドリングを追加します。

動作確認

動作確認をしてみましょう。

下記のコマンドで、サーバーを起動してください。

次にブラウザを2つ開いて、それぞれ「http://localhost:8080」へアクセスし、ユーザー名を入力してからメッセージを送信してみましょう。

いい感じですね。

サーバーリコネクト機能

メッセージ送信・表示機能の実装が完了したので、本記事の目的は達成したのですが、おまけで追加の機能を実装しておきましょう。

サーバーを再起動などすると全てのユーザーのコネクションは、当然ながら切れてしまいます。そして、それは何かと不便なため、サーバーへリコネクトする機能を実装しましょう。

joewalnes/reconnecting-websocket」を使用すると簡単に実装できます。

ソースコードをダウンロードすると「reconnecting-websocket.min.js」ファイルが格納されているので、それをstaticフォルダに格納してください。

それから、格納したファイルをhome.jetファイルから読み込みます。

必ず、scripts.jsより前に読み込んでください。

GitHubのREADME.mdを読むとWebSocketsオブジェクトの生成方法を次のように変更すれば、使えるようです。

scritps.jsを修正します。

これだけで再接続してくれるようになるので、めちゃくちゃ便利ですよね。

一度、サーバーをCtrl + cでストップし、「go run cmd/web/*.go」コマンドで立ち上げなおすと、動作を確認することができます。

「connection closed」->「Successfully connected」になっているので、リコネクト成功です。

おわりに

WebSocketsは、本当に便利ですね。

今回のような非同期通信で、チャットアプリケーションの実装も簡単にできますし、Push通知機能なんてのもできるかもしれません。

アプリケーション開発の幅がかなり広がると思います^^

それでは、また!

Go記事まとめ

コメントを残す