HTML5服务器事件发送(Server-Sent Events)【HTML5教程 - 第十三篇】

2019-03-18 09:53|来源: 未知

Server-Sent Events - 单向的信息处理

一个SSE(server send event)指web页面直接从服务器得到更新信息。

这在以前也是可行的,但是web页面必须主要去查询是否有更新。但使用SSE,更新将自动发送过来。


浏览器支持

iefirefoxchromeoperasafari

除了IE,Firefox,Chrome,Opera和Safari 5都支持这个特性。


得到服务器发送的信息提示

EventSource对象用来得到服务器发送的信息提示:

var source=new EventSource("demo_sse.php");
source.onmessage=function(event){
  document.getElementById("result")
          .innerHTML+=event.data + "<br />";
};


在线演示


演示代码说明:

  • 创建一个EventSource对象,指定发送更新的页面URL (这里是demo_see.jsp)

  • 每一次一个更新接收后,onmessage事件就触发

  • 当onmessage时间触发,将得到的数据设置到id="result"的元素中


检查浏览器的SSE支持

if(typeof(EventSource)!=="undefined"){
  // Yes! Server-sent events support!
  // Some code.....
}else{
  // Sorry! No server-sent events support..
}


服务器端代码

对于上面的例子,你需要有一个服务器端的发送数据更新的代码(JSP,PHP或者ASP等)。

服务器端的事件流语法方式很简答。设置content-type头信息为”text/event-stream"后,你就可以发送事件流。

PHP代码如下:

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
 
$time = date('r');
echo "data: >> 服务器时间: {$time}\n\n";
flush();
?>

ASP代码如下:

<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: >> 服务器时间" & now())
Response.Flush()
%>

JSP代码如下:

<%@ page contentType="text/event-stream; charset=UTF-8"%>
<%
response.setHeader("Cache-Control", "no-cache");
out.print("data: >> 服务器时间" + new java.util.Date() );
out.flush();
%>

代码功能说明:

  • 设置content-type为"text/event-stream",Event stream编码一定需要是utf-8。

  • 指定页面不可缓存

  • 需要发送的输出数据 (一定需要以"data:"开头)

  • flush输出数据到web页面

EventSource对象

EventsDescription
onerrorWhen an error occurs
onmessageWhen a message is received
onopenWhen a connection to the server is opened

以上表中包含了我们以上例子中使用的onmessage方法,及其其它你可以使用的相关方法。


本文链接:HTML5教程 - 第十三篇:HTML5服务器事件发送(Server-Sent Events),转自:http://www.gbin1.com/tutorials/html5-tutorial/html5-sse/

相关问答

更多

是否有与Microsoft5服务器发送的事件相同的Microsoft?(Is there a Microsoft equivalent for HTML5 Server-Sent Events?)

总之,没有。 微软在任何版本的IE中都没有包含SSE或等效的SSE。 海事组织,你有两个很好的选择: 使用polyfill - 我在IE10和IE11中使用这个polyfill的测试都很成功。 因为它以if ("EventSource" in global) return; ,它只会在不支持EventSource浏览器中运行。 改用websockets - 虽然它需要更多的服务器端设置( ws://协议), 但它可以在IE10和11中运行,并提供更多选项,如双向通信。 In a word, no. ...

HTML5服务器发送的事件:如何设置withCredentials选项?(HTML5 Server-Sent Events: How to set withCredentials option?)

我没有尝试过,但按照您链接到的规范,我相信它会是这样的: var stocks = new EventSource("events.php", { withCredentials: true }); 如果您访问http://www.w3.org/TR/WebIDL/#idl-exceptions然后向上滚动查看上面的示例,您可以看到使用字典设置初始值的类似模式。 I've not tried it, but going by the spec you link to, I believe it ...

服务器发送的事件(Server-Sent Event)

好 document.getElementById("result").innerHTML+="<br>" + event.data; 获取文档并APPENDS新数据。 我很惊讶你还没试过 document.getElementById("result").innerHTML =event.data + "<br>" + document.getElementById("result").innerHTML; Well document.getElementById("result").in ...

服务器发送事件Golang(server-sent events Golang)

SSE标准要求浏览器在N秒后自动重新连接,如果连接丢失或服务器故意关闭套接字。 (在Firefox中默认为5,在Chrome和Safari中默认为3,上次我检查过。)因此,如果需要,您不需要做任何事情。 (在WebSockets中,您必须为自己实现这种重新连接。) 如果不希望这种重新连接,你应该向客户端发回一条消息,说“节目已经结束,消失”。 例如,如果您要传输财务数据,您可能会在周五晚上市场关闭时发送。 然后,客户端应拦截此消息并从其侧面关闭连接。 (然后套接字将消失,因此服务器进程将自动关闭。 ...

Keepalive和服务器发送的事件信号器(Keepalives and Server-sent events Signalr)

以下博客文章的结尾显示了如何使用Fiddler的COMETPeek功能来检查正在进行的服务器发送的事件响应: http ://stevenhollidge.blogspot.com/2013/07/c-client-for-server-side-event.html The end of the following blog post shows how to use Fiddler's COMETPeek feature to inspect ongoing server-sent event ...

服务器发送的事件 - 还值得一试吗?(Server-sent events - still worth checking out?)

如果你需要快速和肮脏的东西,没有WebSockets的所有功能,以及稳定和支持的东西,以及没有任何已知的安全问题,那么SSE就可以了。 If you need something quick and dirty, without all the bells and whistles of WebSockets, and something that's stable and supported, as well as doesn't have any known security issues, ...

HTML5服务器端事件 - 显示(HTML5 Server Side Events - display)

而不是像这样将新数据添加到结果div内容中... document.getElementById("result").innerHTML += event.data + "<br>"; ...我们用新数据替换结果div内容和它的旧内容。 document.getElementById("result").innerHTML = event.data + "<br>" + document.getElementById("result").innerHTML; 您可以将它粘贴到他们的试用窗口中以 ...

SignalR在Chrome上使用服务器发送的事件(SignalR using server-sent event on Chrome)

这是一个错误。 每当新版本的浏览器出现时我们都会遇到困难,我们需要验证该东西是否仍然有效。 这是该问题的突出错误https://github.com/SignalR/SignalR/issues/2719 It's a bug. One that we struggle with everytime a new version of a browser comes out we need to verify that thing still work. Here's the outstanding ...

HTML5 Server使用不同的事件与不同的URL发送事件(HTML5 Server Sent Events using different events vs different urls)

如果这两种类型的事件仍然在同一个应用程序中,那么最佳解决方案是使用单个SSE连接并在流中使用不同类型的事件。 这样可以减少打开连接的数量以及建立和保持活动的开销。 如果您在同一页面上有两个独立的应用程序(例如股票代码和聊天窗口),那么为了保持代码库独立,拥有两个独立的流可能会更容易。 If those two types of events are still in the same application then the best solution is to use single SSE c ...

服务器发送的事件通过清漆代理(Server-sent events through a varnish proxy)

你试过在vcl_recv中返回管道吗? 从文档 : 管道也可以从vcl_recv返回。 管道短路客户端和后端连接,Varnish将坐在那里来回移动字节。 Varnish不会查看来回发送的数据 - 因此您的日志将不完整。 请注意,使用HTTP 1.1,客户端可以在同一连接上发送多个请求,因此您应该指示Varnish在实际返回管道之前添加“Connection:close”标头。 不要错过你只需要为SSE传入请求返回管道 。 Have you tried to return pipe in vcl_r ...