一、前言
WebSocket 可以实现客户端与服务端之间的双向实时通信，已经成为 Web 应用中的一个不可或缺的组件。而本文将介绍如何使用 Golang 开发 WebSocket，在线投票功能。
二、WebSocket
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，它可以在客户端和服务器之间建立实时的双向通信，当客户端完成握手之后，后续的通信数据都是被这个连接所承载。
Golang 标准库内置了 WebSocket 的支持，使用起来非常简便。
三、实现在线投票功能
1、创建服务器端
首先，我们需要创建一个服务器端的 Go 文件，命名为 server.go，在该文件中创建一个路由，用于接收 WebSocket 连接，同时定义一个 map 类型的变量，用于存储每个用户的投票信息，如下：
package main
import (
"encoding/json"
"log"
"net/http"
"github.com/gorilla/websocket"
)
var (
upgrader = websocket.Upgrader{
ReadBufferSize: 1024,
WriteBufferSize: 1024,
CheckOrigin: func(r *http.Request) bool {
return true
},
}
votes = make(map[*websocket.Conn]int)
)
func main() {
http.HandleFunc("/ws", handleWebSocket)
err := http.ListenAndServe(":8080", nil)
if err != nil {
log.Fatal("ListenAndServe: ", err)
}
}以上代码通过 gorilla/websocket 包创建了一个升级器（upgrader），用于接收客户端请求，并将请求转换为 WebSocket 连接。这个升级器包含了 ReadBufferSize、WriteBufferSize 和 CheckOrigin 三个字段。其中，ReadBufferSize 和 WriteBufferSize 表示读写缓存区的大小，CheckOrigin 是一个函数，用于处理跨域请求。
另外，在 votes 变量中，我们定义了一个 map 类型，用于存储每个客户端的投票信息。map 的 key 是 *websocket.Conn 类型，即 WebSocket 的连接对象，value 是该用户的投票选项编号（例如 1、2、3 等等）。
下一步，我们需要为 WebSocket 连接设置一个处理函数，用于接收和处理客户端发送的消息。
2、处理 WebSocket 连接
我们需要编写一个 handleWebSocket 函数，用于处理 WebSocket 连接的请求，接收客户端的 WebSocket 请求之后，可以通过这个函数对连接进行处理，如下：
type vote struct {
ID int `json:"id"`
Name string `json:"name"`
Option string `json:"option"`
}
func handleWebSocket(w http.ResponseWriter, r *http.Request) {
conn, err := upgrader.Upgrade(w, r, nil)
if err != nil {
return
}
defer conn.Close()
// 定义一个 for 循环，用于监听客户端发送的消息
for {
messageType, message, err := conn.ReadMessage()
if err != nil {
delete(votes, conn)
return
}
// 处理消息
// ...
}
}在 handleWebSocket 函数中，我们首先通过 upgrader.Upgrade 方法将客户端请求升级为 WebSocket 连接，并设置了检查跨域请求的功能。然后，我们进入一个 for 循环，用于监听客户端发送的消息，并根据消息类型进行不同的处理。
接下来，我们需要处理客户端发送的投票请求。
3、处理客户端的投票请求
当客户端发送投票请求时，服务端需要做以下几个步骤：
1）解析客户端发送过来的 JSON 数据，获取到投票的选项编号和投票者的名称；
2）将获取到的投票信息存入 votes 变量；
3）将结果广播给所有在连接中的客户端，以便客户端能够实时更新状态。
解析客户端发送过来的 JSON 数据，获取到投票的选项编号和投票者的名称，如下：
var msg vote
if err := json.Unmarshal(message, &msg); err != nil {
log.Println("json.Unmarshal:", err)
continue
}
// 将获取到的投票信息存入变量 votes
votes[conn] = msg.ID
// 通过广播方式将投票结果发送给所有的客户端
for conn := range votes {
option, _ := strconv.Atoi(msg.Option)
if conn.WriteJSON(map[string]interface{}{
"option": option,
"name": msg.Name,
}) != nil {
delete(votes, conn)
}
}以上代码定义了一个 vote 结构体，用于存储客户端发送的投票信息。并且通过解析客户端发送的 JSON 数据，获取到投票的选项编号和投票者的名称，最后将得到的投票信息存入 votes 中。
接下来，我们需要广播投票结果给所有的客户端。
4、广播投票结果
我们可以逐个遍历客户端，将投票结果发送给所有客户端，这样就可以实现简单的实时投票功能，如下：
// 通过广播方式将投票结果发送给所有的客户端
for conn := range votes {
option, _ := strconv.Atoi(msg.Option)
if conn.WriteJSON(map[string]interface{}{
"option": option,
"name": msg.Name,
}) != nil {
delete(votes, conn)
}
}以上代码通过 range 迭代 votes 变量，将投票结果广播给所有的客户端，其中，conn.WriteJSON 用于将内容编码为 JSON，并通过 WebSocket 连接发送给客户端。
四、客户端实现
客户端和服务端可以使用相同的 HTML、CSS 和 JavaScript 文件，实现客户端可以采用 jQuery 或者 Vue.js。
在客户端 HTML 文件中，我们需要建立 WebSocket 连接，并且在连接成功后，向服务器发送投票选项，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>在线投票</title>
</head>
<body>
<h1>在线投票</h1>
<form>
<p>
<input type="radio" name="vote" value="1" />选项一
<input
type="text"
name="name"
placeholder="请输入你的名称"
required
/>
</p>
<p>
<input type="radio" name="vote" value="2" />选项二
<input
type="text"
name="name"
placeholder="请输入你的名称"
required
/>
</p>
<p>
<input type="radio" name="vote" value="3" />选项三
<input
type="text"
name="name"
placeholder="请输入你的名称"
required
/>
</p>
<button type="submit" id="vote">投票</button>
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var ws = new WebSocket("ws://localhost:8080/ws");
//监听连接事件
ws.onopen = function () {
console.log("WebSocket已连接");
};
//监听关闭事件
ws.onclose = function () {
console.log("WebSocket已关闭");
};
//监听接收消息事件
ws.onmessage = function (evt) {
let data = JSON.parse(evt.data);
// 处理广播的投票信息
// ...
};
// 监听错误事件
ws.onerror = function (evt) {
console.log(evt);
};
// 监听表单提交事件
$("form").submit(function (event) {
event.preventDefault();
let vote = $("input[name=vote]:checked").val();
let name = $("input[name=name]").val();
if (!vote || !name) {
alert("请填写完整信息");
return;
}
// 向服务器发送投票选项
ws.send(
JSON.stringify({
id: parseInt(vote),
name: name,
option: vote,
})
);
});
</script>
</body>
</html>以上代码通过 WebSocket 构造函数创建了一个 WebSocket 连接，并且监听了连接事件、关闭事件、接收消息事件和错误事件。同时，我们定义了一个表单提交事件，用于将投票选项发送给服务器。
当服务器收到客户端的投票消息后，会将投票信息广播给所有的客户端。因此，当客户端接收到投票信息后，需要将投票结果显示到页面上。
//监听接收消息事件
ws.onmessage = function (evt) {
let data = JSON.parse(evt.data);
// 处理广播的投票信息
$(".vote-" + data.option).append(data.name + "、");
};以上代码通过处理广播的投票信息，将投票结果显示到页面上。最后，我们就完成了一个简单的投票功能。
五、总结
通过以上介绍，我们已经学习了如何使用 Golang 实现 WebSocket，在线投票功能。开发这种基于 WebSocket 的应用，可以为用户提供实时、低延迟的体验。不仅如此，通过此方式还可以在轻松处理服务端的实时数据推送。
最后，附上完整代码：
