html5sse,html5sse SASSCSS3和SassyCSS

SSE(Server-Send Events)实践

HTTP 是客户端-服务器计算模型中的请求-响应协议。要开始交换，客户端向服务器提交请求。为了完成交换，服务器向客户端返回响应。服务器只能向一个客户端发送响应 （发出请求的那个） 。在 HTTP 协议中，客户端是消息交换的发起者。

服务器发送事件 (SSE) 是一种简单的技术，用于为特定的 Web 应用程序实现服务器到客户端的异步通信。

有多种技术允许客户端从服务器接收有关异步更新的消息。它们可以分为两类： 客户端拉取 和 服务器推送 。

在客户端拉取技术中，客户端会定期向服务器请求更新。服务器可以使用更新或尚未更新的特殊响应进行响应。有两种类型的客户端拉取：短轮询和长轮询。

客户端定期向服务器发送请求。如果服务器有更新，它会向客户端发送响应并关闭连接。如果服务器没有更新，它也会向客户端发送一个响应并关闭连接。

客户端向服务器发送请求。如果服务器有更新，它会向客户端发送响应并关闭连接。如果服务器没有更新，它会保持连接直到更新可用。当更新可用时，服务器向客户端发送响应并关闭连接。如果更新在某个超时时间内不可用，服务器会向客户端发送响应并关闭连接。

在服务器推送技术中，服务器在消息可用后立即主动向客户端发送消息。其中，有两种类型的服务器推送：SSE和 WebSocket。

SSE 是一种在基于浏览器的 Web 应用程序中仅从服务器向客户端发送文本消息的技术。SSE基于 HTTP 协议中的持久连接， 具有由 W3C 标准化的网络协议和 EventSource 客户端接口，作为 HTML5 标准套件的一部分。

WebSocket 是一种在 Web 应用程序中实现同时、双向、实时通信的技术。WebSocket 基于 HTTP 以外的协议（TCP），因此可能需要额外设置网络基础设施（代理服务器、NAT、防火墙等）。

客户端通过Http协议请求，在握手阶段升级为WebSocket协议。

在数据字段中，服务器可以发送事件数据

服务器可以发送唯一的事件标识符（id字段）。如果连接中断，客户端会 自动重新连接 并发送最后接收到的带有header的 Last-Event-ID 的事件 ID。

在重试字段中，服务器可以发送超时（以毫秒为单位），之后客户端应在连接中断时自动重新连接。如果未指定此字段，则标准应为 3000 毫秒。

如果一行以冒号字符 : 开头，客户端应该忽略它。这可用于从服务器发送评论或防止某些代理服务器因超时关闭连接。

要打开连接，应创建一个 EventSource 对象。

尽管 SSE 旨在将事件从服务器发送到客户端，但可以使用 GET 查询参数将数据从客户端传递到服务器。

要关闭连接，应调用方法 close()。

有表示连接状态的 readyState 属性：

客户端接收消息并处理他们，可以使用onmessage方法

SSE可被大多数浏览器支持：

Spring Web MVC 框架 5.2.0 是基于 Servlet 3.1 API 且用线程池实现异步应用程序. 所以应用能够被使用在 Servlet 3.1+ 的容器，比如：Tomcat 8.5 和 Jetty 9.3.

使用Spring MVC来发送事件:

示例：

在这个例子中，服务器每秒发送一个持续时间短的周期性事件流 - 一个有限的词流，直到词完成。

示例：

运行效果：

客户端示例（words.html）：

运行效果：

在此示例中，服务器发送持久的周期性事件流 - 每秒可能无限的服务器性能信息流：

效果预览（每秒输出一次）：

非周期性是指没有固定的时间周期，可能由其他因素在任意时刻都可能触发，下面示例通过spring event来模拟触发因子。

效果:

模拟触发动作：调用

客户端收到数据：

Spring Web Flux 框架 5.2.0 是基于 Reactive Streams API 且使用 event-loop 计算模型来实现异步java应用程序。 此类应用程序可以在非阻塞 Web 服务器（例如 Netty 4.1 和 Undertow 1.4）和 Servlet 3.1+ 容器（例如 Tomcat 8.5 和 Jetty 9.3）上运行。

使用 Spring Web Flux 框架实现发送事件：

简单示例：

和上面spring mvc的示例一样，也是每秒输出数据，实现如下：

效果：

对比spring mvc的实现，我们改为flux实现，如下：

效果和上面是一样的，可以看出，reactive api是非常的简洁。

相关问答

Q1: server-sent event后台用.net怎样实现

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

sse1

现在Web App中，大都有Ajax，是这样子：

sse2

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

sse3

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

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

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

!doctype html

html

head

meta charset="UTF-8"

titleBasic SSE Example/title

/head

body

pre id="x"Initializing.../pre

script

var es = new EventSource("basic_sse.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);

}

?

您可以使用Apache Server 这里我们把它们放在SinaAppEngine上，浏览器FireFox访问basic_see.html时，将继续返回当前时间：

sse4

代码中数据格式是data: datetime. 在这儿，我们还可以使用Node.js来做服务端，datepush.js代码是这样的：

var http = require("http");

http.createServer(function(request, response){

response.writeHead(200, { "Content-Type": "text/event-stream" });

setInterval(function(){

var content = "data:" +

new Date().toISOString() + "\n\n";

response.write(content);

}, 1000);

}).listen(1234);

完善一下功能，如果我们用Node.js来返回HTML，代码是这样的datepush.js：

var http = require("http"), fs = require("fs");

var port = parseInt( process.argv[2] || 1234 );

http.createServer(function(request, response){

console.log("Client connected:" + request.url);

if(request.url!="/sse"){

fs.readFile("basic_sse.html", function(err,file){

response.writeHead(200, { 'Content-Type': 'text/html' });

var s = file.toString(); //file is a buffer

s = s.replace("basic_sse.php","sse");

response.end(s);

});

return;

}

//Below is to handle SSE request. It never returns.

response.writeHead(200, { "Content-Type": "text/event-stream" });

var timer = setInterval(function(){

var content = "data:" + new Date().toISOString() + "\n\n";

var b = response.write(content);

if(!b)console.log("Data got queued in memory (content=" + content + ")");

else console.log("Flushed! (content=" + content + ")");

},1000);

request.connection.on("close", function(){

response.end();

clearInterval(timer);

console.log("Client closed connection. Aborting.");

});

}).listen(port);

console.log("Server running at :" + port);

Q2: 一对一直播源码开发，即时通讯技术实现有哪几种选择？

在一对一直播交友源码的开发过程中，即时通讯是最关键的功能之一。那一对一直播源码系统是如何实现即时通讯的呢？

即时通讯就是实时语音文字视频等交流，实现即时通讯目前有四种方式：短轮询、长轮询、SSE、websocket，接下来我们来按顺序简单了解一下。

（1）短轮询

即每隔一小段时间就发送一个请求到服务器，服务器返回最新数据然后客户端根据获得的数据来更新界面，这样就间接地实现了即时通信。这一方式的优点是简单，缺点是对服务器的压力较大，浪费带宽的流量，但通常情况下数据都是没有发生改变的。

（2）长轮询

即客户端发送一个请求到服务器，然后服务器查看客户端请求的数据（就是服务器中的数据）是否发生变化，如果发生变化，就会立即响应返回，否则保持这个链接并定期检查最新数据，直到发生了数据更新或者连接超时。因此，客户端连接一旦断开，就会再次发出请求，这样一来，在相同的时间内大大减少了客户端请求服务器的次数。这一方式有一个弊端：服务器长时间的连接会消耗资源，返回数据的顺序无法保证，管理和维护困难。

（3）SSE

即服务器推送事件，为了解决浏览器只能够单向传输数据到服务端，HTML5提供了一种新的技术叫做服务器推送事件SSE。SSE技术提供的是从服务器单向推送数据给浏览器的功能，但是配合浏览器主动请求，实际上就是实现客户端与服务器之间的双向通信。

（4）Websocket

在HTML5中，为了加强web的功能，提供了websocket技术，它不仅是一种web通信方式，也是一种应用层协议。它提供了浏览器和服务器之间原生的全双工跨域通信。通过浏览器和服务器之间所建立的websocket连接，在同一时刻能够实现客户端到服务器和服务器到客户端的数据发送。

Q3: 数据推送是云计算的特点吗

数据推送是云计算的特点。

云计算的数据推送方法、装置、电子设备及系统时。应用本申请方案，能够在用户行为数据的第一特征向量的基础上进一步挖掘额外的特征维度，提高对用户行为数据的特征分析的效率和全面性，避免遗漏特征维度。

这样，能够准确、完整地确定出用户行为数据对应的目标特征向量，然后基于该目标特征向量准确地确定期望数据并进行推送，进而提高云端服务器在数据推送过程中的推送准确性，避免数据的误推送。

数据推送介绍

如今，数据推送技术在网站和Web应用中得到了广泛应用，比如在拍卖网络应用中推送出价，在售书网站推送新评论，在在线游戏中推送新高分，推送用户感兴趣的微博，等等。

本书是一本简明的数据推送技术指南，作者通过构建一个真实的例子，手把手地向读者展示如何利用HTML5 SSE（Server-Sent Events，服务端推送事件）这项非凡的技术，无需轮询或者用户交互，就可以将数据从服务器端推送到客户端。

Q4: Web前后端交互方式

HTTP长连接

HTTP1.1协议具备的，TCP连接一直不断保持着，Connection:keep-alive头来验证是否支持。

Web交互方式

普通轮询：普通的前后端通信方式，请求中多半无用，可以使用HTTP长连接技术；可以使用AJAX（XMLHttpRequest类），也可以使用ifram方式请求；实时性差。

长轮询：对于有实时性要求的场景（其实在两次连接之间，还是会有实时性问题），客户端发送请求后，后端hold住，有数据时才返回，客户端收到后断开，再启用新的请求进行连接，通过这样的方式模拟服务端推送。节省了反复建立连接的开销，但是服务器端会一直while保持着连接消耗资源，服务器端需要设置好超时时间（set_time_limit），有数据时返回（flushob_flush）超时时间内如果没有数据返回，则需要跳出断开连接，以免死循环。这种模式被称为反向AJAX/Comet，由服务器端进行数据实时推送。问题是：服务端开销依然很大，每次通信都需要一次请求，HTTP请求头中带大量Cookie等信息，浪费带宽。IE不支持AJAX，因此需要iframe代替。

SSE（Server-Sent Evetns）：HTML5的Comet方案。SSEAPI创造到服务器端的单向连接，服务端推送的模式，服务器响应的MINE必须是“text/event-stream”，用于服务器端给客户端实时传数据，只进行一次连接，则后续服务端可以一直传送数据。

数据流：在长轮询的基础上，收到数据后不要断开连接，继续接受服务端数据；由于数据流是不断的，所以需要客户端自己来处理解析数据和管理游标，增量处理获得的数据，增加了逻辑复杂度。

Websocket：替代长轮询方式，减少开销。