HTML5的Server-Sent Events (SSE)

HTML5有一个Server-Sent Events(SSE)功能,允许服务端推送数据到客户端。(通常叫数据推送)。我们来看下,传统的WEB应用程序通信时的简单时序图:

现在Web App中,大都有Ajax,是这样子:

基于数据推送是这样的,当数据源有新数据,它马上发送到客户端,不需要等待客户端请求。这些新数据可能是最新闻,最新股票行情,来自朋友的聊天信息,天气预报等。

数据拉与推的功能是一样的,用户拿到新数据。但数据推送有一些优势。 你可能听说过Comet, Ajax推送, 反向Ajax, HTTP流,WebSockets与SSE是不同的技术。可能最大的优势是低延迟。SSE用于web应用程序刷新数据,不需要用户做任何动作。

你可能听说过HTML5的WebSockets,也能推送数据到客户端。WebSockets是实现服务端更加复杂的技术,但它是真的全双工
socket,
服务端能推送数据到客户端,客户端也能推送数据回服务端。SSE工作于存在HTTP/HTTPS协议,支持代理服务器与认证技术。SSE是文本协议你能轻
易的调试它。如果你需要发送大部二进制数据从服务端到客户端,WebSocket是更好的选择。

让我们来看一下很简单示例,先是前端basic_sse.html:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<pre id="x">Initializing...</pre>

<script type="text/javascript">
    var es=new EventSource("basic_see.php");
    es.addEventListener("message",function(e){
        document.getElementById("x").innerHTML+="\n"+ e.data;
    },false);

</script>
</body>
</html>

后端先是一个basic_sse.php页面:

<?php

header("Content-Type: text/event-stream");

while(true){

    echo "data:".date("Y-m-d H:i:s")."\n\n";

    @ob_flush();@flush();

    sleep(1);

}
?>
时间: 2024-10-12 02:48:05

HTML5的Server-Sent Events (SSE)的相关文章

What are Long-Polling, Websockets, Server-Sent Events (SSE) and Comet?

What are Long-Polling, Websockets, Server-Sent Events (SSE) and Comet?

SQL Server Extended Events 进阶 1:从SQL Trace 到Extended Events

http://www.sqlservercentral.com/articles/Stairway+Series/134869/ SQL server 2008 中引入了Extended Events 用以替换SQL Trace. 然而在第一个版本中并没有为用户提供UI,因此使用Extended Events并不是很方便.SQL Server 2012及时修正了这一点,将UI管理工具集成在SSMS中, 这就意味着我们不需要再为了查询Event XML而学习使用XQuery了.因此跟多的DBA和开

SQL Server Extended Events 进阶 3:使用Extended Events UI

开始采用Extended Events 最大的阻碍之一是需要使用Xquery和XML知识用来分析数据.创建和运行会话可以用T-SQL完成,但是无论使用什么目标,数据都会被转换为XML.这个限制在SQL Server 2012中已经被移除,它已经实现了Extended Events 用户界面.在SQL Server 2014中也基本没有变化,如我们在进阶2中所见,这个UI提供了创建和管理会话功能.在本阶中,我们将探索捕获数据的查看和处理的功能. 查看数据 当创建并启动会话后,我们有两种选择查看事件

html5的Web Worker和SSE(Server-Sent-Event)

web worker 是运行在后台的 JavaScript,不会影响页面的性能. 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能.您可以继续做任何愿意做的事情:点击.选取内容等等,而此时 web worker 在后台运行. 创建 web worker 文件 现在,让我们在一个外部 JavaScript 中创建我们的 web worker. 在这里,我们创建了计数脚本.该脚本

SQL Server Extended Events 进阶 2:使用UI创建基本的事件会话

第一阶中我们描述了如何在Profiler中自定义一个Trace,并且让它运行在服务器端来创建一个Trace文件.然后我们通过Jonathan Kehayias的 sp_SQLskills_ConvertTraceToExtendedEvents存储过程,将Trace定义转换为创建Extended Events 会话的脚本.希望它为你建立起了一座由SQL Trace 通向Extended Events开始的桥梁.当然,它也提供了一个将已有SQL Trace库转换为Extend Events的有效途

HTML5的Server-Sent Events介绍

body{ font: 16px/1.5em 微软雅黑,arial,verdana,helvetica,sans-serif; } HTML5有一个Server-Sent Events(SSE)功能,允许服务端推送数据到客户端.(通常叫数据推送).我们来看下,传统的WEB应用程序通信时的简单时序图: 现在Web App中,大都有Ajax,是这样子: 基于数据推送是这样的,当数据源有新数据,它马上发送到客户端,不需要等待客户端请求.这些新数据可能是最新闻,最新股票行情,来自朋友的聊天信息,天气预报

HTML5支持服务器发送事件(Server-Sent Events)-单向消息传递数据推送(C#示例)

传统的WEB应用程序通信时的简单时序图: 现在Web App中,大都有Ajax,是这样子: HTML5有一个Server-Sent Events(SSE)功能,允许服务端推送数据到客户端.(通常叫数据推送).基于数据推送是这样的,当数据源有新数据,它马上发送到客户端,不需要等待客户端请求.这些新数据可能是最新闻,最新股票行情,来自朋友的聊天信息,天气预报等. 数据拉与推的功能是一样的,用户拿到新数据.但数据推送有一些优势. 你可能听说过Comet, Ajax推送, 反向Ajax, HTTP流,W

初识html5 WebSocket

1.  WebSocket概念 WebSocket是HTML5开始提供的一种Client与Server间进行全双工(full-duplex)通讯的网络技术 双工(duplex),指二台通讯设备之间,允许有双向的资料传输 Client和Server通过WebSocket Protocol建立连接后,双方可以互传数据并且双方都可以关闭此连接 2. HTTP概念 HTTP Protocol是无状态协议的,Client和Server通过HTTP Protocol建立连接后,将采用"request-res

Long-Polling, Websockets, SSE(Server-Sent Event), WebRTC 之间的区别

在下面的示例中,客户端指的是浏览器,服务器指的是网站服务器主机. 为了更好的理解这些知识点,你应该简单了解典型的http网站是如何工作的. 普通的http: 客户端从服务器端请求网页 服务器作出相应的反应 服务器返回相应到客户端 AJAX Polling: 客户端使用普通的http方式向服务器端请求网页 客户端执行网页中的JavaScript轮询脚本,定期循环的向服务器发送请求(例如每5秒发送一次请求),获取信息 服务器对每次请求作出响应,并返回相应信息,就像正常的http请求一样 AJAX L