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.

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

9,972 views

Published on

Published in: Technology
  • Be the first to comment

淺談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個雜音聲道表現特殊聲 效

×