基于 UniApp + WebSocket 的体育比赛实时计分系统开发分享

[geekape]

最近我开发了一款 微信小程序 —— [赛播记分] ，主要用于篮球等体育比赛的 实时计分 + 直播画面叠加。本文就和大家分享一下它的开发思路和关键实现，希望对做跨端应用、实时通信的同学有所帮助。

---

🎯 背景与需求

在业余篮球赛、村 BA 、学校班级赛、甚至一些小型直播中，常常会遇到：

• 比分不透明：观众/观赛者总是追问“比分多少？”
• 人工记分容易出错
• 直播缺乏专业感

所以目标是：

做一个基于微信小程序的工具，能够 实时显示比分，并支持 多设备协同 和 直播画面叠加。

---

🏗️ 技术选型

前端

• 框架：UniApp (Vue3)
• 状态管理：Vuex
• 样式：CSS Variables + 原生 CSS
• 平台：微信小程序（主平台），兼容 H5

后端

• 服务框架：EggJS (Node.js)
• 实时通信：Socket.IO (WebSocket)
• 房间管理：Socket.IO Rooms

---

⚡ 核心功能拆解

1. 实时计分 & 画面叠加

• 使用微信小程序的 camera 组件获取摄像头画面
• 通过 cover-view 组件在画面上叠加比分条
• 用户点击队伍名称/比分，即可加减分

<cover-view class="scoreboard">
  <cover-view class="team">{{ homeTeam }} {{ score.home }}</cover-view>
  <cover-view class="team">{{ awayTeam }} {{ score.away }}</cover-view>
</cover-view>

---

2. 多设备协同控制

• 用户 A 开启直播 → 房间 ID
• 用户 B 扫码进入 → 加入同一个房间
• 通过 Socket.IO 实现实时同步

// 客户端发送事件
socket.emit('score:update', { team: 'home', delta: +1 });

// 服务端广播
io.to(roomId).emit('score:sync', newScore);

这样实现“一人直播，多人协同”。

---

3. 状态管理

统一用 Vuex 管理比赛状态，避免多页面切换时状态丢失。

state: {
  gameSettings: {...},   // 比赛标题、队伍名称
  gameState: {...},      // 当前比分、时间
  cameraState: {...}     // 摄像头状态
}

---

4. 模板系统

提供 4 种不同风格的比分条：

• 经典圆角
• 科技六边形
• 渐变卡片
• 圆形徽章

通过配置项切换，实现 UI 与逻辑解耦。

---

🔧 开发难点与解决

1. WebSocket 掉线重连

   • 加入心跳检测 + 自动重连逻辑

2. 性能优化

   • 控制 cover-view 渲染层级，避免掉帧
   • 操作保持 60FPS 流畅

3. 多端兼容

   • H5 调试环境，最终打包为小程序

---

🚀 应用场景

• 🏀 校园/社团篮球比赛
• 🎮 电竞赛事（后续扩展）
• 📺 小型体育活动直播
• 🏫 体育教学演示

---

📌 总结

这次项目最大的收获是：

• UniApp 跨端开发 能快速适配微信小程序和 H5
• WebSocket 实时通信 非常适合做多设备协同
• 组件化设计 能灵活扩展不同的运动和模板

未来还计划加入：

• 音效反馈
• 比赛数据统计
• 更多运动类型（足球、羽毛球）
• 直播推流功能

如果你需要看成品效果，可以在微信上小程序上搜索 [赛播记分] ，已发布上线。

[qiuai]

这个不错，追一个。