本文介绍了服务端推送事件(server-sent event)的应用场景和技术细节，包括客户端和服务端的实现代码。通过HTML5的新特性，实现了服务端主动向客户端推送数据的技术。
目前客户端（浏览器）和服务端交互大致有以下几种方式：
1）form表单提交方式，适合访问量不大，对用户体验要求不高的web系统开发，或者页面整体刷新无伤大雅的场合，通信方向是客户端提交给服务端，是客户端主动发起；
2）Ajax方式，特点是用户体验好，无需页面整体刷新，对服务器压力也小，有利于客户端和服务端的解耦，也是目前广为使用的一种客户端服务端交互方式，它也是通过客户端发起请求，服务端接受处理，通信方向和form表单相同；
3）server-sent-event,它是服务端主动向客户端（浏览器）发送数据，客户端监听并接受，然后处理，通信方向也是单向的，但是和上面两种相反，是服务端发起，客户端接受，但是其应用层协议还是基于http的。
4）web socket，这是将以前服务端通信的套接字原理实现在了浏览器上，使得浏览器和服务端可以相互发送消息，通信方向是双向的，只要连接一建立，双方都可以向对方发送数据，无需哪一方先来后来，应用层协议基于WS协议。
上面第3第4由于是HTML5中新添加的功能，所以在很多老版的浏览器中（如IE6-IE8）还不支持，因此应用还不够广泛.
这里主要实现的是第三种方式，即服务端推送事件，直接上代码
客户端代码
|
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
|
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><script> (function() { var
source; if
(!!window.EventSource) { source
= new EventSource('http://localhost/server.php'); } source.onmessage=function(e) { var
oSpan=document.createElement('span'); oSpan.innerHTML=e.data+"<br>"; var
oDiv=document.querySelector("#div1"); oDiv.appendChild(oSpan); } })();</script><div id="div1"></div></body></html> |
以上代码构造一个eventSource对象，指向一个服务端后台PHP文件，这个对象是HTML5中的服务端推送事件API封装对象，然后添加onmessage事件，用来监听服务端发送过来的消息，服务端一有消息发送，就会执行这个事件的回调函数，这里让它接收到数据之后将其包裹在span中并将这个span插入到div中。
服务端代码server.PHP
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<?phpheader('Content-Type:
text/event-stream');header('Cache-Control:
no-cache');function sendMsg($id, $msg)
{echo "id:
$id" .
PHP_EOL;echo "data:
$msg" .
PHP_EOL;echo PHP_EOL;ob_flush();flush();}for($i=0;$i<=1000;$i++){$serverTime =
time();sendMsg($serverTime, 'server
time: ' . date("h:i:s",
time()));sleep(2);} |
首先要设定其发送给客户端http报文中的首部
|
1
|
header('Content-Type:
text/event-stream');<span
style="font-size:
14px;">这是服务端推送事件特定的MIME类型，</span> |
|
1
|
header('Cache-Control:
no-cache');<span
style="font-size:
14px;">表示不让浏览器进行缓存</span><br><span
style="font-size:
14px;">然后每隔两秒向客户端发送一个时间戳，客户端接收到之后，显示到div中，效果如下：</span> |
扫一扫
1018
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
