Zenn
👻

Gorilla WebSocketを実装してみた

2024/10/21に公開
Go
WebSocket
gorillawebsocket
tech

はじめに

Gorilla WebSocketとはGo言語用のWebSocketライブラリの一つで、リアルタイム通信を容易に実装するための機能を提供しています。簡単にWebSocketができるライブラリです。

実装例

今回はフォームで入力されたテキストをそのままWeb画面に表示するというシンプルな実装です。

main.go
package main

import (
	"fmt"
	"net/http"

	"github.com/gorilla/websocket"
)

// WebSocketのアップグレーダーを定義
var upgrader = websocket.Upgrader{
	// オリジンをチェックするための関数
	CheckOrigin: func(r *http.Request) bool { return true },
}

// WebSocket接続を処理する関数
func handleConnections(w http.ResponseWriter, r *http.Request) {
	// 初期のGETリクエストをWebSocketにアップグレード
	ws, err := upgrader.Upgrade(w, r, nil)
	if err != nil {
		fmt.Println(err)
		return
	}
	defer ws.Close()

	for {
		// ブラウザからメッセージを読み込む
		_, msg, err := ws.ReadMessage()
		if err != nil {
			fmt.Println("読み込みに失敗しました:", err)
			break
		}
		fmt.Printf("入力内容: %s\n", msg)

		// ブラウザにメッセージを送り返す
		if err := ws.WriteMessage(websocket.TextMessage, msg); err != nil {
			fmt.Println("書き込みに失敗しました:", err)
			break
		}
	}
}

func main() {
	http.HandleFunc("/ws", handleConnections)
	// もし暗号化通信で行う場合、http.ListenAndServeTLSで
	// SSL証明書のパスと秘密鍵ファイルのパスを指定する必要がある
	fmt.Println("WebSocket server started on :8080")
	err := http.ListenAndServe(":8080", nil)
	if err != nil {
		fmt.Println("ListenAndServe:", err)
	}
}
websocket-client.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>WebSocket</title>
</head>
<body>
    <h2>WebSocket</h2>
    <input type="text" id="messageInput" placeholder="メッセージを入力" />
    <button onclick="sendMessage()">送信</button>
    <pre id="messages"></pre>

    <script>
        let socket = new WebSocket("ws://localhost:8080/ws");

        socket.onopen = function(event) {
            document.getElementById("messages").textContent += "WebSocket接続中\n";
        };

        socket.onmessage = function(event) {
            document.getElementById("messages").textContent += "入力内容: " + event.data + "\n";
        };

        socket.onclose = function(event) {
            document.getElementById("messages").textContent += "WebSocket未接続\n";
        };

        function sendMessage() {
            let message = document.getElementById("messageInput").value;
            socket.send(message);
            document.getElementById("messageInput").value = "";
        }
    </script>
</body>
</html>

最後に

今後はwssで暗号化してちゃんとした実装を行いたい。
また、メッセージやり取りといったチャットのロジックなどの実装も行っていきたい。

Discussion