HTML5 Server-Sent Events 原型设计 - 模棱两可的错误和重复轮询? [英] HTML5 Server-Sent Events prototyping - ambiguous error and repeated polling?

问题描述

我正在尝试处理服务器端事件，因为它们完全符合我的要求，并且看起来应该很容易实现，但是我无法克服一个模糊的错误以及连接反复出现的情况关闭并重新打开.我尝试过的所有内容都基于 this 和其他教程.

I'm trying to get to grips with Server-Side Events as they fit my requirements perfectly and seem like they should be simple to implement, however I can't get past a vague error and what looks like the connection repeatedly being closed and re-opened. Everything I have tried is based on this and other tutorials.

PHP 是单个脚本:

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

function sendMsg($id, $msg) {
  echo "id: $id" . PHP_EOL;
  echo "data: $msg" . PHP_EOL;
  echo PHP_EOL;
  ob_flush();
  flush();
}

$serverTime = time();
sendMsg($serverTime, 'server time: ' . date("h:i:s", time()));
?>

JavaScript 看起来像这样(在身体负荷下运行):

and the JavaScript looks like this (run on body load):

function init() {

    var source;
    if (!!window.EventSource) {
        source = new EventSource('events.php');
        source.addEventListener('message', function(e) {
            document.getElementById('output').innerHTML += e.data + '<br />';
        }, false);
        source.addEventListener('open', function(e) {
            document.getElementById('output').innerHTML += 'connection opened<br />';
        }, false);
        source.addEventListener('error', function(e) {
            document.getElementById('output').innerHTML += 'error<br />';
        }, false);
    }
    else {
        alert("Browser doesn't support Server-Sent Events");
    }
}

我搜索了一些，但找不到有关

I have searched around a bit but can't find information on

1. 如果 Apache 需要任何特殊配置来支持服务器发送的事件，以及
2. 如何使用这种设置从服务器启动推送(例如，我可以简单地从 CLI 执行 PHP 脚本以推送到已连接的浏览器吗?)

如果我在 Chrome (16.0.912.77) 中运行这个 JS，它会打开连接，接收时间，然后是错误(错误对象中没有有用的信息)，然后在 3 秒内重新连接并经历相同的过程.在 Firefox (10.0) 中，我得到了相同的行为.

If I run this JS in Chrome (16.0.912.77) it opens the connection, receives the time, then errors (with no useful information in the error object), then reconnects in 3 seconds and goes through the same process. In Firefox (10.0) I get the same behaviour.

EDIT 1:我认为问题可能与我使用的服务器有关，因此我在 vanilla XAMPP 安装上进行了测试，但出现了相同的错误.基本的服务器配置是否应该能够在不修改/额外配置的情况下处理这个问题?

EDIT 1: I thought the issue could be related to the server I was using, so I tested on a vanilla XAMPP install and the same error comes up. Should a basic server configuration be able to handle this without modification / extra configuration?

EDIT 2:以下是浏览器输出的示例:

EDIT 2: The following is an example of output from the browser:

connection opened
server time: 01:47:20
error
connection opened
server time: 01:47:23
error
connection opened
server time: 01:47:26
error

谁能告诉我这是哪里出了问题?我看过的教程使它看起来像 SSE 非常简单.此外，对我上面的两个编号问题的任何答案都会非常有帮助.

Can anyone tell me where this is going wrong? The tutorials I have seen make it look like SSE is very straightforward. Also any answers to my two numbered questions above would be really helpful.

谢谢.

推荐答案

问题在于你的 php.

The problem is your php.

根据您编写 php 脚本的方式，每次执行仅发送一条消息.如果您直接访问 php 文件，这就是它的工作方式，如果您使用 EventSource 访问该文件，这就是它的工作方式.所以为了让你的php脚本发送多条消息，你需要一个循环.

With the way your php script is written, only one message is sent per execution. That's how it works if you access the php file directly, and that's how it works if you access the file with an EventSource. So in order to make your php script send multiple messages, you need a loop.

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

function sendMsg($id, $msg) {
  echo "id: $id" . PHP_EOL;
  echo "data: $msg" . PHP_EOL;
  echo PHP_EOL;
  ob_flush();
  flush();
}
while(true) {
  $serverTime = time();
  sendMsg($serverTime, 'server time: ' . date("h:i:s", time()));
  sleep(1);
}
?>

我已更改您的代码以包含在每条消息发送后等待 1 秒的无限循环(按照此处找到的示例:使用服务器发送的事件).

I have altered your code to include an infinite loop that waits 1 second after every message sent (following an example found here: Using server-sent events).

这种类型的循环是我目前正在使用的，它消除了持续断开连接并每 3 秒重新连接一次.但是(我只在 chrome 中测试过)，连接现在只保持活动 30 秒.我将继续弄清楚为什么会这样，当我找到解决方案时我会发布一个解决方案，但在那之前，这至少应该让你更接近你的目标.

This type of loop is what I'm currently using and it eliminated the constant connection drop and reconnect every 3 seconds. However (and I've only tested this in chrome), the connections are now only kept alive for 30 seconds. I will be continuing to figure out why this is the case and I'll post a solution when I find one, but until then this should at least get you closer to your goal.

希望有所帮助，

为了使用 php 保持连接打开的时间长得可笑，您需要设置 max_execution_time(感谢 tomfumb).这至少可以通过三种方式实现:

In order to keep the connection open for ridiculously long times with php, you need to set the max_execution_time (Thanks to tomfumb for this). This can be accomplished in at least three ways:

1. 如果您可以更改 php.ini，请更改max_execution_time"的值.这将允许您的所有脚本在您指定的时间内运行.
2. 在您希望长时间运行的脚本中，使用函数 ini_set(key, value)，其中 key 是max_execution_time"，value 是您希望脚本运行的时间(以秒为单位).
3. 在您希望长时间运行的脚本中，使用函数 set_time_limit(n)，其中 n 是您希望脚本运行的秒数.

这篇关于HTML5 Server-Sent Events 原型设计 - 模棱两可的错误和重复轮询?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！