心得之开发设计一个篮球共享计分器小程序
序言作为一名篮球爱好者的程序员，在使用目前市面篮球计分器时，总觉得用的不顺手，市面基本都是单机模式，广告很多，也不便于核对和多人协同记录。因此，我决定自己设计并开发一款篮球共享计分器小程序，实现多人协同记录赛事，提供多种方便快捷的计分方式和统计数据效果。
上效果图：
由于上篇《开发一个题库系统App和小程序的心得》已经叙述了很多资源方案，代码方案，部署方案，以及很多基础性的功能开发设计，此系统基本相同，不再赘述，直接讲解篮球共享计分器特有功能。
1. 功能目标
篮球共享计分器功能目标：
[*]实现多人实时共享记录比赛
[*]提供个人和团队数据和表现的统计数据
[*]提供单机版/共享版/私密版三种模式记录比赛
[*]提供简易/精准版模式选择
[*]保存历史比赛数据，可用于文字直播。
1.1 功能列表
篮球共享计分器核心功能
[*]实现常规简易单机版计分器
[*]实现协同协同版计分器，协同实时切换简易版和精准版计分方式
[*]实现团队对比数据，可视化图表展示和对比，以及完整文字记录
[*]实现个人完整数据，以及个人完整文字记录
[*]协同版区分公开和私密赛事，公开赛事可免登录参与，私密赛事支持多种精准权限控制记录比赛
1.2 功能截图
以下是App端的部分截图
以下是微信小程序端的部分截图
2. 实现方案
2.1 设计方案
2.1.1 数据库设计
赛事表
队员表
授权表
日志表
2.1.2 移动端开发-赛事列表和录入
赛事有三种添加方式：
[*]已有比赛，可以选择复制一份，会复制赛事的队员和用户权限
[*]录入比赛，自行录入比赛名称等信息，保存即可
[*](需登录)添加授权码比赛，别人创建的私密比赛，分享的授权码，可以通过授权码进行添加
赛事录入细节：
[*]长按赛事明细，可操作复制/编辑/授权/重置/取消/删除(可见操作按钮跟权限有关)
[*]编辑赛事，可增加/修改/删除赛事双方队员：添加队员直接录入即可；搜索队员可查找有权限赛事的所有人员，因此同名队伍只需录入一次，下次直接搜索一次性添加即可；长按队员可编辑；删除按钮可删除。(赛事录入页面也可同样操作)
2.1.3 移动端开发-赛事授权(需登录)
赛事列表中，对于公开赛事，所有人都可见也都是管理员角色；对于私密赛事，长按明细，可选择授权操作。
有两种授权模式：
[*]生成授权码，点击观众/主队管理员/客队管理员/管理员，可生成对应赛事授权码，其他人在赛事列表页面通过添加授权码比赛的方式即可获权
[*]添加用户，点击添加用户，输入用户信息查找授权即可(为保证用户隐私，此处不支持模糊搜索)
授权细节说明：
[*]赛事创建人是超级管理员，可以直接添加/修改/删除任何已授权用户
[*]只能添加/修改/删除比自己低的权限，不会出现操作的权限超越操作人的权限的情况
[*]可自己删除自己的授权，删除后赛事不可见
2.1.4 移动端开发-记录比赛
赛事记录方法：
[*]点击【精准版】/【简易版】可以互相切换记录模式
[*]点击【用时】，可查看实时比赛数据结果
[*]点击【分享比赛】，可生成赛事二维码，让其他人参与
[*]长按任意队员，可切换队员
[*]长按日志明细，可作废或修改日志
赛事记录说明：
[*]公开赛事记录，所有人都是管理员权限，都可以通过分享的二维码进行赛事记录。
[*]私密赛事记录，扫码进来的默认赋权观众，需要进一步授权才可以记录比赛，否则只能观看。
[*]私密赛事记录，管理员可以记录双方数据，主队管理员只能记录主队数据，客队管理员只能记录客队数据，观众只能观看。
[*]加时赛说明，默认四节比赛，如果在第四节结束，两队分数一致，自动进入加时，否则比赛结束。
2.1.5 移动端开发-查看结果
查看结果有三种方式：
[*]列表已经结束的比赛，点击查看即可查看比赛结果
[*]记录比赛中，点击用时可以查看比赛结果
[*]通过其他人分享的比赛结果二维码可以查看比赛结果
查看结果操作说明：
[*]进入结果页面，可点击上方【*** 数据】切换页签，也可以左右滑动切换页签
[*]在【**队 数据】页签，柱状图的“其他”表示整队的数据，也就是比赛记录时，选择了队伍，未选择具体人员
[*]小程序图表可能出现空白，点一下图表内部，即可正常显示，图表组件在小程序上的层级Bug问题，暂时未修复
2.1.6 移动端开发-单机版计分器
操作说明：
[*]点击【单机版】可清空重置数据
[*]长按【犯规】或【队伍暂停】可减少次数
[*]打开页面后可离线操作，离开页面或应用，数据缓存在本地，并不会消失，只能记录一个赛事，清空重置后，数据清除不可找回
2.2 开发方案
2.2.1 后端开发-框架Springboot
基于若依plus，在其基础上增加ruoyi-race模块，单独存放赛事相关功能，其中四个controller分别是：
Race：赛事功能
Log：日志功能
Member：成员功能
User：授权用户功能
Message：SSE发送消息功能(已弃用)
SSE：SSE连续功能(已弃用)
WxToken：获取小程序Token和生成小程序带参数二维码功能
SSE在使用时，微信小程序和APP不能很好的支持EventSource前端组件，长连接也存在兼容问题，效果都不好，所以弃用，使用WebSocket
在整合的框架中，使用的是Tio引擎的Websocket，增加两种赛事的消息类型，初始化消息和常规消息：
初始化消息：读取并回执当前某一赛事最新完整赛事数据
常规消息：发送记录赛事时的各种指令，更新赛事，记录日志，并回执更新后的完整赛事数据
2.2.2 移动端开发-框架Uniapp
核心在记录赛事使用websocket上，这里我们使用具体页面直连的方式，离开页面则关闭websocket，相关代码如下
onUnload() { this.timeClear() this.socket.close(true) }, onShow() { this.diyApiGet('/race/race/getMoreByRaceId/' + this.setData.id).then(res => { this.setData = res.data; if(!this.userInfo || !this.userInfo.userId){ // 公开赛事，无用户，随机生成一个 this.userId = this.getRandom(2, 16); }else{ this.userId = this.userInfo.userId; } // websocket非通讯状态，则重连 // #ifdef APP-PLUS if(!this.socket){ this.getMemberFirstList(); this.getMemberSecondList(); this.connectWebsocket(this.userId, this.setData.id); } // #endif // #ifndef APP-PLUS if(!this.socket || this.socket.getReadyState() != 1){ this.getMemberFirstList(); this.getMemberSecondList(); this.connectWebsocket(this.userId, this.setData.id); } // #endif }) },
连接websocket方法，未登录传入随机用户ID
connectWebsocket(userId, raceId){ let url = globalData.wssUrl; let heartbeatTimeout = 50000; // 心跳超时时间，单位：毫秒 let reconnInterval = 5000; // 重连间隔时间，单位：毫秒 let binaryType = 'blob'; // 'blob' or 'arraybuffer';//arraybuffer是字节 let paramStr = "app=urace&userId=" + userId + "&sessionId=" + raceId let param = ""; this.socket = new TioSocket(url, paramStr, param, heartbeatTimeout, reconnInterval, binaryType); let ws = this.socket.connect(false); ws.onOpen((e) => { // 读取赛事初始信息 uni.sendSocketMessage({ data: JSON.stringify({code:6, message: {raceId: raceId, userId: userId}}) }) this.socket.reset(); }) ws.onMessage((e) => { let message = JSONbig.parse(e.data); if(message.code == 2){ let data = JSONbig.parse(message.message.content) if(data.msg){ this.msg(data.msg); return; } if(data.data){ this.setData = data.data; this.usedTime = data.data.usedTime || 0; if(data.data.status == 1){ this.timeInterval(); }else{ this.timeClear(); } if(data.data.status < 0){ this.logList = [] } this.showTitle(); } if(data.log){ if(data.log.logType == 99){ this.getMemberFirstList(); this.getMemberSecondList(); this.invalidMessageLog(data.log) }else if(data.log.logType == 61){ this.moveMessageLog(data.log) }else{ if(data.log.logType == 34 || data.log.logType == 41 || data.log.logType == 42 || data.log.logType == 43 || data.log.logType == 81 || data.log.logType == 82 || data.log.logType == 83){ if(data.log.teamIndex == 1){ this.getMemberFirstList(); } if(data.log.teamIndex == 2){ this.getMemberSecondList(); } } this.addMessageLog(data.log, true) } } } this.socket.reset(); }) },
赛事记录命令转译函数
export function getLogText(log, firstTeamName, secondTeamName, status){ let text = ""; if(log.teamIndex == 1){ text += " " + firstTeamName } if(log.teamIndex == 2){ text += " " + secondTeamName } if(log.memberName){ text += " " + log.memberName } switch(log.logType){ case -10: text += "比赛尚未开始"; break; case -1: text += "比赛进行中"; break; case -2: text += "比赛暂停中"; break; case -3: if(log.period == 2){ text += "第一节已结束"; }else if(log.period == 3){ text += "第二节已结束"; }else if(log.period == 4){ text += "第三节已结束"; }else if(log.period >= 5 && log.firstTeamScore != log.secondTeamScore){ text += "比赛已结束"; }else if(log.period == 5){ text += "第四节已结束"; }else if(log.period == 6){ text += "加时赛1已结束"; }else if(log.period == 7){ text += "加时赛2已结束"; }else if(log.period == 8){ text += "加时赛3已结束"; }else if(log.period == 9){ text += "加时赛4已结束"; }else if(log.period == 10){ text += "加时赛5已结束"; }else{ text += "加时赛已结束"; } break; case -9: text += "比赛已取消"; break; case 1: text += "比赛开始"; break; case 2: text += "裁判暂停"; break; case 3: if(log.period == 1){ text += "第一节比赛继续"; }else if(log.period == 2){ text += "第二节比赛继续"; }else if(log.period == 3){ text += "第三节比赛继续"; }else if(log.period == 4){ text += "第四节比赛继续"; }else if(log.period == 5){ text += "加时赛1继续"; }else if(log.period == 6){ text += "加时赛2继续"; }else if(log.period == 7){ text += "加时赛3继续"; }else if(log.period == 8){ text += "加时赛4继续"; }else if(log.period == 9){ text += "加时赛5继续"; }else if(log.period == 10){ text += "加时赛6继续"; }else{ text += "加时赛继续"; } break; case 4: if(log.period == 2){ text += "第一节结束"; }else if(log.period == 3){ text += "第二节结束"; }else if(log.period == 4){ text += "第三节结束"; }else if(log.period >= 5 && log.firstTeamScore == log.secondTeamScore){ text += "比赛结束"; }else if(log.period == 5){ text += "第四节结束"; }else if(log.period == 6){ text += "加时赛1结束"; }else if(log.period == 7){ text += "加时赛2结束"; }else if(log.period == 8){ text += "加时赛3结束"; }else if(log.period == 9){ text += "加时赛4结束"; }else if(log.period == 10){ text += "加时赛5结束"; }else{ text += "加时赛结束"; } break; case 5: text += "比赛取消"; break; case 6: text += " 请求暂停"; break; case 11: text += " 罚篮命中，得1分" break; case 12: text += " 投篮命中，得2分" break; case 13: text += " 投篮命中，得2分，加罚1次" break; case 14: text += " 突破上篮，得2分" break; case 15: text += " 突破上篮，得2分，加罚1次" break; case 16: text += " 投篮命中，得3分" break; case 17: text += " 投篮命中，得3分，加罚1次" break; case 18: text += " 扣篮成功，得2分" break; case 19: text += " 扣篮成功，得2分，加罚1次" break; case 20: text += " 扣1分" break; case 21: text += " 罚篮不中" break; case 22: text += " 2分不中" break; case 23: text += " 2分不中，被犯规，罚球2次" break; case 24: text += " 3分不中" break; case 25: text += " 3分不中，被犯规，罚球3次" break; case 26: text += " 上篮失败" break; case 27: text += " 上篮失败，被犯规，罚球2次" break; case 28: text += " 扣篮失败" break; case 29: text += " 扣篮失败，被犯规，罚球2次" break; case 31: text += " 助攻一次" break; case 32: text += " 失误，丢失球权" break; case 33: text += " 抢断，获得球权" break; case 34: text += " 普通犯规" break; case 35: text += " 被普通犯规" break; case 36: text += " 投篮被犯规，开始罚球" break; case 37: text += " 盖帽" break; case 38: text += " 被盖帽" break; case 39: text += " 获得前场篮板" break; case 40: text += " 获得后场篮板" break; case 41: text += " 犯规，对手罚球" break; case 42: text += " 违体犯规" break; case 43: text += " 技术犯规" break; case 81: text += " 上场" break; case 82: text += " 下场，" + log.nextMemberName + " 上场" break; case 83: text += " 下场休息" break; default: text += log.logType } return " " + text}
3. 总结一下
篮球共享计分器，主要实现的是一个协同处理能力，此次小程序开发，不仅实现了App、小程序、H5的三端兼容，也实现了赛事数据的实时同步，经过测试，任意时间进入赛事的用户，都能保证比赛用时显示的同步，互相操作都能及时收到消息。
不足之处，图表使用的uchart工具，兼容性还有待研究，篮球规则懂的不全面，以及更多形式的赛事记录支持等。
以上分享心得只能描述个大概，个人文档和开发水平都有限，文档或有错误和不妥之处，欢迎指定！
页:
[1]