如何实现基本的“长轮询”？

php http comet

2022-08-30 05:47:01

我可以找到很多关于长轮询如何工作的信息（例如，这个和这个），但没有关于如何在代码中实现它的简单示例。

我能找到的只是 cometd，它依赖于 Dojo JS 框架，以及一个相当复杂的服务器系统。

基本上，我如何使用Apache来为请求提供服务，以及如何编写一个简单的脚本（例如，在PHP中）来“长时间轮询”服务器以获取新消息？

该示例不必是可扩展的，安全的或完整的，它只需要工作！

答案 1

这比我最初想象的要简单。基本上，您有一个不执行任何操作的页面，直到您要发送的数据可用（例如，收到新消息）。

这是一个非常基本的例子，它在2-10秒后发送一个简单的字符串。返回错误的几率为 1/3 404（在即将到来的 Javascript 示例中显示错误处理）

msgsrv.php

<?php
if(rand(1,3) == 1){
    /* Fake an error */
    header("HTTP/1.0 404 Not Found");
    die();
}

/* Send a string after a random number of seconds (2-10) */
sleep(rand(2,10));
echo("Hi! Have a random number: " . rand(1,10));
?>

注意：对于一个真正的站点，在像Apache这样的常规Web服务器上运行它将很快占用所有“工作线程”，并使其无法响应其他请求。有办法解决这个问题，但建议在Python的扭曲中编写一个“长轮询服务器”，它不依赖于每个请求一个线程。cometD是一个流行的（有多种语言版本），而Tornado是专门为此类任务制作的新框架（它是为FriendFeed的长轮询代码构建的）...但举个简单的例子，Apache绰绰有余！这个脚本可以很容易地用任何语言编写（我选择Apache / PHP，因为它们非常常见，而且我碰巧在本地运行它们）

然后，在Javascript中，您请求上述文件（），并等待响应。当你得到一个时，你就对数据采取行动。然后，您请求文件并再次等待，对数据执行操作（并重复）msg_srv.php

以下是此类页面的示例。加载页面时，它会发送文件的初始请求。如果成功，我们将消息附加到div，然后在1秒后再次调用waitForMsg函数，这将触发等待。msgsrv.php#messages

1秒是一个非常基本的速率限制器，没有这个就可以正常工作，但如果总是立即返回（例如语法错误） - 你淹没浏览器，它可以很快冻结。最好检查文件是否包含有效的 JSON 响应，和/或保持每秒请求总数，并相应地暂停。setTimeout()msgsrv.php

如果页面错误，它会将错误附加到div，等待15秒，然后重试（与每条消息后等待1秒的方式相同）#messages

这种方法的好处是它非常有弹性。如果客户端互联网连接中断，它将超时，然后尝试重新连接 - 这是轮询工作时间所固有的，不需要复杂的错误处理

无论如何，使用jQuery框架的代码：long_poller.htm

<html>
<head>
    <title>BargePoller</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript" charset="utf-8"></script>

    <style type="text/css" media="screen">
      body{ background:#000;color:#fff;font-size:.9em; }
      .msg{ background:#aaa;padding:.2em; border-bottom:1px #000 solid}
      .old{ background-color:#246499;}
      .new{ background-color:#3B9957;}
    .error{ background-color:#992E36;}
    </style>

    <script type="text/javascript" charset="utf-8">
    function addmsg(type, msg){
        /* Simple helper to add a div.
        type is the name of a CSS class (old/new/error).
        msg is the contents of the div */
        $("#messages").append(
            "<div class='msg "+ type +"'>"+ msg +"</div>"
        );
    }

    function waitForMsg(){
        /* This requests the url "msgsrv.php"
        When it complete (or errors)*/
        $.ajax({
            type: "GET",
            url: "msgsrv.php",

            async: true, /* If set to non-async, browser shows page as "Loading.."*/
            cache: false,
            timeout:50000, /* Timeout in ms */

            success: function(data){ /* called when request to barge.php completes */
                addmsg("new", data); /* Add response to a .msg div (with the "new" class)*/
                setTimeout(
                    waitForMsg, /* Request next message */
                    1000 /* ..after 1 seconds */
                );
            },
            error: function(XMLHttpRequest, textStatus, errorThrown){
                addmsg("error", textStatus + " (" + errorThrown + ")");
                setTimeout(
                    waitForMsg, /* Try again after.. */
                    15000); /* milliseconds (15seconds) */
            }
        });
    };

    $(document).ready(function(){
        waitForMsg(); /* Start the inital request */
    });
    </script>
</head>
<body>
    <div id="messages">
        <div class="msg old">
            BargePoll message requester!
        </div>
    </div>
</body>
</html>

答案 2

我有一个非常简单的聊天示例作为slosh的一部分。

编辑：（因为每个人都在这里粘贴他们的代码）

这是使用长轮询和晃动的完整基于 JSON 的多用户聊天。这是如何进行调用的演示，因此请忽略XSS问题。没有人应该在不先对其进行消毒的情况下部署它。

请注意，客户端始终与服务器有连接，一旦有人发送消息，每个人都应该立即看到它。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Copyright (c) 2008 Dustin Sallings <dustin+html@spy.net> -->
<html lang="en">
  <head>
    <title>slosh chat</title>
    <script type="text/javascript"
      src="http://code.jquery.com/jquery-latest.js"></script>
    <link title="Default" rel="stylesheet" media="screen" href="style.css" />
  </head>

  <body>
    <h1>Welcome to Slosh Chat</h1>

    <div id="messages">
      <div>
        <span class="from">First!:</span>
        <span class="msg">Welcome to chat. Please don't hurt each other.</span>
      </div>
    </div>

    <form method="post" action="#">
      <div>Nick: <input id='from' type="text" name="from"/></div>
      <div>Message:</div>
      <div><textarea id='msg' name="msg"></textarea></div>
      <div><input type="submit" value="Say it" id="submit"/></div>
    </form>

    <script type="text/javascript">
      function gotData(json, st) {
        var msgs=$('#messages');
        $.each(json.res, function(idx, p) {
          var from = p.from[0]
          var msg = p.msg[0]
          msgs.append("<div><span class='from'>" + from + ":</span>" +
            " <span class='msg'>" + msg + "</span></div>");
        });
        // The jQuery wrapped msgs above does not work here.
        var msgs=document.getElementById("messages");
        msgs.scrollTop = msgs.scrollHeight;
      }

      function getNewComments() {
        $.getJSON('/topics/chat.json', gotData);
      }

      $(document).ready(function() {
        $(document).ajaxStop(getNewComments);
        $("form").submit(function() {
          $.post('/topics/chat', $('form').serialize());
          return false;
        });
        getNewComments();
      });
    </script>
  </body>
</html>