商城首页欢迎来到中国正版软件门户
文章教程　|　产品大全　|　软件问答

您的位置：首页 >golang Websocket教程：如何开发在线投票功能

golang Websocket教程：如何开发在线投票功能

　　发布于2023-12-02　阅读（0）

扫一扫，手机访问

一、前言

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 的应用，可以为用户提供实时、低延迟的体验。不仅如此，通过此方式还可以在轻松处理服务端的实时数据推送。

最后，附上完整代码：

本文转载于：互联网 如有侵犯，请联系zhengruancom@outlook.com删除。
免责声明：正软商城发布此文仅为传递信息，不代表正软商城认同其观点或证实其描述。

上一篇：PHP Websocket开发指南，实现实时航班查询功能

下一篇：PHP异步协程开发：提升API接口响应速度的秘籍

产品推荐

最新发布

相关推荐

热门关注
网站备案号： 苏ICP备2026018738号-1 联系邮箱：zhengruancom@outlook.com
Copyright ©2018-2020