V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
RihcardLu
V2EX  ›  问与答

弹幕实现技术(后台)

  •  
  •   RihcardLu · 2015-05-27 16:03:37 +08:00 · 14140 次点击
    这是一个创建于 3472 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

    31 条回复    2015-05-28 12:18:56 +08:00
    hging
        1
    hging  
       2015-05-27 16:21:58 +08:00
    弹幕嘛. 就相当于聊天室嘛在后台来看. (个人感觉.
    herold519
        2
    herold519  
       2015-05-27 16:23:12 +08:00
    感觉想多了 弹幕其实说白了就是一个留言板根据视频播放时间滚动播出。。
    Septembers
        3
    Septembers  
       2015-05-27 16:26:53 +08:00
    吧TA想象成 动 态 字 幕
    lincanbin
        4
    lincanbin  
       2015-05-27 16:29:11 +08:00
    实时消息推送基本都是websocket,例如百度贴吧和知乎的实时回复消息的推送。
    lincanbin
        5
    lincanbin  
       2015-05-27 16:29:59 +08:00
    百度贴吧是不是websocket我也不确定了,可能是长连接也可能是websocket
    m939594960
        6
    m939594960  
       2015-05-27 16:47:27 +08:00
    斗鱼弹幕 flash socket 然后调用JS 输出到网页
    acfun弹幕 一个XML文件 类似
    [1:12]老司机带带我
    [2:12]大家不要吵了给我王者小弟一个嘴巴子
    RihcardLu
        7
    RihcardLu  
    OP
       2015-05-27 17:03:21 +08:00
    @herold519 @Septembers 那要是动态字幕一下子很多很多呢。ps:动态字幕又是怎么做到。
    RihcardLu
        8
    RihcardLu  
    OP
       2015-05-27 17:05:12 +08:00
    @m939594960 你说的这两种技术,低版本浏览器的支持怎么样?
    TangMonk
        9
    TangMonk  
       2015-05-27 17:06:23 +08:00
    socketio sockjs现成的
    hging
        10
    hging  
       2015-05-27 17:08:26 +08:00
    @RihcardLu 嘛-.- 题目说是后台. 其实还是前台嘛. 前台现在都是flash做的. 再低端的浏览器只要有flash就一样的呈现哟.
    RihcardLu
        11
    RihcardLu  
    OP
       2015-05-27 17:10:31 +08:00
    @lincanbin websocket好像是11年才写到标准里的。
    RihcardLu
        12
    RihcardLu  
    OP
       2015-05-27 17:11:43 +08:00
    @TangMonk thanks,我去查查
    Septembers
        13
    Septembers  
       2015-05-27 17:11:44 +08:00
    @RihcardLu 后端本质上储存的是一个 弹幕序列,如果同一时间片段内有其他的人发 弹幕 就广播出来
    m939594960
        14
    m939594960  
       2015-05-27 17:22:04 +08:00
    @RihcardLu 第一种是直播用的 实时性 比较高! flash做的基本不会有兼容闻听
    第二种主要i应用于视频
    兼容性也没问题 因为也是基于flash的
    typcn
        15
    typcn  
       2015-05-27 17:37:10 +08:00
    @m939594960 Flash 做的非常有兼容问题,全部手机不支持,Macbook 相当发热等。
    另外:V2 好多人已卸载
    RihcardLu
        16
    RihcardLu  
    OP
       2015-05-27 17:39:12 +08:00
    @typcn 斗鱼,土豆弹幕都支持手机,那是怎么做的呢?
    typcn
        17
    typcn  
       2015-05-27 17:53:54 +08:00
    @RihcardLu 他们是单独做了手机 APP
    ipconfiger
        18
    ipconfiger  
       2015-05-27 17:57:11 +08:00
    就是把实时刷新的聊天室横过来显示在视频的上一层而已了啊
    paloalto
        19
    paloalto  
       2015-05-27 17:59:23 +08:00
    paloalto
        20
    paloalto  
       2015-05-27 18:00:02 +08:00
    上面链接多了个句号 http://www.perber.com/
    kxxoling
        21
    kxxoling  
       2015-05-27 20:37:51 +08:00
    HTML5 弹幕的话如何解决性能问题?屏幕上几百条滚动弹幕压力很大的吧?
    shiznet
        22
    shiznet  
       2015-05-27 23:04:46 +08:00 via iPhone
    @kxxoling web端应该没压力吧,传过来的不过是纯文本。
    kxxoling
        23
    kxxoling  
       2015-05-27 23:46:00 +08:00
    @shiznet 几百个元素的动画效果,应该会很吃 CPU 吧?现在的 CSS3 动画貌似很占资源。(或者用 canvas?这个不了解。)
    hjc4869
        24
    hjc4869  
       2015-05-28 02:01:21 +08:00
    直播弹幕用长轮询,回放弹幕用xml。
    paloalto
        25
    paloalto  
       2015-05-28 03:34:08 +08:00   ❤️ 1
    @shiznet 纯文本的动画也会消耗性能的。即使是用 translate3d 做位移,几十条、几百条同时移动风扇也会受不了。
    @kxxoling 用 canvas 做可能会好很多。
    yangff
        26
    yangff  
       2015-05-28 08:46:32 +08:00 via Android
    kxxoling
        27
    kxxoling  
       2015-05-28 10:11:17 +08:00
    @yangff 这个我知道,不过看不懂复杂的 JS 模块=。=能讲解一下性能上的思路吗?
    yangff
        28
    yangff  
       2015-05-28 10:23:38 +08:00 via Android   ❤️ 1
    @kxxoling 我记得还是css和svg,canvas在字体上有问题。以及其他各种问题。。

    https://github.com/jabbany/CommentCoreLibrary/issues/13
    abcfyk
        29
    abcfyk  
       2015-05-28 12:01:17 +08:00
    @hjc4869 长轮询性能消耗如何?
    RihcardLu
        30
    RihcardLu  
    OP
       2015-05-28 12:06:12 +08:00
    @abcfyk 相当于过几秒钟访问一次,如果直播可能访问的更加频繁。
    celon
        31
    celon  
       2015-05-28 12:18:56 +08:00
    用websocket注册广播明显比长轮询要高效啊
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3109 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 13:36 · PVG 21:36 · LAX 05:36 · JFK 08:36
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.