Gin WebSocket 实现

0 评论
/ /
689 阅读
/
3282 字
27 2023-03

使用Gin框架实现WebSocket的简单示例:

package main
import (
    "log"
    "github.com/gin-gonic/gin"
    "github.com/gorilla/websocket"
)
// 创建了一个WebSocket升级器
// 它允许我们将HTTP连接升级为WebSocket连接
var upgrader = websocket.Upgrader{
    ReadBufferSize:  1024, //读取缓冲区大小
    WriteBufferSize: 1024, //写入缓冲区大小
}
func main() {
    router := gin.Default()
    router.LoadHTMLGlob("template/**/*")
    router.GET("/", func(c *gin.Context) {
        c.HTML(200, "template/test/index.html", nil)
    })
    // 定义一个/ws路由,用于处理WebSocket连接
    router.GET("/ws", func(c *gin.Context) {
        // 当有客户端连接到该路由时
        // 我们将其升级为WebSocket连接
        conn, err := upgrader.Upgrade(c.Writer, c.Request, nil)
        if err != nil {
            return
        }
        defer conn.Close()
        for {
            messageType, p, err := conn.ReadMessage()
            if err != nil {
                log.Println("server read:", err)
                return
            }
            // 处理客户端发送的消息
            msg := string(p)
            switch msg {
            case "apple":
                p = []byte("apple走了服务器端")
            case "banana":
                p = []byte("banana走了服务器端")
            default:
                p = []byte("Invalid fruit name")
            }
            // 向客户端发送消息
            if err := conn.WriteMessage(messageType, p); err != nil {
                log.Println(" server write err:", err)
                return
            }
        }
    })
    router.Run(":8080")
}

在上面的代码中,首先创建了一个WebSocket升级器,它允许将HTTP连接升级为WebSocket连接。然后定义了一个/ws路由,用来处理WebSocket连接。当有客户端连接到该路由时,我们将其升级为WebSocket连接,并使用conn.ReadMessage()读取来自客户端的消息,处理消息后使用conn.WriteMessage()将响应发送回客户端。

测试WebSocket客户端

要测试这个WebSocket客户端可以使用浏览器的JavaScript WebSocket API。在JavaScript代码中使用以下代码与WebSocket服务器进行通信:

{{define "template/test/index.html"}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <input type="text" id="fruit" placeholder="请输出水果名称"><br/>
        <input type="button" id="btn" value="提交">
    </div>
    <script>
        var btn = document.getElementById("btn");
        var socket = new WebSocket("ws://127.0.0.1:8080/ws");
        socket.onopen = function() {
            console.log("连接已建立");
        };
        btn.onclick = function(){
            var fruit = document.getElementById("fruit").value;
            socket.send(fruit);
        }
        socket.onmessage = function(event) {
            console.log("收到消息: " + event.data);
        };
    </script>
</body>
</html>
{{end}}