★ FEATURED ARTICLE 每到年底总有人来问我“有没有免费的年会抽奖工具”“公司不想买商业软件能不能自己搞一个”早几年我一般直接推荐几个网页版抽奖平台用完即走。但最近几年问的人越来越多了而且要求越来越具体——要大屏酷炫、要支持摇一摇、要能自定义奖品、最好数据还能留痕。找了一圈发现商业软件要么收费要么大屏效果一般要么数据黑盒。后来换了个思路干脆找开源免费的方案自己部署。今年我帮朋友公司搞定了一套年会抽奖工具开源免费、开箱即用现场两百多人同时摇一摇也没出状况。这篇就写下整个选型、部署和现场避坑的完整过程给同样在找方案的人一个参考。1. 为什么放着商业抽奖软件不用要自己部署开源工具1.1 年会抽奖最怕的不是抽不中而是“被质疑不公”先说个真实的场景。去年朋友公司年会用的是某在线抽奖网页版主持人点一下开始、再点一下停止大屏上滚动头像最后停在一个幸运儿上。听起来挺正常但现场就有员工私下说“这玩意儿谁知道后台是不是手工指定的”虽然大概率是瞎猜但抽奖这东西一旦被质疑整个年会的氛围就变味了。年会本质上是给员工一个“这一年辛苦没白费”的正向反馈要是抽奖环节让人心里打了个问号那就得不偿失了。自己部署的开源工具就不一样代码是公开的抽奖逻辑在本地服务器上跑每次抽取的结果都有日志或记录。哪怕真有人较真你也可以理直气壮地把过程、日志摊开给他看。这一点对组织者来说是很大的心理安全感。1.2 商业软件的费用与定制死穴市面上年会抽奖产品大概分两类。一类是纯在线网页版按场次收费便宜的几十块一场贵的三五百另一类是买断式授权按年或按人数算能装到本地电脑但通常不支持二次修改界面风格固定加个公司Logo还得另收费。更愁人的是有些产品默认用公网服务器年会当天网络一旦波动大屏直接卡死你连“重抽”都要打电话找客服。而开源免费项目最大的优势不是“不要钱”而是“自己可控”。你可以把服务部署在一台局域网电脑上完全不依赖外网你也可以改代码把默认的抽奖主题改成公司的品牌色加上自己想要的音效和动效你还可以把获奖名单导出成Excel方便后续发奖。这些都是商业软件给不了的自由度。1.3 开源免费到底省在哪其实省的不只是授权费。年会抽奖这种工具一年用一次一次用半天如果为这半天去买商业授权成本确实有点冤。开源方案你可以提前几天部署好年会用完直接关掉明年再开。技术上没有太高的门槛不涉及复杂架构主要的精力花在“配奖品、配名单、调样式”这三件事上。我这次选型的目标很明确技术栈不要太老、界面能改、支持手机扫码摇一摇、支持局域网部署、最好一键启动。最后定位到一个用Node.js写的开源项目功能覆盖了年会抽奖的绝大多数需求。接下来就把这个项目的选型细节、部署过程里面容易踩的坑一并说清楚。2. 选型前先想清楚一场年会抽奖到底需要哪些能力2.1 核心功能清单从入场签到到奖项轮播很多人找抽奖工具只盯着“滚动抽奖”一个功能但实际筹备年会时会发现一场合格的抽奖环节至少要有四块能力人员管理导入员工名单支持按部门、按工号分组抽奖时能排除不可参与人员。奖项配置多轮次抽奖每一轮对应不同奖品和名额比如三等奖10人、二等奖5人、一等奖1人。抽奖模式至少要有“滚动抽奖”“转盘抽奖”和“摇一摇抽奖”三种玩法丰富现场节奏。数据记录每一轮抽出了谁、什么时间抽出的、奖品种类是什么要能留存、能导出。这四个能力听起来是标配但很多免费网页版工具做不到全。我当时选中的开源项目在这块做得比较齐全而且把“活动、奖项、人员”三个实体的关系用后台界面管理起来不用改代码也能完成大部分配置。2.2 “摇一摇/扫码”在局域网内怎么解决的年会现场最带感的玩法是“摇一摇”。大屏上二维码一投出来全场员工掏出手机扫码进入页面主持人喊“开始”大家疯狂摇手机大屏上的速度条你追我赶最后最快的那个就是幸运儿。这个体验要讲实现原理其实是典型的WebSocket双向通信手机浏览器通过扫码拿到一个基于本机IP端口的访问地址连接服务器手机里的重力加速度传感器把摇动频率实时上报给服务器服务器再推送给大屏端大屏用CSS动画展示速度对比。整个过程不依赖公网只要手机和服务器在同一个局域网内就行。我当时反复确认了三点项目是否支持局域网访问、WebSocket端口是否可配置、手机端是否只依赖现代浏览器不需要装App。三点都满足之后才进入部署环节。2.3 几条硬性技术指标选了项目之后一定要看它的技术栈和运行要求。我这个项目是基于Node.js写的前端用了Vue类框架数据库就用本地JSON文件存储没有外置数据库依赖这点对新手特别友好。几个硬性指标我梳理成一张表方便后面的人直接照着核对检查项参考要求原因运行环境Node.js 14 及以上版本太老跑不起来端口占用默认端口可配置避免和其他办公系统冲突客户端兼容支持现代浏览器即可员工手机型号杂不能用太新的Web API数据存储本地文件即可无需MySQL部署简单、便于备份网络依赖断网可用避免现场公网抖动影响气氛大屏适配支持1920×1080及以上年会舞台屏幕通常比较大这些指标看起来琐碎但每一条都在实际现场经历过验证。尤其“断网可用”一条我劝大家选型时务必放在前三位考虑年会场地网络不可控因素太多了。3. 部署全过程从下载到会场大屏亮起来3.1 环境准备与初始化部署这一步我用一台Windows电脑做演示Linux服务器的差别也不大。先确认电脑上有没有Node.js环境命令行里输入node -v npm -v我这边Node版本是18.x没问题。然后把项目源代码下载解压到指定目录。进入项目目录后安装依赖npm install这个步骤在国内网络环境下可能会有点慢如果卡在某个包上换一下npm镜像源再跑。依赖装完先别急着启动先看项目根目录下有没有配置文件常见的是config或.env格式。我用的这个项目里配置项包括服务端口、活动名称、管理员密码、是否开启手机端摇一摇等。我把端口设成了8080活动名称改成公司年会主题然后执行启动命令npm start命令行出现“服务已启动端口8080”的提示就代表启动成功了。这时候在同一台电脑上打开浏览器输入 localhost:8080能看到后台登录页。3.2 干净部署少走弯路第一次部署就用刚下载好的原始代码不要急着改东改西。原因是项目默认配置一定经过作者的自测跑通整个流程后再动手配置奖品和名单出问题时你能判断到底是配置问题还是代码问题。我第一次操作时改了一个字段导致启动直接报错——原来是JSON数组末尾多了一个逗号编辑器没提示Node解析直接崩了。所以给大家一个建议每次改完配置文件先启动一次验证别等部署完到了现场再发现起不来。另外后台管理员初始密码一定要第一时间改掉。整个过程可以走一遍“创建活动→导入人员→配置奖品→预览大屏”这条完整链路如果哪一步的功能按钮点了没反应多半是该环节还没配置完整。3.3 配置奖品、人员名单与抽奖规则这步是整个部署中最花时间的部分但也是最不容易出问题的。进入后台管理界面后按几个Tab页操作人员导入直接复制Excel里的两列姓名、工号粘贴到页面的文本框里就能完成批量导入。我建议同时要求员工名单里写清楚部门因为抽奖时显示部门信息可以增加真实感。对于几百人的规模这个项目完全加载得动。奖项配置依次添加每个奖项。这里要强调奖项的顺序会影响页面展示顺序建议从三等奖开始配到一等奖最后是特等奖。每个奖项里设置抽取人数和奖品名称。我试过在奖项里加图片把京东卡、手机的图片传上去大屏展示效果确实更好值得多花十分钟弄。抽奖规则默认抽掉的人不会被抽到同一轮里但项目允不允许“一个人中多奖”“要不要排除已中奖者”这是需要提前和主办方确认的。当时我们采取的是“每个人只能中一次奖”这个逻辑在后台一个开关就能搞定。配置完成之后大屏端会自动同步所有数据不需要额外操作。预览大屏前记得在后台把“启动时自动进入演示数据”之类的开关关掉否则屏幕上会有几条测试样例数据。4. 现场实操中的意外情况与排查链路4.1 手机扫不了码问题往往不在二维码年会当天最容易翻车的不是抽奖系统本身而是“手机连不上服务器”。那次到现场彩排大屏把二维码一投出来我拿手机扫码结果页面一直转圈。最初以为是二维码问题仔细排查后发现二维码内容指向的是 192.168.x.x:8080而我的手机连着访客Wi-Fi和服务器所在的办公网段不在同一个网段当然访问不到。这种场景太典型了强烈建议部署时按下面步骤来用命令查服务器电脑的局域网IPWindows用 ipconfigMac/Linux用 ifconfig。把项目配置里的访问地址改成这个IP。同一网段的手机访问 http://IP:端口能打开手机端即代表连通。如果手机还是打不开检查两台设备之间网络是否隔离AP隔离或者关了电脑防火墙再试。这里有个容易被忽视的细节如果你在公司内网部署IT那边可能会开启访客网络隔离普通无线和办公网之间互相不通这种情况下手机和电脑就“物理隔离”了。解决办法是用一台手机开热点服务器电脑也连这个热点形成一个独立小局域网年会现场稳得很。4.2 大屏展示流畅度浏览器性能的取舍大屏展示其实也有讲究。舞台屏幕多数是HDMI线直连电脑所以“大屏卡不卡”取决于电脑本身性能。我当时用的是一台老旧笔记本打开大屏页面后动画效果明显有掉帧滚动名字一顿一顿的现场气氛直接凉一半。排查下来主要有三个原因浏览器开太多标签页内存吃紧大屏页面被放在了后台GPU加速没生效项目默认动画效果较复杂低端显卡带不动。解决方案比较务实用一台相对新的电脑专门承接大屏不要和后台管理混用用Chrome或Edge打开大屏页面把无关页面全关掉在项目的CSS里降低一些复杂特效比如把雪花粒子效果去掉只保留基础滚动动画启动页面后手动按F5刷新一下确保页面拿到最新的内存状态。如果现场有条件我还建议准备一台备用电脑装上同样的环境万一主电脑蓝屏两分钟就能切过去。4.3 抽奖数据留痕避免“内定”争议前面说到开源项目的数据安全感这里要落到操作层面。我见过一些活动组织者用网页版工具抽完奖就关了网页结果中奖名单没存下来发奖的时候只能靠手抄不但麻烦还容易错。这个项目在抽奖环节每抽一次后台便会实时记录一条抽奖日志包括奖品名称、中奖人姓名、抽奖时间。大屏上显示的结果和后台数据是一致的这就保证了抽奖的公平性。抽奖结束后我习惯在中奖名单页面导出一次Excel备份。导出后顺手把服务器上的数据目录复制一份到U盘这样即使电脑出问题数据也不会丢。这里要多说一句不要在彩排时把“演示数据”混进正式数据里。彩排时抽出来的名字如果和正式数据混在一起后台检查时会很头大。我用的是两个独立活动的方式一个叫“彩排活动”一个叫“正式年会”互不干扰。5. 给组织者的经验与扩展建议5.1 彩排比部署更重要容易被忽略的细节部署可以提前两天做但彩排一定要在当天提前到会场做。有几个细节是远程准备时发现不了的投屏分辨率现场大屏可能会自动拉伸画面导致字体变模糊需要提前调节电脑输出分辨率匹配屏幕音效输出大屏电脑通过HDMI输出声音时要确认音频默认设备是HDMI而不是电脑内置扬声器主持人节奏大屏从“开始滚动”到“停止抽奖”之间会有一个延迟主持人喊倒计时和实际停止不同步现场看起来会尴尬。解决方法是彩排时让主持人对一遍“321开始”“321停”的话术节奏系统操作员配合按停止键。这三点没有一次彩排是看不出来的而到了现场再调整个流程都会变得非常紧张。5.2 开源项目后续可以怎么改等到年会顺利结束、整套系统稳定运行之后你可能会有一些新想法。这个开源项目因为是本地代码所以改动也比较自由。我根据自己的经验列出几个后续可以扩展的方向定向隐藏奖项比如特等奖提前指定给某个“神秘大奖”的贡献者但又不想让其他人看到规则可以自己改一层逻辑增加抽奖权重可以把工龄、绩效等因素折算成权重放进抽奖概率里这一点在默认项目里没有但代码结构允许加分联动外部硬件比如接一个实体按钮让领导亲自按下抽奖硬件通过串口发送信号程序监听后触发滚动动画。这个玩法在现场效果不错但需要一点点硬件开发能力。改代码最忌讳的是改完不测。每次改动后至少完整跑一遍“导入人员→抽奖一轮→导出记录”的流程确认没有破坏原有功能再做部署。5.3 一套完整的“年会抽奖工具包”应该长这样最后晒一下我这次年会部署完成后最终的工具包清单给各位一个参考物资数量作用部署电脑安装Node.js 项目1运行服务备用电脑同样环境1冗余替换无线路由器或手机热点1提供局域网HDMI线 转接头2连接大屏U盘存数据备份1导出名单主持人话术卡1配合节拍这套配置撑起200人左右的年会绰绰有余扩展到大几百人理论上也没问题毕竟一个Node服务处理几百个WebSocket连接并不是很吃力的事情。如果再大型一些可以提前在服务器上做压测连续开几百个页面模拟连接。就年会这个场景而言大多数情况下只要提前彩排一次现场基本稳。我自己这几年帮朋友折腾过好几套活动系统最大的心得其实是“越简单的方案越有安全感”。开源工具虽然要自己部署看起来多几个步骤但换来的是数据可控、流程可控、现场可控。年会抽奖这种一年只干一次的事用自己反复测试过的系统比临时抱佛脚找在线网页要踏实得多。希望这篇踩坑记录能帮各位把年会抽奖这个环节顺顺利利拿下来。
阅读完成 · 觉得有帮助？
