一、前言

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 连接，并且在连接成功后，向服务器发送投票选项，如下：

  
    
    
  
  
    
在线投票
    

      

        选项一
        
      
      

        选项二
        
      
      

        选项三
        
      
      投票
    

    
    
  

以上代码通过 WebSocket 构造函数创建了一个 WebSocket 连接，并且监听了连接事件、关闭事件、接收消息事件和错误事件。同时，我们定义了一个表单提交事件，用于将投票选项发送给服务器。

当服务器收到客户端的投票消息后，会将投票信息广播给所有的客户端。因此，当客户端接收到投票信息后，需要将投票结果显示到页面上。

//监听接收消息事件
ws.onmessage = function (evt) {
    let data = JSON.parse(evt.data);
    // 处理广播的投票信息
    $(".vote-" + data.option).append(data.name + "、");
};

以上代码通过处理广播的投票信息，将投票结果显示到页面上。最后，我们就完成了一个简单的投票功能。

五、总结

通过以上介绍，我们已经学习了如何使用 Golang 实现 WebSocket，在线投票功能。开发这种基于 WebSocket 的应用，可以为用户提供实时、低延迟的体验。不仅如此，通过此方式还可以在轻松处理服务端的实时数据推送。

最后，附上完整代码：