WebSockets 在 Go 中的應用：從基礎到實踐

WebSockets 提供了一種強大的雙向通信方式，使客戶端（如 Web 瀏覽器）與服務器能夠實時交換數據。與傳統的 HTTP 請求 - 響應模型不同，WebSockets 允許全雙工通信，即客戶端和服務器可以隨時獨立發送和接收消息。因此，WebSockets 非常適合用於聊天應用、實時數據推送和交互式遊戲等場景。在本篇文章中，我們將使用 Gin 框架和 gorilla/websocket 庫，搭建一個簡單的 WebSocket 服務器，並實現 WebSocket 消息的收發。

WebSockets 基礎

WebSockets 通過客戶端與服務器之間建立的長連接進行通信。該連接由客戶端發起，通過一個特殊的 HTTP 請求向服務器請求升級（Upgrade），服務器同意後，即可建立 WebSocket 連接。一旦連接建立，雙方即可隨時互相發送數據，直到任意一方關閉連接。

使用 Gin 搭建 WebSocket 服務器

在 Gin 框架中，我們可以通過 websocket.Upgrader 將 HTTP 連接升級爲 WebSocket 連接。以下是 WebSocket 服務器的完整代碼：

首先我們先創建一個 go 項目，並安裝相關依賴，操作如下所示：

mkdir websocket-demo
cd websocket-demo/ && go mod init websocket-demo
go get -u github.com/gin-gonic/gin
go get -u github.com/gorilla/websocket

做完上述操作後我們鍵入下面的 go 代碼, 具體如下所示:

package main
import (
    "log"
    "net/http"
    "github.com/gin-gonic/gin"
    "github.com/gorilla/websocket"
)
// WebSocket升級器
var upgrader = websocket.Upgrader{
    CheckOrigin: func(r *http.Request) bool {
        return true // 允許所有來源的連接（生產環境請謹慎使用）
    },
}
// 處理WebSocket連接
func handleWebSocket(c *gin.Context) {
    conn, err := upgrader.Upgrade(c.Writer, c.Request, nil) // 升級 HTTP 連接爲 WebSocket
    if err != nil {
        log.Println("WebSocket Upgrade Error:", err)
        return
    }
    defer conn.Close()
    for {
        // 讀取客戶端發送的消息
        messageType, message, err := conn.ReadMessage()
        if err != nil {
            log.Println("Read Error:", err)
            break
        }
        log.Printf("Received: %s", message)
        // 發送消息回客戶端（回顯）
        err = conn.WriteMessage(messageType, message)
        if err != nil {
            log.Println("Write Error:", err)
            break
        }
    }
}
func main() {
    r := gin.Default()
    // WebSocket路由
    r.GET("/ws", handleWebSocket)
    log.Println("WebSocket 服務器啓動: ws://localhost:9527/ws")
    r.Run("localhost:9527")
}

代碼解析：

upgrader.Upgrade(c.Writer, c.Request, nil)：將 HTTP 連接升級爲 WebSocket 連接。
conn.ReadMessage()：讀取客戶端發送的消息。
conn.WriteMessage(messageType, message)：回顯消息到客戶端。

緊接着我們簡單寫個頁面，在前端建立 WebSocket 連接，操作如下所示:

我們可以使用 JavaScript 在瀏覽器端連接 WebSocket 服務器，併發送和接收消息。

<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Chat</title>
</head>
<body>
    <h2>WebSocket Chat</h2>
    <input type="text" id="messageInput" placeholder="輸入消息...">
    <button onclick="sendMessage()">發送</button>
    <ul id="messages"></ul>
    <script>
        var ws = new WebSocket("ws://localhost:9527/ws");
        ws.onopen = function() {
            console.log("Connected to WebSocket server");
        };
        ws.onmessage = function(event) {
            var li = document.createElement("li");
            li.textContent = "收到: " + event.data;
            document.getElementById("messages").appendChild(li);
        };
        ws.onclose = function() {
            console.log("Disconnected from WebSocket server");
        };
        function sendMessage() {
            var input = document.getElementById("messageInput");
            ws.send(input.value);
            input.value = "";
        }
    </script>
</body>
</html>

功能解析：

new WebSocket("ws://localhost:9527/ws")：建立 WebSocket 連接。
ws.onmessage：監聽服務器發送的消息，並在頁面上顯示。
ws.send(input.value)：發送輸入框的消息到 WebSocket 服務器。

測試運行效果如下所示:

前端效果如下:

總結

在本篇文章中，我們使用 Gin 框架搭建了一個 WebSocket 服務器，並在前端通過 JavaScript 連接並交互。

核心知識點：

gorilla/websocket 處理 WebSocket 連接
Gin 框架集成 WebSocket
在前端使用 WebSocket 對象連接服務器

當然啦！WebSockets 也適用於：

在線聊天室
多人協作
實時數據推送
物聯網設備通信

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/G6dlt4q5nNkDq5JHGJLd6g

猜你喜歡