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);
}
?>
HTML5的Server-Sent Events (SSE)的更多相关文章
- Play Framework, Server Sent Events and Internet Explorer
http://www.tuicool.com/articles/7jmE7r Next week I will be presenting at Scala Days . In my talk I w ...
- server sent events
server sent events server push https://html5doctor.com/server-sent-events/ https://developer.mozilla ...
- 【HTML5】浅析html使用SSE(Server-Sent Events)连接JSP
目录结构: // contents structure [-] 关于SSE的一些话 什么是SSE SSE的浏览器支持情况 SSE的工作机制 使用SSE连接JSP文件 HTMl页面 服务器端 错误 错误 ...
- SQL Server Extended Events 进阶 3:使用Extended Events UI
开始采用Extended Events 最大的阻碍之一是需要使用Xquery和XML知识用来分析数据.创建和运行会话可以用T-SQL完成,但是无论使用什么目标,数据都会被转换为XML.这个限制在SQL ...
- SQL Server Extended Events 进阶 2:使用UI创建基本的事件会话
第一阶中我们描述了如何在Profiler中自定义一个Trace,并且让它运行在服务器端来创建一个Trace文件.然后我们通过Jonathan Kehayias的 sp_SQLskills_Conver ...
- SQL Server Extended Events 进阶 1:从SQL Trace 到Extended Events
http://www.sqlservercentral.com/articles/Stairway+Series/134869/ SQL server 2008 中引入了Extended Events ...
- HTML5的Server-Sent Events介绍////////////////zzz
HTML5有一个Server-Sent Events(SSE)功能,允许服务端推送数据到客户端.(通常叫数据推送).我们来看下,传统的WEB应用程序通信时的简单时序图: 现在Web App中,大都有A ...
- HTML5的Server-Sent Events介绍
body{ font: 16px/1.5em 微软雅黑,arial,verdana,helvetica,sans-serif; } HTML5有一个Server-Sent Events(S ...
- HTML5支持服务器发送事件(Server-Sent Events)-单向消息传递数据推送(C#示例)
传统的WEB应用程序通信时的简单时序图: 现在Web App中,大都有Ajax,是这样子: HTML5有一个Server-Sent Events(SSE)功能,允许服务端推送数据到客户端.(通常叫数据 ...
随机推荐
- db2 alter table 语法
DB2 alter:add/delete/reset column 1.添加字段 alter table [table_name] add [column_name] [column_type] ...
- 创建maven项目出现的问题
右击项目无法显示maven图标,创建的pom.xml无法识别,并且创建maven项目时,一直显示Loading archetype list...
- linux 监控命令
先总结下常用的一些监控工具: ##linux命令 w 系统负载 lsof -p pid 进程打开的文件 lsof -i:port 端口的运行情况 free -m 内存情况 vmstat 进程.内存.内 ...
- Ubuntu下Android Studio安装、配置和使用
Ubuntu下使用Android Studio开发应用程序,首先需要安装该IDE. 情况1:Ubuntu下安装Android Studio 打开Terminal,执行下述指令: sudo apt-ad ...
- thinkphp I方法取传参
/** * 获取输入参数 支持过滤和默认值 * 使用方法: * <code> * I('id',0); 获取id参数 自动判断get或者post * I('post.name','','h ...
- UIApplication对象及其代理UIApplicationDelegate[转]
在开发过程中我们需要一些全局对象来将程序的各个部分连接起来,这些全局对象中最重要的就是UIApplication对象.但在实际编程中我们并不直接和UIApplication对象打交道,而是和其代理打交 ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(27)-权限管理系统-分配用户给角色
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(27)-权限管理系统-分配用户给角色 分配用户给角色,跟分配角色给用户操作是基本一致的. 打开模块维护,展 ...
- android中解析文件的三种方式
android中解析文件的三种方式 好久没有动手写点东西了,最近在研究android的相关技术,现在就android中解析文件的三种方式做以下总结.其主要有:SAX(Simple API fo ...
- [Angular 2] 9. Replace ng-modle with #ref & events
Let's say you want to write a simple data bing app. when you type in a text box, somewhere in the ap ...
- linux_2.6内核内存缓冲与I/O调度机制:
http://blog.csdn.net/kaiwii/article/details/7030178 到底是BIO还是BH?答案是BIO与BH