Hello serversentevent(cn)

2,216 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,216
On SlideShare
0
From Embeds
0
Number of Embeds
836
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Hello serversentevent(cn)

  1. 1. Html5<br /><html5><br /><figure>Server-Sent Event</figure><br /><a href='mailto:leonguo@sohu-inc.com'>leonguo</a><br /><time>2010.10</time><br /></html5><br />
  2. 2. Agenda<br />一个广泛的适用场景<br />现阶段采用的一些解决方案及不足(AJAX、Comet)<br />规范(html5 Server-Sent Event)<br />实例<br />更多细节<br />Q&A<br />
  3. 3. In many cases<br />只需要服务端实时的向浏览器推送就可以了<br />Example:<br />在线人数实时统计<br />球赛实况<br />股票实时动态<br />新闻公告板<br />
  4. 4. The current scheme<br />Polling Ajax<br />浪费了大量连接、流量与时延<br />Comet(Ajax/Iframe)<br />缺乏统一的标准<br />实现复杂<br />
  5. 5. Server-Sent Events<br />Server-Sent Events(SSE) 实际上是将 Comet 技术进行了标准化<br />规范和标准化了一个连续的数据流如何被从服务端发送到浏览器<br />SSE 包含新的HTML元素 EventSource 和新的 MIME 类型 text/event-stream,这个MIME类型定义了事件框架格式。<br />
  6. 6. API <br />client.js<br />document.addEventListener('DOMContentLoaded', function() {<br /> var eventSrc = new EventSource('events.php');<br /> eventSrc.addEventListener('open', function (event) {<br /> console.log(event.type);<br /> });<br /> eventSrc.addEventListener('message', function (event) {<br />console.log(event.type);<br /> console.log(event.data);<br /> });<br />}, false);<br />events.php<br /><?php<br />header("Content-Type: text/event-streamnn");<br />echo 'data: ' . time() . "n";<br />
  7. 7. A Original Demo<br />
  8. 8. More<br />使用共享的 WebWorker,共享 EventSource 实例<br />尽量在没有其它数据发送时定期发送 keep-alive 注释,以防被当作空闲连接被代理服务器关闭,<br />尽管sever-sent events 会自动重建连接<br />在 Response header 中标记 Cache-Control:no-cache 避免被缓存<br />可以结合使用 Request 中的 Last-Event-Id 防止重复接受已经接收到的事件<br />
  9. 9. Browser Support for SSE<br />和 WebSocket 相比比较沉默<br />http://www.findmebyip.com/litmus#target-selector<br />目前已经支持的包括<br />WebKit(safari/chrome)<br />Opera<br />Firefox Beta<br />
  10. 10. Q&A<br />
  11. 11. THANKS<br />

×