Skip to content

README.md

Latest commit

 

History

History
78 lines (49 loc) · 1.54 KB

README.md

File metadata and controls

78 lines (49 loc) · 1.54 KB

简化版实时投票系统

前端技术架构

  • 技术栈：React + Vite + Tailwind CSS
  • 组件：
    • PollForm.jsx：单选问卷提交组件
    • ResultChart.jsx：柱状图展示实时投票结果
    • App.jsx：状态管理与 WebSocket 客户端逻辑

后端技术架构

  • 技术栈：Golang + Gin + GORM + MySQL + WebSocket
  • 模块划分：
    • model：定义数据库结构（Poll、Option）与预置问卷加载
    • controller：实现 REST 接口 /api/poll 与 /api/poll/vote
    • ws：WebSocket 广播中心，负责所有连接维护与实时数据推送
    • router：统一路由注册

接口文档

GET /api/poll

  • 返回当前问卷及各选项票数，JSON 示例如下
{
  "id": 1,
  "question": "What's your favorite mobile game?",
  "options": [
    { "id": 1, "text": "Art of War", "count": 3 },
    { "id": 2, "text": "Island War", "count": 1 }
  ]
}

POST /api/poll/vote

  • 请求体
{ "option_id": 1 }
  • 返回体
{ "message": "Vote submitted" }

GET /ws/poll

  • WebSocket 通道，实时接收完整 poll 对象更新（格式同 GET /api/poll 返回）

实时更新机制说明

  • 后端维护全局客户端连接池 map[*websocket.Conn]bool
  • 每次投票后：
    • 立即更新数据库中对应 Option.Count
    • 重新查询当前完整 poll 数据
    • 通过 WebSocket 广播给所有客户端
  • 前端接收到数据后：自动刷新 poll 状态，触发 UI 更新

Docker 启动命令

docker-compose up --build