显示像facebook这样的直播内容?

时间:2011-10-01 02:27:44

标签: jquery ajax facebook live

我很好奇facebook如何能够直播内容。例如,当一个用户发表评论时,来自世界其他地方的另一个人可以在用户评论之后看到该评论出现。

我知道ajax / jquery可以在不刷新页面的情况下执行.append(数据),但不会在其他用户上显示。会吗?

3 个答案:

答案 0 :(得分:1)

我不确定Facebook究竟是如何做到这一点的,但是它是如何运作的。

  1. 用户对项目的评论
  2. 评论已发布到服务器
  3. 服务器处理评论
  4. 服务器查找订阅该项目的人员(帖子,图片等),并通过新评论通知对其进行ping操作
  5. 其他客户(未发表评论的客户)请求返回评论数量的页面
  6. 他们将评论计数与FB的评论计数进行比较。如果它们不相同,请申请新评论
  7. 请参阅https://www.facebook.com/notes/facebook-engineering/inside-facebook-messages-application-server/10150162742108920

    修改

    深入了解您应该使用的功能。 首先,你有一个评论列表。

    <ul id="comments" style="list-style-type: none;">
    
    </ul>
    

    我将list-style-type设置为none,因此子弹不会显示。

    当页面加载时,您使用jquery AJAX函数来对提供注释的页面执行HTTP GET请求。然后使用

    将它们注入DOM
    $('#comments').html(loadedAJAXData);
    

    其中loadedAJAXData是您从GET请求获得的数据。

    所以注入的数据看起来像这样 -

    <li>Comment 1
    <li>Comment 2
    <li>Foo
    

    现在评论列表看起来像这样 -

    <ul id="comments" style="list-style-type: none;">
    <li>Comment 1
    <li>Comment 2
    <li>Foo
    </ul>
    

    所以你现在有了你的意见。有人发表新评论?它将发送到您的网站,该网站会在数据库中插入新的注释行。

    假设您有另一个页面,您可以从中请求注释数量。让我们称之为comments.php?count。

    // set interval
    var tid = setInterval(getCommentsCount, 2000);
    function getCommentsCount() {
    //AJAX will request comment count from comments.php?count . 
    //Comment count is stored  in the variable newCommentCount. Previous or cached comment //count is stored in oldCommentCount.
      if(oldCommentCount != newCommentCount){ //If we have a different number of comments
        for(int i = oldCommentCount;i<newCommentCount;i++){
           //For each new comment
           //Make a request to comments.php?get=commentOffset
           //Then inject it into the DOM using
           $('#comments').append(comment);
           oldCommentCount++;
           }
      }
      // no need to recall the function (it's an interval, it'll loop forever)
    }
    

    例如,在此脚本中,浏览器每2秒请求一次评论计数。我们的 oldCommmentCount 为0.我们的 newCommentCount 为2.对于每个新评论,我们都会向 comments.php?get = commentOffset 发出请求。其中 commentOffset i 。请求新注释,我们获取其数据,将其附加到注释列表,然后增加oldCommentCount。

答案 1 :(得分:1)

尝试这样的事情:

function checkServer() {
  $.ajax('http://example.com/check', {data: ''}, function(data) {
    // Process data changes here
  }, 'json');
}

$(document).ready(function() {
  setInterval("checkServer()", 500)
});

答案 2 :(得分:0)

这是一个向服务器发出的ajax,服务器查询数据库并返回任何新的注释,因为查询命中数据库,任何用户写入表中的任何新注释都将被返回。