简化版实时投票系统

前端技术架构

• 技术栈：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