Go Gin 框架搭建简易 Websocket 后端

#go

背景

我们日常用到的软件，比如聊天软件、在线文档、直播间等，他们的后端服务都离不开 Websocket 技术来提供实时通信能力，那么我们在Go语言中，如何使用 Websocket 做实时后端服务呢？

接下来，小编就使用 Golang 的Web开发框架 Gin，搭配 Websocket 库 gorilla/websocket 来实现简易后端服务。以下是从 0 到 1 的实现过程，适合新手阅读。

方案

Hello World

  1. 安装 go

https://go.dev/dl/

  1. 新建目录
mkdir go-websocket-example
cd go-websocket-example
  1. 初始化项目
go mod init github.com/openHacking/go-websocket-example
  1. 新建文件

新建 hello.go，如果你使用的是 VSCode 编辑器，它会推荐你安装 Go 相关的插件，建议直接安装一下

package main

import "fmt"

func main() {
    fmt.Println("Hello, World!")
}
  1. 启动
go run .

Gin

  1. 安装 Gin
go get -u github.com/gin-gonic/gin
  1. 引入 Gin
import "github.com/gin-gonic/gin"
  1. 使用

补充 hello.go 代码，其中 VSCode Go 插件的格式化功能可以帮你组织代码

package main

import (
 "fmt"

 "github.com/gin-gonic/gin"
)

func main() {
    fmt.Println("Hello, World!")

 r := gin.Default()
 r.GET("/ping", func(c *gin.Context) {
  c.JSON(200, gin.H{
   "message": "pong",
  })
 })
 r.Run() // listen and serve on 0.0.0.0:8080
}
  1. 启动

再次启动项目

go run .

随后会打印日志，表明服务启动成功，这时候打开浏览器访问

http://localhost:8080/ping

服务端会返回 JSON

{
"message": "pong"
}

Websocket

  1. 安装
go get -u github.com/gorilla/websocket
  1. 新建文件

新建之前，先把 hello.go 中的 main 方法名字改成 hello

再新建 server.go

package main

import (
 "fmt"
 "log"
 "net/http"

 "github.com/gin-gonic/gin"
 "github.com/gorilla/websocket"
)

var upgrader = websocket.Upgrader{
 // Solve cross-domain problems
 CheckOrigin: func(r *http.Request) bool {
  return true
 },
} // use default options

func ws(c *gin.Context) {
 //Upgrade get request to webSocket protocol
 ws, err := upgrader.Upgrade(c.Writer, c.Request, nil)
 if err != nil {
  log.Print("upgrade:", err)
  return
 }
 defer ws.Close()
 for {
  //read data from ws
  mt, message, err := ws.ReadMessage()
  if err != nil {
   log.Println("read:", err)
   break
  }
  log.Printf("recv: %s", message)

  //write ws data
  err = ws.WriteMessage(mt, message)
  if err != nil {
   log.Println("write:", err)
   break
  }
 }
}

func main() {
 fmt.Println("Websocket Server!")

 bindAddress := "localhost:8448"
 r := gin.Default()
 r.GET("/ws", ws)
 r.Run(bindAddress)
}
  1. 启动
go run .

前端

  1. 新建 HTML

当前工程或者任意目录新建 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>Univer Server</title>
</head>

<body>
    <script>
        var ws = new WebSocket("ws://localhost:8448/ws");
        //Triggered when the connection is opened
        ws.onopen = function(evt) {
            console.log("Connection open ...");
            ws.send("Hello WebSockets!");
        };
        //Triggered when a message is received
        ws.onmessage = function(evt) {
            console.log("Received Message: " + evt.data);
        };
        //Triggered when the connection is closed
        ws.onclose = function(evt) {
            console.log("Connection closed.");
        };
    </script>
</body>

</html>
  1. 启动

使用 VSCode Live Server 来启动这个 HTML 文件

http://127.0.0.1:5500/index.html

server 端控制台和浏览器即可看到消息发送。

参考

评论