O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Sse api

HTML5 Server-Sent Events API

  • Entre para ver os comentários

  • Seja a primeira pessoa a gostar disto

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行內的組語寫兩個數字比大小的函式

×