弹幕实现技术（后台）

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 3461 天前的主题，其中的信息可能已经有所发展或是发生改变。

这里是把每个人发的弹幕实时的显示出来，开始以为是Ajax，一想不对劲，如此大量的请求和和实时显示怕是不行，打开控制台一看，果真不是。

后来搜到了是 websocket，基于web的socket协议。对于需要实时更新的产品来说确实是一种福音，如股票，web聊天。

有没有哪些网站用到了这种技术？

控制台

实时

WebSocket

31 条回复 • 2015-05-28 12:18:56 +08:00

hging

2015-05-27 16:21:58 +08:00

弹幕嘛. 就相当于聊天室嘛在后台来看. (个人感觉.

herold519

2015-05-27 16:23:12 +08:00

感觉想多了弹幕其实说白了就是一个留言板根据视频播放时间滚动播出。。

Septembers

2015-05-27 16:26:53 +08:00

吧TA想象成动态字幕

lincanbin

2015-05-27 16:29:11 +08:00

实时消息推送基本都是websocket，例如百度贴吧和知乎的实时回复消息的推送。

lincanbin

2015-05-27 16:29:59 +08:00

百度贴吧是不是websocket我也不确定了，可能是长连接也可能是websocket

m939594960

2015-05-27 16:47:27 +08:00

斗鱼弹幕 flash socket 然后调用JS 输出到网页
acfun弹幕一个XML文件类似
[1:12]老司机带带我
[2:12]大家不要吵了给我王者小弟一个嘴巴子

RihcardLu

2015-05-27 17:03:21 +08:00

@herold519 @Septembers 那要是动态字幕一下子很多很多呢。ps：动态字幕又是怎么做到。

RihcardLu

2015-05-27 17:05:12 +08:00

@m939594960 你说的这两种技术，低版本浏览器的支持怎么样？

TangMonk

2015-05-27 17:06:23 +08:00

socketio sockjs现成的

hging

2015-05-27 17:08:26 +08:00

@RihcardLu 嘛-.- 题目说是后台. 其实还是前台嘛. 前台现在都是flash做的. 再低端的浏览器只要有flash就一样的呈现哟.

RihcardLu

2015-05-27 17:10:31 +08:00

@lincanbin websocket好像是11年才写到标准里的。

RihcardLu

2015-05-27 17:11:43 +08:00

@TangMonk thanks，我去查查

Septembers

2015-05-27 17:11:44 +08:00

@RihcardLu 后端本质上储存的是一个弹幕序列，如果同一时间片段内有其他的人发弹幕就广播出来

m939594960

2015-05-27 17:22:04 +08:00

@RihcardLu 第一种是直播用的实时性比较高！ flash做的基本不会有兼容闻听
第二种主要i应用于视频
兼容性也没问题因为也是基于flash的

typcn

2015-05-27 17:37:10 +08:00

@m939594960 Flash 做的非常有兼容问题，全部手机不支持，Macbook 相当发热等。
另外：V2 好多人已卸载

RihcardLu

2015-05-27 17:39:12 +08:00

@typcn 斗鱼，土豆弹幕都支持手机，那是怎么做的呢？

typcn

2015-05-27 17:53:54 +08:00

@RihcardLu 他们是单独做了手机 APP

ipconfiger

2015-05-27 17:57:11 +08:00

就是把实时刷新的聊天室横过来显示在视频的上一层而已了啊

paloalto

2015-05-27 17:59:23 +08:00

之前做用 socket.io 做了 http://www.perber.com/。

paloalto

2015-05-27 18:00:02 +08:00

上面链接多了个句号 http://www.perber.com/

kxxoling

2015-05-27 20:37:51 +08:00

HTML5 弹幕的话如何解决性能问题？屏幕上几百条滚动弹幕压力很大的吧？

shiznet

2015-05-27 23:04:46 +08:00 via iPhone

@kxxoling web端应该没压力吧，传过来的不过是纯文本。

kxxoling

2015-05-27 23:46:00 +08:00

@shiznet 几百个元素的动画效果，应该会很吃 CPU 吧？现在的 CSS3 动画貌似很占资源。（或者用 canvas？这个不了解。）

hjc4869

2015-05-28 02:01:21 +08:00

直播弹幕用长轮询，回放弹幕用xml。

paloalto

2015-05-28 03:34:08 +08:00

@shiznet 纯文本的动画也会消耗性能的。即使是用 translate3d 做位移，几十条、几百条同时移动风扇也会受不了。
@kxxoling 用 canvas 做可能会好很多。

yangff

2015-05-28 08:46:32 +08:00 via Android

@paloalto
@kxxoling
https://github.com/jabbany/ABPlayerHTML5

kxxoling

2015-05-28 10:11:17 +08:00

@yangff 这个我知道，不过看不懂复杂的 JS 模块＝。＝能讲解一下性能上的思路吗？

yangff

2015-05-28 10:23:38 +08:00 via Android

@kxxoling 我记得还是css和svg，canvas在字体上有问题。以及其他各种问题。。

https://github.com/jabbany/CommentCoreLibrary/issues/13

abcfyk

2015-05-28 12:01:17 +08:00

@hjc4869 长轮询性能消耗如何？

RihcardLu

2015-05-28 12:06:12 +08:00

@abcfyk 相当于过几秒钟访问一次，如果直播可能访问的更加频繁。

celon

2015-05-28 12:18:56 +08:00

用websocket注册广播明显比长轮询要高效啊