在HTML5服务器发送事件中设置时间间隔 [英] Setting time interval in HTML5 server sent events

问题描述

我想从服务器到客户端定期发送更新。为此，我使用了服务器发送的事件。我正在粘贴以下代码：

I want to send regular updates from server to client. For that I used server-sent event. I'm pasting the codes below:

客户端

获取服务器更新

<script>
if(typeof(EventSource)!="undefined")
{
   var source=new EventSource("demo_see.php");
   source.onmessage=function(event)
   {
      document.getElementById("result").innerHTML=event.data + "<br>";
   }
}
else
{
   document.getElementById("result").innerHTML="Sorry, your browser does not support    server-sent events...";
}
</script>
</body>
</html>

服务器端

<?php
    header('Content-Type: text/event-stream');
    header('Cache-Control: no-cache');
    $x=rand(0,1000);
    echo "data:{$x}\n\n";
    flush();
?>

代码工作正常，但每隔 3秒发送更新。我想以毫秒为单位发送更新。我在 flush（）之后尝试 sleep（1），但它只会将间隔进一步增加1秒。有没有人有一个想法我怎么能做到这一点？

The code works fine but it sends updates in every 3 seconds. I want to send updates in milliseconds. I tried sleep(1) after flush() but it only increases the interval further by 1 sec. Does anyone have an Idea how I can accomplish this?

另外，我可以使用服务器发送的事件发送图像吗？

Also, can I send images using server-sent events?

推荐答案

正如上面的评论中所讨论的那样，在一个带有 sleep 或的无限循环中运行PHP脚本> usleep 有两个原因不正确

As discussed in the comments above running a PHP script in an infinite loop with a sleep or a usleep is incorrect for two reasons

• 浏览器不会看到任何事件数据（可能是等待当该脚本仍在运行时，首先关闭连接。我记得SSE的早期浏览器实现允许这样但不再是这种情况。


• 即使它在浏览器端工作，你仍然会遇到PHP脚本的问题运行时间过长（直到PHP.ini time_out设置启动）。如果这发生一次或两次就可以了。如果有X千个浏览器同时从您的服务器寻找相同的SSE，它将关闭您的服务器。

正确的方法事情是让您的PHP脚本响应事件流数据，然后像往常一样正常终止。如果要控制浏览器何时再次尝试，请提供重试值（以毫秒为单位）。以下是一些示例代码

The right way to do things is to get your PHP script to respond with event stream data and then gracefully terminate as it would normally do. Provide a retry value - in milliseconds - if you want to control when the browser tries again. Here is some sample code

function yourEventData(&$retry)
{
 //do your own stuff here and return your event data.
 //You might want to return a $retry value (milliseconds)
 //so the browser knows when to try again (not the default 3000 ms)
}

header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
header('Access-Control-Allow-Origin: *');//optional

$data = yourEventData($retry);

echo "data:{$str}\n\nretry:{$retry}\n\n";

作为对原始问题的回答，这是一个位，但不过为了完整性：

As an answer to the original question this is a bit late but nevertheless in the interests of completeness:

以这种方式轮询服务器时得到的只是数据。之后你用它做什么完全取决于你。如果您想将这些数据视为图像并更新网页中显示的图像，您只需执行

What you get when you poll the server in this way is just data. What you do with it afterwards is entirely up to you. If you want to treat those data as an image and update an image displayed in your web page you would simply do

document.getElementById("imageID").src = "data:image/png;base64," + Your event stream data;

原则如此之多。我偶尔会忘记重试必须以毫秒为单位并最终返回，例如，重试：5 \ n \ n 令我惊讶的是，这仍然有效。但是，我会毫不犹豫地使用SSE以100ms的间隔更新浏览器端图像。更典型的用法是沿着以下行：

So much for the principles. I have on occasion forgotten that retry has to been in milliseconds and ended up returning, for example, retry:5\n\n which, much to my surprise, still worked. However, I would hesitate to use SSE to update a browser side image at 100ms intervals. A more typical usage would be along the following lines

• 用户请求服务器上的作业。该作业要么排队落后于其他工作，要么可能花费相当多的时间来执行（例如创建PDF或Excel电子表格并将其发回）


• 没有让用户等待没有反馈 - 并且冒着超时的危险 - 可以启动SSE，告诉浏览器ETA完成作业，重试值已设置，因此浏览器知道何时再次查看结果。


• ETA用于向用户提供一些反馈


• 在浏览器将再次显示ETA结束（浏览器会自动执行此操作，因此您无需执行任何操作）


• 如果由于某种原因服务器未完成作业，则应在事件中指示流返回，例如 data {code： - 1} \ n\ n 所以浏览器端代码可以优雅地处理这种情况。

• User requests a job on the server. That job either gets queued behind other jobs or is likely to take quite a bit of time to execute (e.g. creating a PDF or an Excel spreadsheet and sending it back)
• Instead of making the user wait with no feedback - and risking a timeout - one can fire up an SSE which tells the browser the ETA for the job to finish and a retry value is setup so the browser knows when to look again for a result.
• The ETA is used to provide the user with some feedback
• At the end of the ETA the browser will look again (browsers do this automatically so you need do nothing)
• If for some reason the job is not completed by the server it should indicate that in the event stream it returns, e.g. data{"code":-1}\n\n so browser side code can deal with the situation gracefully.

还有其他使用场景 - 更新股票报价，新闻标题等。以100毫秒的间隔更新图像感觉 - 纯粹是个人观点 - 就像滥用技术一样。

There are other usage scenarios - updating stock quotes, news headlines etc. Updating images at 100ms intervals feels -a purely personal view - like a misuse of the technology.

这篇关于在HTML5服务器发送事件中设置时间间隔的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！