やりたいこと

サーバーとクライアントでメッセージをキャッチボールする。

・・・のを WebSocket を使ってやります。

~~これくらいなら ajax とかでいい感じもしますが、、、~~

WebSocket とは？

下記の資料がわかりやすかったです。

理解した感じでざっくり説明すると、
Webのアクセスは、キャッチボールみたいな感じで

ブラウザ「〇〇のページをちょうだい」（要求）

サーバー「はいよ！」（応答）

で接続が切れてしまうのですが、

WebSocket を使用すると電話のように常時つなぎっぱなしにできます。

利点としては、先ほどのキャッチボールを始める前に
いろいろな前処理がなくなるので応答が早くなります。

リアルタイム性を求めるものによく使われている感じですね。

クライアント側

まずは投げるほうを実装してみます。

今回は webブラウザから投げるようにしようと思います。

JavaScript 側で WebSocket が使えるようになっているので、
いたせりつくせりです。。。

ページのJavaScript部分を切り出すとこんな感じ↓

      var socket = null;

      // サーバーに接続する (一連の処理)
      window.onload = function () {
        socket = new WebSocket("ws://localhost:3000/ws");
        socket.onopen = function () {
          append_message("system", "connect to server");
        };
        socket.onmessage = function (event) {
          // サーバーからメッセージを受け取る
          append_message("server", event.data);
        };
      };

      // メッセージ欄を更新する
      function append_message(name, message) {
        let li_name = document.createElement("li");
        let name_txt = document.createTextNode(name);
        li_name.appendChild(name_txt);

        let ul_message = document.createElement("ul");

        let li_message = document.createElement("li");
        let message_txt = document.createTextNode(message);
        li_message.appendChild(message_txt);

        ul_message.appendChild(li_message);

        li_name.appendChild(ul_message);

        let ul = document.getElementById("messages");
        ul.appendChild(li_name);
      }

      // サーバーにメッセージを送信する
      function send() {
        let send_msg = document.getElementById("message");
        let msg = send_msg.value;
        if (msg == "") {
          return;
        }
        socket.send(msg);
        append_message("you", msg);
        send_msg.value = "";
      }

window.onload でページが読み込まれたら、サーバーにアクセスしにいきます。
socket = new WebSocket("ws://localhost:3000/ws");というところで
socketというものを軸にやりとりできます。

socket.onopen で初回アクセス時に走る処理が書けます。
socket.onmessage でサーバーから投げ返されてきたものが入ってきます。

append_message() は、ページの表示を変更するときに使います。

send() は、メッセージをサーバーに送信するときに使います。
送るときは、socket.send("文字")で送れます。

ページ部分はこんな感じ

index.tmpl

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>sample</title>
    <script type="text/javascript">
      // script(↑に記載してるもの)
    </script>
  </head>
  <body>
    <!-- 送信欄 -->
    <p>メッセージを入力してください。</p>
    <input type="text" id="message" /><button onclick="send()">送信</button>

    <!-- メッセージ欄 -->
    <p>メッセージ一覧</p>
    <ul id="messages"></ul>
  </body>
</html>

しんぷる！

サーバー側

ページからアクセスされるときに返したり、WebSocket接続の受け口を作ります。

package main

import (
	"embed"
	"fmt"
	"log"
	"net/http"
	"text/template"

	"golang.org/x/net/websocket"
)

//go:embed index.tmpl
var indexTmpl embed.FS

func main() {
	http.HandleFunc("/", index)
	http.Handle("/ws", websocket.Handler(msgHandler))

	err := http.ListenAndServe(":3000", nil)
	if err != nil {
		log.Fatal(err)
	}
}

func index(w http.ResponseWriter, r *http.Request) {
	tmpl, err := template.ParseFS(indexTmpl, "index.tmpl")
	if err != nil {
		log.Fatal(err)
	}
	err = tmpl.Execute(w, "")
	if err != nil {
		log.Fatal(err)
	}
}

func msgHandler(ws *websocket.Conn) {
	defer ws.Close()

	// 初回のメッセージを送信
	err := websocket.Message.Send(ws, "こんにちは！ :)")
	if err != nil {
		log.Fatalln(err)
	}

	for {
		// メッセージを受信する
		msg := ""
		err = websocket.Message.Receive(ws, &msg)
		if err != nil {
			log.Fatalln(err)
		}

		// メッセージを返信する
		err := websocket.Message.Send(ws, fmt.Sprintf(`%q というメッセージを受け取りました。`, msg))
		if err != nil {
			log.Fatalln(err)
		}
	}
}

websocket.Message.Receive() で送信されてきたメッセージを受信して
websocket.Message.Send() でクライアント側に送信する。

試してみる

go build で exe を作って実行する。

ページアクセス時

「ほげほげ」メッセージを送信すると・・・

そのままの言葉を返してくれる感じです。

送信したあと、ラグがなくてパっと返ってきます。

ブラウザの開発者ツールで見てみると、WebSocketで接続されているのがわかります。

まとめ

ほんとさわりだけでしたが、WebSocketを触れることができました。

リアルタイムな処理が必要になるときは検討してみるとよいかもしれませんね！
ぜひ使ってみてくださいね～。