坤坤邀请你一起发弹幕

183 阅读1分钟

d813f5a2c2376ba3fe5378bb8303ef7.png

掘金举办了个编程比赛,顺便推码上掘金一把。 各路程序猿朋友纷纷脑洞大开,百花齐放。鄙人不才,也做提交了一件作品支持下比赛,这是一个实时弹幕系统,加了一些动画和有趣的交互。

前端代码和演示在这(点击右上角“查看详情”,不然尺寸不对):code.juejin.cn/pen/7160990…

弹幕样式和动画

有炫酷的背景和弹幕动画。

image.png

image.png

image.png

以及一个需要输入特定字符触发彩蛋的弹幕样式:

image.png

快捷入口

这里提供一些掘金官方入口,方便各位进行跳转。

image.png

弹幕统计

对在线人数、弹幕数、彩蛋触发数进行统计:

image.png

技术实现

可以看到,实时通信主要是通过websocket实现,使用了框架Socket.io,后端是用NodeMysql。 前端除此之外没有什么特别的了。

欢迎大家来观摩指教:code.juejin.cn/pen/7160990… 点击右上角“查看详情”。觉得好玩的点个赞,感谢各位。