1. 主題：淺談 HTML5 及建立完整 WebSocket 應用觀念
簡介：HTML5 推行好多年了，你開始使用了嗎？有什麼新功能是非用不可的嗎？
1. 認識 HTML5 可以做什麼：振動、GPS 資訊、陀螺儀方位這些行動裝置功能，不用
APP 網頁也做得到
2. 建立完整 WebSocket 使用觀念：從此不需要慢吞吞的重新整理網頁，被動的更新訊息
3. 從多方面深入了解 WebSocket 應用：多人混戰塗鴉、面對面聊天室、矛盾大對決的點
點點生死鬥

2. 搞基也可以很有愛
衝脫泡蓋ㄙㄨㄥˋ

3. 免俗 – 講者介紹
黃志賢 Hoyo 黑社會老大
hoyo.idv.tw – 在家自架 Server
pc@hoyo.idv.tw – Google Apps
主要出沒 → 酷學園
專注在 FreeBSD + Apache + PHP + MySQL (MariaDB) 提供解決方案

4. 這是舒緩心情的緩衝頁

5. 淺談 HTML5 及
建立完整 WEBSOCKET 應用觀念
Hoyo Talk Men’s Love (感謝〝老大的女人〞提供)
我都基動了我
第一次簡報需要鬥雞眼做

6. 起因

7. 發想
隨時可玩 (網頁)
連線對戰 (網路)
激烈(簡單操作)
快速(一分鐘一局)

8. 只有男人才懂的

9. 在這之前手頭上的工具
 JavaScript
 Event 根據事件觸發動作 onclick,
mousedown …
 Ajax 此類半雙工架構
 HTML DOM
 PHP + MySQL 後端處理資訊

10. … …

11. [COSCUP 2011] New Stage ，New Game -- 浅谈 HTML5游戏 在 移动平台的应用
11：00

13. 什麼是 HTML5
HTML

14. HTML5 多了哪些東西
 硬體裝備支援
 <video></video>
 <audio></audio>
 <canvas></canvas>
 WebSocket
 很多的表單元件
 很多的排版元件
 ：
逐漸模糊網頁以及應用程式界線

15. 你應該先知道
 HTML 5 Demos and Examples
 how well does your browser support HTML5?

16. 使用手機跑一遍 HTML5 測試

17. 什麼是 WebSocket
WEB Socket

18. WebSocket 帶來了什麼？
 雙方都可「主動」「隨、即時」拋出、接
收訊息
 忙的過來為原則
 接收訊息的處理是另一回事
 以上です

19. 偷別人的菜渣
Java EE andWebsockets

20. RFC 6455 - WebSocket已經是標準
http://zh.wikipedia.org/wiki/WebSocket
http://tools.ietf.org/html/rfc6455

21. WebSocket 使用流程
 握手
 互拋訊息

23. 實作流程
1. 掌握 Client – Server 用現成的
2. 理解 Server – 自己寫 Server
3. 創意激發

24. 瀏覽器發出詢問
<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>

25. new WebSocket(host);
 .onopen : 成功連線後做什麼
 .onmessage : 接收到資料如何處理
 .onclose : Server 斷線處理 (不是斷線指令)
 .send : 建立連線後送出資料

26. 開發工具
 Google Chrome 查看網路封包

27. 實作一 瀏覽器端
192.168.98.98:1036
WiFi
ADCDemoAP
0000000000

28. 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

30. 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
瀏覽器送出字串

31. 回應字串
HTTP/1.1 101 Switching Protocol
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept:
$accept = base64_encode(
sha1($key . '258EAFA5-E914-47DA-95CA-C5AB0DC85B11', true)
);

32. Socket 就是 Socket
 建立 Server 端監聽環境
 回應
 資料(庫)處理
 連線(資源) 回收

33. 提供 Server 端服務就有商機




34. PHP 擔任 Server 端的挑戰
 WebSocket 握手通訊協定是字串
 資料傳輸是 binary
 接收、分析資料是問題所在
 stream_get_line( STDIN, 2048, "rn" );
 stream_get_contents( STDIN );

35. 回應挑戰
 stream_set_blocking(STDIN, FALSE);
 正規
 preg_match()
 不能 sleep() == 有效率的處理

36. 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 ... |
+---------------------------------------------------------------+

37. 實作二 Server 端

38. 同步？不同步？是自己決定的
A B CA 拋出資訊

39. 同步？不同步？是自己決定的
A B C
將結果回拋給 C

40. while{ socket_select(); }
連線模式：Multiple Connections
每個人的動作使用迴圈更新給所有人

41. Inetd – internet “super-server”
連線模式：Multi-Process
每個連線獨立，

42. 讓畫面活起來 HTML DOM
 The HTML DOM (Document Object Model)
 使用 JavaScript 可以進行編輯 (新增、刪除、
修改)

43. 搞定 DOM == 搞定 90% 工作
http://www.cainiao8.com/web/html_dom/html_dom_01_jiegou.html

44. <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

45. <audio>
http://www.html5piano.ilinov.eu/

46. 成功具備的條件
 使用者端網頁開發 – User Interface
 主機端網路通訊 Socket 處理
 防火牆設定

47. HTML5 + HTML5 WebSocket = !?
 家裡有大人之搶奪遙控器
 摸不到小手的鋼琴教學

48. 組隊打 Boss
1. 粉紅色遙控器
(使用A手機控制B手機振動)
2. 請你跟我這樣做
(輪流跟著主持人的webcam畫面動作)

49. 後記
 OnLine Game 離一步還是一萬步？
 什麼才是正確的路徑？

50. 任天堂！？
 背景僅能顯示一個捲軸，畫面解析度為 256x240
 2KB 的視訊記憶體，調色盤可顯示 48 色及 5 個灰階
 一個畫面可顯示 64 個角色(sprites) ，角色格式為 8x8
或 8x16 個像素
 3個模擬聲道用於演奏樂音，1個雜音聲道表現特殊聲
效