淺談Html5及建立完整 web socket 應用觀念

6,742 views

Published on

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,742
On SlideShare
0
From Embeds
0
Number of Embeds
280
Actions
Shares
0
Downloads
37
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

淺談Html5及建立完整 web socket 應用觀念

  1. 1. 主題:淺談 HTML5 及建立完整 WebSocket 應用觀念 簡介:HTML5 推行好多年了,你開始使用了嗎?有什麼新功能是非用不可的嗎? 1. 認識 HTML5 可以做什麼:振動、GPS 資訊、陀螺儀方位這些行動裝置功能,不用 APP 網頁也做得到 2. 建立完整 WebSocket 使用觀念:從此不需要慢吞吞的重新整理網頁,被動的更新訊息 3. 從多方面深入了解 WebSocket 應用:多人混戰塗鴉、面對面聊天室、矛盾大對決的點 點點生死鬥
  2. 2. 搞基也可以很有愛 衝脫泡蓋ㄙㄨㄥˋ
  3. 3. 免俗 – 講者介紹 黃志賢 Hoyo 黑社會老大 hoyo.idv.tw – 在家自架 Server pc@hoyo.idv.tw – Google Apps 主要出沒 → 酷學園 專注在 FreeBSD + Apache + PHP + MySQL (MariaDB) 提供解決方案
  4. 4. 這是舒緩心情的緩衝頁
  5. 5. 淺談 HTML5 及 建立完整 WEBSOCKET 應用觀念 Hoyo Talk Men’s Love (感謝〝老大的女人〞提供) 我都基動了我 第一次簡報需要鬥雞眼做
  6. 6. 起因
  7. 7. 發想 隨時可玩 (網頁) 連線對戰 (網路) 激烈(簡單操作) 快速(一分鐘一局)
  8. 8. 只有男人才懂的
  9. 9. 在這之前手頭上的工具  JavaScript  Event 根據事件觸發動作 onclick, mousedown …  Ajax 此類半雙工架構  HTML DOM  PHP + MySQL 後端處理資訊
  10. 10. … …
  11. 11. [COSCUP 2011] New Stage ,New Game -- 浅谈 HTML5游戏 在 移动平台的应用 11:00
  12. 12. 什麼是 HTML5 HTML
  13. 13. HTML5 多了哪些東西  硬體裝備支援  <video></video>  <audio></audio>  <canvas></canvas>  WebSocket  很多的表單元件  很多的排版元件  : 逐漸模糊網頁以及應用程式界線
  14. 14. 你應該先知道  HTML 5 Demos and Examples  how well does your browser support HTML5?
  15. 15. 使用手機跑一遍 HTML5 測試
  16. 16. 什麼是 WebSocket WEB Socket
  17. 17. WebSocket 帶來了什麼?  雙方都可「主動」「隨、即時」拋出、接 收訊息  忙的過來為原則  接收訊息的處理是另一回事  以上です
  18. 18. 偷別人的菜渣 Java EE andWebsockets
  19. 19. RFC 6455 - WebSocket已經是標準 http://zh.wikipedia.org/wiki/WebSocket http://tools.ietf.org/html/rfc6455
  20. 20. WebSocket 使用流程  握手  互拋訊息
  21. 21. 實作流程 1. 掌握 Client – Server 用現成的 2. 理解 Server – 自己寫 Server 3. 創意激發
  22. 22. 瀏覽器發出詢問 <script> var host = "ws://hoyo.idv.tw:1031/Draw:Main"; socket = new WebSocket(host); socket.onopen = function(msg){ }; // 一開始就執行 socket.onmessage = function(msg){ }; // 接收 Server 發出訊息 socket.onclose = function( ){ }; </script> <script> socket.send( “Text” ); // 送出訊息 </script>
  23. 23. new WebSocket(host);  .onopen : 成功連線後做什麼  .onmessage : 接收到資料如何處理  .onclose : Server 斷線處理 (不是斷線指令)  .send : 建立連線後送出資料
  24. 24. 開發工具  Google Chrome 查看網路封包
  25. 25. 實作一 瀏覽器端 192.168.98.98:1036 WiFi ADCDemoAP 0000000000
  26. 26. HTTP Port: 80 WebSocket Port: 1030 http://hoyo.idv.tw ws://hoyo.idv.tw:1030 0100 1001 0111 1100 ABC 192.168.1.99:45836 192.168.1.99:47508
  27. 27. GET /Chat:Main HTTP/1.1 Upgrade: websocket Connection: Upgrade Host: 192.168.0.3:1212 Origin: http://phpgame.hoyo.idv.tw Pragma: no-cache Cache-Control: no-cache Sec-WebSocket-Key: FQ/j5iVvBVjfUMermicRyw== Sec-WebSocket-Version: 13 Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits, x-webkit-deflate-frame User-Agent: Mozilla/5.0 (Windows NT 6.1;WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.114 Safari/537.36 瀏覽器送出字串
  28. 28. 回應字串 HTTP/1.1 101 Switching Protocol Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: $accept = base64_encode( sha1($key . '258EAFA5-E914-47DA-95CA-C5AB0DC85B11', true) );
  29. 29. Socket 就是 Socket  建立 Server 端監聽環境  回應  資料(庫)處理  連線(資源) 回收
  30. 30. 提供 Server 端服務就有商機   
  31. 31. PHP 擔任 Server 端的挑戰  WebSocket 握手通訊協定是字串  資料傳輸是 binary  接收、分析資料是問題所在  stream_get_line( STDIN, 2048, "rn" );  stream_get_contents( STDIN );
  32. 32. 回應挑戰  stream_set_blocking(STDIN, FALSE);  正規  preg_match()  不能 sleep() == 有效率的處理
  33. 33. Base Framing Protocol - RFC5234 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 +-+-+-+-+-------+-+-------------+-------------------------------+ |F|R|R|R| opcode|M| Payload len | Extended payload length | |I|S|S|S| (4) |A| (7) | (16/64) | |N|V|V|V| |S| | (if payload len==126/127) | | |1|2|3| |K| | | +-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - + | Extended payload length continued, if payload len == 127 | + - - - - - - - - - - - - - - - +-------------------------------+ | |Masking-key, if MASK set to 1 | +-------------------------------+-------------------------------+ | Masking-key (continued) | Payload Data | +-------------------------------- - - - - - - - - - - - - - - - + : Payload Data continued ... : + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + | Payload Data continued ... | +---------------------------------------------------------------+
  34. 34. 實作二 Server 端
  35. 35. 同步?不同步?是自己決定的 A B CA 拋出資訊
  36. 36. 同步?不同步?是自己決定的 A B C 將結果回拋給 C
  37. 37. while{ socket_select(); } 連線模式:Multiple Connections 每個人的動作使用迴圈更新給所有人
  38. 38. Inetd – internet “super-server” 連線模式:Multi-Process 每個連線獨立,
  39. 39. 讓畫面活起來 HTML DOM  The HTML DOM (Document Object Model)  使用 JavaScript 可以進行編輯 (新增、刪除、 修改)
  40. 40. 搞定 DOM == 搞定 90% 工作 http://www.cainiao8.com/web/html_dom/html_dom_01_jiegou.html
  41. 41. <video> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> www.Websocket.org
  42. 42. <audio> http://www.html5piano.ilinov.eu/
  43. 43. 成功具備的條件  使用者端網頁開發 – User Interface  主機端網路通訊 Socket 處理  防火牆設定
  44. 44. HTML5 + HTML5 WebSocket = !?  家裡有大人之搶奪遙控器  摸不到小手的鋼琴教學
  45. 45. 組隊打 Boss 1. 粉紅色遙控器 (使用A手機控制B手機振動) 2. 請你跟我這樣做 (輪流跟著主持人的webcam畫面動作)
  46. 46. 後記  OnLine Game 離一步還是一萬步?  什麼才是正確的路徑?
  47. 47. 任天堂!?  背景僅能顯示一個捲軸,畫面解析度為 256x240  2KB 的視訊記憶體,調色盤可顯示 48 色及 5 個灰階  一個畫面可顯示 64 個角色(sprites) ,角色格式為 8x8 或 8x16 個像素  3個模擬聲道用於演奏樂音,1個雜音聲道表現特殊聲 效

×