微信大屏幕抽奖项目总结

发表于 |

项目背景

商家要在led上投放个抽奖页面，就是用户扫描二维码进入h5页面报名签到，签到成功后，led上就要及时显示已签到用户信息。

实现过程

由于页面要及时显示已签到用户，那么就要后端轮询去查询数据库是否有新用户签到，如果有新用户，就发送给前端。后端我用的是php，于是就打算尝试一下SSE（Server Send Event）,新插入的数据中，建立一个send字段来记录是否将已签到用户发送给前端，新插入已签到用户数据时，默认记录send字段值是-1，php去查询send=-1的数据，然后发送给前端，并将这些数据的send值设为1。php的SSE需要声明header('Content-Type: text/event-stream')来表示这是一个事件流脚本，并需要设置不缓存header("Cache-Control:no-cache,must-revalidate")，将数据组织好后，需要这样输出：

1
2
3
echo "retry: 3000\n\n";
echo "data:" . json_encode($responseinfo)."\n\n";
flush();

retry表示间隔时间是3000ms，输出的数据必须以data开头，以换行符\n结尾，前端收到的数据是字符串格式，所以需要后端组织成json，前端再把数据转成json。最后flush()表示再次执行。

(完)