How to use it? Net?

HTML5 has a server send event (SSE) function that allows the server to push data to the client. (usually called data push). Let's take a look at the simple timing diagram of traditional WEB application communication:

sse 1

Most Web App now have Ajax, something like this:

sse2

This is the case with data-based push. When there is new data in the data source, it will be sent to the client immediately without waiting for the client's request. These new data may be the latest news, the latest stock market, friends' chat information, weather forecast and so on.

sse3

The functions of data pull and push are the same, and users get new data. But data push also has some advantages. You may have heard that Comet, Ajax push, reverse Ajax, HTTP streaming, WebSockets and SSE are different technologies. Perhaps the biggest advantage is low latency. SSE is used for web applications to refresh data without user action.

You may have heard of WebSockets in HTML5, which can also push data to the client. WebSockets is a more complex technology to implement the server, but it is a true full-duplex socket. The server can push data to the client, and the client can also push data back to the server. SSE works under HTTP/HTTPS protocol and supports proxy server and authentication technology. SSE is a text protocol, and you can easily debug it. If you need to send most binary data from the server to the client, WebSocket is a better choice.

Let's look at a simple example, starting with the front-end basic_sse.html:

& lt！ doctype html & gt

& lthtml & gt

& lthead & gt

& ltmeta charset="UTF-8 " >

< title > basic SSE example < /title & gt；

& lt/head & gt；

& ltbody & gt

& ltpre id="x "> initializing ... & lt/pre & gt；;

& lt script & gt

var es = new event source(" basic _ SSE . PHP ")；

Es.addEventListener("message ",function (e) (

document.getElementById("x ")。 innerHTML+= " \ n "+e . data；

}, false);

& lt/script & gt；

& lt/body & gt；

& lt/html & gt；

The back end is a basic_sse.php page:

& lt？ Server-side programming language (abbreviation of professional hypertext preprocessor)

Header ("Content Type: Text/Event Stream");

while(true){

Echo "data:" Date ("Y-m-d H:i:s"). ”\ n \ n”；

@ ob _ flush()； @ flush()；

Sleep (1);

}

& gt

You can use Apache server. Here we put them on SinaAppEngine. When the browser FireFox accesses basic_see.html, it will continue to return to the current time:

sse4

The data format in the code is data: datetime. Here, we can also use Node.js as the server. The code of datepush.js is like this:

var http = require(" http ")；

Http.createServer (function (request, response) {

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

setInterval(function(){

var content = "data:" +

New date (). toiso string()+" \ n \ n "；

Response.write (content);

}, 1000);

). Listen (1234);

In order to improve the function, if we use Node.js to return HTML, the code is datepush.js:

var http = require("http ")，fs = require(" fs ")；

var port = parse int(process . argv[2]| | 1234)；

Http.createServer (function (request, response) {

Console.log ("client connection:"+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()； //The file is a buffer

s = s.replace("basic_sse.php "，" SSE ")；

Response. End;

});

Return;

}

//The following is to handle SSE requests. It will never come back.

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

var timer = setInterval(function(){

Var content = "data:"+new date (). toiso string()+" \ n \ n "；

Var b = response.write (content);

If (! B)console.log ("Data is queued in memory (content ="+content+"));

Else console.log ("refresh! (content = "+content+")；

}, 1000);

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

response . end()；

ClearInterval (timer);

Console.log ("The client closes the connection. Aborting. );

});

}). Listen (port);

Console.log ("the server runs at http://localhost:"+port ");