Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sse api

194 views

Published on

HTML5 Server-Sent Events API

Published in: Education
  • Be the first to comment

  • Be the first to like this

Sse api

  1. 1. HTML5 Server-Sent Events API
  2. 2. 使用情境 即時股市 即時新聞 Server Client http://xxx.csie.io web
  3. 3. 實作1 • Polling 簡單、快速 即時和負荷成正比 • Long-polling 負荷較低、較即時 server端較複雜
  4. 4. 實作2 • Server-sent-event 與Long-polling相似 單向傳輸 • WebSocket 雙向傳輸 server 需支援協定
  5. 5. outline • 簡介 • 如何使用 SSE • DEMO
  6. 6. 簡介 • 架構在http之上 • MIME type : text/event-stream • 跨平台及瀏覽器 ( IE、edge 不支援 ) • 單向傳輸 ( Server => Client ) • 自動重新連線、自定義事件
  7. 7. 傳送格式 • id:事件編號 • event:事件名稱 • data:傳送的資料 • retry:重新連線時間。 如: echo "id: 100n"; echo "data: 'first event'nn"; echo "id:101n"; echo "retry: 10000n"; echo "data: 'second event'nn";
  8. 8. server 端 ( test.php ) <?php header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); while(1) { $time = date('r'); echo "data: The server time is: {$time}nn"; flush(); sleep(3); } ?>
  9. 9. Client端 ( index.html ) <script> if (window.EventSource) { var source = new EventSource('test.php'); source.onmessage = function(event) { $("#result").innerHTML += event.data; }; } else //瀏覽器不支援 SSE,使用傳統的 xhr polling </script> The server time is: Sun, 15 Nov 2015 12:31:10 +0000 The server time is: Sun, 15 Nov 2015 12:31:13 +0000 The server time is: Sun, 15 Nov 2015 12:31:16 +0000 The server time is: Sun, 15 Nov 2015 12:31:19 +0000 The server time is: Sun, 15 Nov 2015 12:31:22 +0000 …………………..
  10. 10. DEMO
  11. 11. Reference • http://blogger.gtwang.org/2014/04/stream-updates-with-server-sent-events.html (HTML5 SSE API) • http://www.w3schools.com/html/html5_serversentevents.asp ( HTML5 SSE API , w3c school ) • http://www.waylau.com/web-real-time-push-technology/ ( web 多種推播技術比較 )
  12. 12. Q&A
  13. 13. 面試題 – 前端工程師 JavaScript • closure 是什麼? 應用在哪? • prototype 是什麼? 試寫函式 "123".lionic(2) => 123123 • ajax 是什麼? 優缺點? 如何解決缺點? • 用 jquery 更改 element 的 class、css • angular 的 service 與 factory的差別? • function、variable的初始化 nodejs • 該如何寫同步的程式碼? shellscript
  14. 14. 面試題 – 前端工程師 C語言 • stack、heap • 試寫link list的結構 • 試寫quick sort 其他 • global、local variable • get、post的差別,優缺點? • overloading、overriding? • process、thread的差別? • call by reference、call by pointer、call by value • semaphore、Mutex • i++ = ++j =k++ 每次的值 • 用10行內的組語寫兩個數字比大小的函式

×