[Go言語/JavaScript]ハンズオンで作る掲示板アプリ!~投稿機能実装編~

こんにちは、 KOUKIです。

本記事では、掲示板アプリ開発のプロセスをハンズオン形式で記事にしています!

前回は、WebSocketsコネクションの確立処理を実装しました。

今回は、投稿機能の実装をしていきたいと思います。

前回

まとめページ

投稿機能に必要なこと

投稿機能を実装するために、以下の作業が必要になります。

実装に必要なこと 1. ユーザーアクセス機能の作成
2. ユーザー退室機能の作成
3. 投稿機能の作成
4. コネクト機能の作成

ユーザーアクセス機能の作成

ユーザー名を入力したら、WebSocketsコネクションにユーザー名を紐付たいと思います。

usernameアクションの送信

scripts.jsに、以下の機能を実装します。

これで、ユーザー名をサーバへ送信することができるようになりました。

jsonDataのパラメータは、connect.goに定義したpayloadに合わせています。

sendメソッドは、Websocketsを介してデータをサーバー側へ送れます。

JSON.stringifyは、JavaScriptのオブジェクトをJSONデータにします。

ユーザー名をWebSocketsコネクションに紐付ける

ユーザー名をブラウザから送信できるようになったので、次は、サーバー側でWebコネクションと紐づける処理を実装します。

handlers.goに以下の処理を実装します。

処理が途中なのでコメントアウトにしているところもありますが、今は無視してください。

大切なのは、payloadのActionをSwitch文で条件分岐している処理です。このようにActionを定義することで、実装が明確化して、わかりやすいコードになります。

今回は、「username」アクションを送信したので、その情報をclients変数のvalueに格納しました。これで、コネクション情報とユーザ名の紐付けが完了です。

ユーザー退室機能の作成

次は、ユーザーが退室した時の処理を実装します。

leftアクションの送信

sctipts.jsに次の処理を追加してください。

今回は、ページから離脱した時に、退室したことにしました。

WebSocketsコネクションを削除する

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

switch文のcaseに「left」を追加し、clients変数から対象のコネクションを削除しました。

投稿機能の作成

いよいよ投稿機能の作成に入ります。

投稿データを送信する

まずは、掲示板から投稿データをサーバー側へ送信できるようにしましょう。

scrripts.jsに以下の機能を追加します。

この処理により、投稿ボックスにデータを入力後「Enter」を押下することで、WebSockets経由で投稿データを送信することができるようになりました。

尚、jsonDataのパラメータに指定している値は、connect.goに定義しているものに合わせています。

「POST」ボタンを押下した時も、投稿データを送信できるようにしましょう。

HTMLのbuttonタグに「onclick=”sendPost()”」を追加します。

メッセージをブロードキャストする

次に、投稿データをブロードキャストしましょう。

handlers.goのListenToWsChannel関数に以下の修正を加えます。

クライアントから「broadcast」アクションの投稿データを送信しているので、上記のようにswitch文のcaseにbroadcastを指定しています。

broadcastToAllUser関数は、掲示板にアクセスしているユーザー全てに投稿データを送信することができる関数です。※前回の記事を参照してください

掲示板にメッセージを表示する

最後に、掲示板にメッセージを表示する処理を実装しましょう。

scripts.jsのsocket.onmessageメソッドに以下の処理を追加します。

サーバー側の処理と同じように、Switch文でアクションごとに処理を振り分けています。アクションを増やしたい時は、caseを追加していってください。

動作確認

動作確認をしましょう。

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

次に、ブラウザから「http://localhost:8080/」へアクセスし、掲示板から投稿してみましょう。

いい感じですね。

サーバーリコネクト機能(おまけ)

最後におまけとして、サーバーのリコネクト機能を実装します。

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

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

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

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

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

そして、scripts.jsのWebSocketsの作成を以下のように変更しましょう。

一度、サーバーをCtrl + cでストップし、 サーバーを立ち上げなおすと、動作を確認することができます。

サーバーを落としたあと「WebSocket connection to ‘ws://127.0.0.1:8080/ws’ failed」となり、立ち上げ直すと「Successfully connected」と表示されたので、リコネクト機能が正常に動作したことがわかりますね^^

おわりに

WebSocketsは、面白いですね。結構慣れてきたので、DBやクリーンアーキテクチャ、Reactなどを絡めてより高度なアプリケーションの作成にチャレンジしたいと思います^^

それでは、また!

Go記事まとめ

JavaScript記事まとめ

コメントを残す