关于HTML5服务器发送事件(SSE)
2014-08-29 04:21
375 查看
最近在看 W3School 上关于 HTML 5 的教程。在看到 HTML 5 服务器发送事件 ( SSE, server-sent event ) 时,没怎么弄明白示例代码是怎么回事,寻找其他教程,大部分也只给出了类似的代码,没有解释。花了一点时间,大概弄清楚了,这里记录一下。
下面是 W3School 上的一段示例代码,包含客户端的 JavaScript ,以及服务端的 PHP 代码:
这段代码不断的从 demo_sse.php 获取数据,并将得到的结果输出到 id 为 result 的 div 中。
这段代码将服务器当前时间,回复给客户端。最终,客户端页面上显示出了如下结果:
页面每3秒钟显示1次服务器时间。这一过程,具体是如何实现的?这里存在一个明显的问题:对于 demo_sse.php 来说,每次相应客户端的请求,服务端只会输出1次系统当前时间,使用
左边列表中,每一项代表了一次 HTTP 请求,可以看到,客户端 (浏览器),每3秒钟向 demo_sse.php 发出一次 GET 请求,且每次请求都一模一样。客户端确实是采取了一种类似于轮询 ( pull ) 的方式获取更新,这并不是我们想要的结果。
举个例子,如果这个网页需要显示 Apple 公司的实时股价,我们更倾向于当股价有变化时,服务器主动将变化后的股价推送给客户端,而不是客户端每隔3秒询问一次服务端,Apple 公司的股价有没有变化 (在移动客户端中,问题更严重,轮询式的更新将极大增加用户设备的电量消耗,缩短待机时间,并消耗用户的流量)。
那么如何实现让服务器主动推送呢。其实很简单,只要让服务器保持 HTTP 会话不关闭,当有新的更新时,立刻输出,并
保持客户端的代码不变。客户端页面,每隔10秒钟显示一行递增的数字。并且从抓包结果看,客户端只对服务端发起了一次 HTTP 请求,从而实现了每当有新的信息,服务器主动推送到客户端 ( push ),而非客户端轮询 ( pull )。
必须说明,这段代码只是为了演示 SSE 如何工作,并没有任何实用价值。使用 PHP 通过这样的方式维持长时间的 HTTP 会话并不优雅。事实上,保持客户端页面一段时间后,HTTP 会话被服务器因超时中断。这时,客户端将在3秒后,再次发出 GET 请求,直到服务端再次中断,等待3秒后再次发出请求……客户端不断循环这一过程。
一段示例代码
利用 SSE,网页可以自动获取来自服务器的更新。以前也可能做到这一点 ( 如 AJAX ),前提是网页不得不询问是否有可用的更新。通过服务器发送事件,更新能够自动到达。简单说就是把轮询获取更新的方式 ( pull ) ,改为接受服务器主动推送的方式 ( push )。下面是 W3School 上的一段示例代码,包含客户端的 JavaScript ,以及服务端的 PHP 代码:
var source = new EventSource("demo_sse.php"); source.onmessage = function(event) { document.getElementById("result").innerHTML += event.data + "<br />"; };
这段代码不断的从 demo_sse.php 获取数据,并将得到的结果输出到 id 为 result 的 div 中。
<?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(); ?>
这段代码将服务器当前时间,回复给客户端。最终,客户端页面上显示出了如下结果:
The server time is: Fri, 29 Aug 2014 02:03:21 +0800 The server time is: Fri, 29 Aug 2014 02:03:24 +0800 The server time is: Fri, 29 Aug 2014 02:03:27 +0800 The server time is: Fri, 29 Aug 2014 02:03:30 +0800 The server time is: Fri, 29 Aug 2014 02:03:33 +0800 The server time is: Fri, 29 Aug 2014 02:03:36 +0800 The server time is: Fri, 29 Aug 2014 02:03:39 +0800 The server time is: Fri, 29 Aug 2014 02:03:42 +0800 The server time is: Fri, 29 Aug 2014 02:03:45 +0800 The server time is: Fri, 29 Aug 2014 02:03:48 +0800 ...
页面每3秒钟显示1次服务器时间。这一过程,具体是如何实现的?这里存在一个明显的问题:对于 demo_sse.php 来说,每次相应客户端的请求,服务端只会输出1次系统当前时间,使用
flush()方法清空输出缓冲区,本次 HTTP 会话立刻结束。那页面为何会显示出一连串的时间戳呢?如果客户端每过一个时间间隔,就向服务器发出一次请求,那么和之前的轮询式 ( pull ) 更新方式有什么区别呢?
发生了什么
首先确认,这段 JavaScript 代码都做了什么,用简单的 HTTP 抓包程序,得到了下图中的结果:左边列表中,每一项代表了一次 HTTP 请求,可以看到,客户端 (浏览器),每3秒钟向 demo_sse.php 发出一次 GET 请求,且每次请求都一模一样。客户端确实是采取了一种类似于轮询 ( pull ) 的方式获取更新,这并不是我们想要的结果。
举个例子,如果这个网页需要显示 Apple 公司的实时股价,我们更倾向于当股价有变化时,服务器主动将变化后的股价推送给客户端,而不是客户端每隔3秒询问一次服务端,Apple 公司的股价有没有变化 (在移动客户端中,问题更严重,轮询式的更新将极大增加用户设备的电量消耗,缩短待机时间,并消耗用户的流量)。
那么如何实现让服务器主动推送呢。其实很简单,只要让服务器保持 HTTP 会话不关闭,当有新的更新时,立刻输出,并
flush()即可。下面的例子中,服务端保持 HTTP 会话不中断,每隔10秒,发送一个递增的数字。
<?php header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); $i = 0; while (true) { echo "data: ". $i++ ."\n\n"; flush(); // 暂停10秒 sleep(10); } ?>
保持客户端的代码不变。客户端页面,每隔10秒钟显示一行递增的数字。并且从抓包结果看,客户端只对服务端发起了一次 HTTP 请求,从而实现了每当有新的信息,服务器主动推送到客户端 ( push ),而非客户端轮询 ( pull )。
必须说明,这段代码只是为了演示 SSE 如何工作,并没有任何实用价值。使用 PHP 通过这样的方式维持长时间的 HTTP 会话并不优雅。事实上,保持客户端页面一段时间后,HTTP 会话被服务器因超时中断。这时,客户端将在3秒后,再次发出 GET 请求,直到服务端再次中断,等待3秒后再次发出请求……客户端不断循环这一过程。
相关文章推荐
- html5之sse服务器发送事件EventSource介绍
- HTML5之服务器发送事件
- HTML5 服务器发送事件(server-sent events)
- HTML5支持服务器发送事件(Server-Sent Events)-单向消息传递数据推送(C#示例)
- Websockets和SSE(服务器发送事件的疑问
- SSE:服务器发送事件,使用长链接进行通讯
- HTML5-桌面式web应用-与web服务器通信( XHR, 服务器发送事件, Web Socket:)
- HTML5 服务器发送事件(Server-Sent Events)介绍
- HTML5 服务器发送事件(Server-Sent Events)介绍
- SSE:服务器发送事件,使用长链接进行通讯
- HTML5_服务器发送事件
- HTML5--服务器发送事件
- HTML5 服务器发送事件(Server-Sent Events)
- HTML5 服务器发送事件 Server-Send
- HTML5服务器发送事件(Server-Send Events)
- [ASP.NET MVC] Real-time之HTML5 服务器发送事件(server-sent event)
- SSE技术详解:一种全新的HTML5服务器推送事件技术
- SSE:服务器发送事件
- 转:SSE:服务器发送事件
- html5实现服务器发送事件