使用EventSource实现页面消息推送 与 websocket 的区别

什么是EventSource

确切的说应该问什么是Server-Sent Events(简称SSE)？Wikipedia的介绍是这样的:

Server-sent events (SSE) is a technology where a browser receives automatic updates from a server via HTTP connection. The Server-Sent Events EventSource API is standardized as part of HTML5[1] by the W3C.

大致翻译下就是：SSE是一种能让浏览器通过HTTP连接自动收到服务器端更新的技术，SSE EventSource 接口被W3C制定为HTML5的一部分。

W3C部分的链接可以看这个： EventSource

这个技术的作用是可以完成从服务器端到客户端（浏览器）单向的消息传送。因此我们可以用这个来做推送。不过需要注意的是，IE并不支持该技术。

这个技术相对于Websocket简单很多，但是SSE只是从服务器端往客户端单向传输数据，因此和websocket场景的应用场景还有些差别。

SSE使用起来也非常简单，比如我们的这个场景，把Terminal的输出重定向到web界面上。

虽然IE本身不支持，但是可以通过EventSource.js来实现兼容。

HTML5的Server-Sent Events介绍

      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>

    <meta charset="UTF-8">

    <title>Basic 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时，将继续返回当前时间： 

 
代码中数据格式是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 http://localhost:" + port);

在控制台，运行 node datepush2.js，在浏览器中访问 http://127.0.0.1:1234/sse2 ，效果如下截图： 

 

假设您曾经有javascript编程经验，代码并不难看懂。前端是HTML5，后端可以是PHP, JSP, Node.js, Asp.net等应用。

Tips: 不所有浏览器都支持SSE，可以使用以下Javascript来判断：

if(typeof(EventSource)!=="undefined"){

   // Yes! Server-sent events support!

   }

 else{

   // Sorry! No server-sent events support in our system

   }

目前浏览器支持情况：

Browser	Supported	Notes
Internet Explorer	No	IE is not supported
Mozilla Firefox	Yes	Version 6.0
Google Chrome	Yes	GC is Supported
Opera	Yes	Version 11
Safari	Yes	Version 5.0

希望对您WEB应用程序开发有帮助。