HTML5 服务器发送事件

HTML HTML 评论

Server-Sent Events

Server-Sent Events(SSE)用于网页自动获取服务器上更新的数据，它是一个实时性的机制

实时性获取数据

  • Polling(轮询)：在客户端重复的向服务端发送新请求。如果服务器没有新的数据更动，关闭本次连接。然后客户端在稍等一段时间之后，再次发起新请求，一直重复这样的步骤。

  • Long-polling(长轮询)：在长轮询中，客户端发送一个请求到服务端。如果服务端没有新的数据更动，那么本次连接将会被保持，直到等待到更新后的数据，返回给客户端并关闭这个连接。

  • Server-Sent Events：SSE类似于长轮询的机制，但是它在每一次的连接中，不只等待一次数据的更动。客户端发送一个请求到服务端 ，服务端保持这个请求直到一个新的消息准备好，将消息返回至客户端，此时不关闭连接，仍然保持它，供其它消息使用。SSE的一大特色就是重复利用一个连接来处理每一个消息（又称event）。

  • WebSocker：WebSocket不同于以上的这些技术，因为它提供了一个真正意义上的双向连接。WebSocket是HTML5中非常强大的新特性，已经得到广泛应用。

Server-Sent Events实现在后台获取时间，不断发送给前台。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<body>
<h1>获得服务器更新</h1>
<div id="result"></div>

<script>
  if(typeof(EventSource)!=="undefined"){
    var source=new EventSource("/example/html5/demo_sse.php");
    source.onmessage=function(event){
      document.getElementById("result").innerHTML+=event.data + "<br />";
      alert("提示有新的内容");
      this.location.reload(); 
    };
  } else {
    document.getElementById("result").innerHTML="抱歉，您的浏览器不支持 server-sent 事件 ...";
  }
</script>

</body>
</html>

服务端代码

1
2
3
4
5
6
7
8
<?php
  header('Content-Type: text/event-stream');
  header('Cache-Control: no-cache');

  $time = date('r');
  echo "data: The server time is: {$time}\n\n";
  flush();
?>

EventSource对象

属性描述
onopen当通信服务器连接被打开
onmessage当接收到消息
onerror当发生错误

其他自动刷新方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
// 1.页面自动刷新：把如下代码加入<head>区域中 

<meta http-equiv="refresh" content="20">,其中20指每隔20秒刷新一次页面. 

// 2.页面自动跳转：把如下代码加入<head>区域中 

<meta http-equiv="refresh" content="20;url=http://www.jb51.net">
// 其中20指隔20秒后跳转到http://www.jb51.net页面 

// 3.页面自动刷新js版 

<script language="javascript"> 
function myrefresh(){ 
  window.location.reload(); 
} 
setTimeout('myrefresh()',1000); 
//指定1秒刷新一次 
</script> 

// 4.websocker

<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>websocket</title>
    
      <script type="text/javascript">
         function WebSocketTest()
         {
            if ("WebSocket" in window)
            {
               alert("您的浏览器支持 WebSocket!");
               
               // 打开一个 web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
                
               ws.onopen = function()
               {
                  // Web Socket 已连接上，使用 send() 方法发送数据
                  ws.send("发送数据");
                  alert("数据发送中...");
               };
                
               ws.onmessage = function (evt) 
               { 
                  var received_msg = evt.data;
                  alert("数据已接收...");
               };
                
               ws.onclose = function()
               { 
                  // 关闭 websocket
                  alert("连接已关闭..."); 
               };
            }
            
            else
            {
               // 浏览器不支持 WebSocket
               alert("您的浏览器不支持 WebSocket!");
            }
         }
      </script>
        
   </head>
   <body>
   
      <div id="sse">
         <a href="javascript:WebSocketTest()">运行 WebSocket</a>
      </div>
      
   </body>
</html>

Anily前端 & Web Developer

任何值得做的事就值得把它做好。- Whatever is worth doing is worth doing well.