淺談html5及建立完整 web socket 應用觀念
DESCRIPTION
TRANSCRIPT
主題:淺談 HTML5 及建立完整 WebSocket 應用觀念簡介: HTML5 推行好多年了,你開始使用了嗎?有什麼新功能是非用不可的嗎?
1. 認識 HTML5 可以做什麼:振動、 GPS 資訊、陀螺儀方位這些行動裝置功能,不用 APP 網頁也做得到
2. 建立完整 WebSocket 使用觀念:從此不需要慢吞吞的重新整理網頁,被動的更新訊息
3. 從多方面深入了解 WebSocket 應用:多人混戰塗鴉、面對面聊天室、矛盾大對決的點點點生死鬥
搞基也可以很有愛衝脫泡蓋ㄙㄨㄥˋ
免俗 – 講者介紹黃志賢 Hoyo 黑社會老大hoyo.idv.tw – 在家自架 Server
[email protected] – Google Apps
主要出沒 → 酷學園專注在 FreeBSD + Apache + PHP + MySQL (MariaDB) 提供解決方案
這是舒緩心情的緩衝頁
淺談 HTML5 及建立完整 WEBSOCKET 應用觀念
Hoyo Talk Men’s Love ( 感謝〝老大的女人〞提供 )我都基動了我
第一次簡報需要鬥雞眼做
起因
發想
隨時可玩 ( 網頁 )連線對戰 ( 網路 )
激烈 ( 簡單操作 )快速 ( 一分鐘一局 )
只有男人才懂的
在這之前手頭上的工具
JavaScript Event 根據事件觸發動作 onclick, mousedown
… Ajax 此類半雙工架構 HTML DOM
PHP + MySQL 後端處理資訊
… …
[COSCUP 2011] New Stage ,New Game -- 浅谈 HTML5游戏 在 移动平台的应用 11: 00
什麼是 HTML5
HTML
HTML5 多了哪些東西
硬體裝備支援 <video></video> <audio></audio> <canvas></canvas> WebSocket 很多的表單元件 很多的排版元件 :
逐漸模糊網頁以及應用程式界線
你應該先知道
HTML 5 Demos and Examples how well does your browser support HTML5?
使用手機跑一遍 HTML5 測試
什麼是 WebSocket
WEB Socket
WebSocket 帶來了什麼?
雙方都可「主動」「隨、即時」拋出、接收訊息 忙的過來為原則 接收訊息的處理是另一回事
以上です
偷別人的菜渣Java EE and Websockets
RFC 6455 - WebSocket 已經是標準
http://zh.wikipedia.org/wiki/WebSocket
http://tools.ietf.org/html/rfc6455
WebSocket 使用流程
握手 互拋訊息
實作流程
1. 掌握 Client – Server 用現成的2. 理解 Server – 自己寫 Server
3. 創意激發
瀏覽器發出詢問
<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>
new WebSocket(host);
.onopen : 成功連線後做什麼 .onmessage : 接收到資料如何處理 .onclose : Server 斷線處理 ( 不是斷線指令 )
.send : 建立連線後送出資料
開發工具
Google Chrome 查看網路封包
實作一 瀏覽器端
192.168.98.98:1036
WiFiADCDemoAP0000000000
HTTP Port: 80 WebSocket Port: 1030
http://hoyo.idv.tw ws://hoyo.idv.tw:1030
0100 10010111 1100ABC
192.168.1.99:45836 192.168.1.99:47508
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: 13Sec-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
瀏覽器送出字串
回應字串
HTTP/1.1 101 Switching Protocol
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept:
$accept = base64_encode(
sha1($key . '258EAFA5-E914-47DA-95CA-C5AB0DC85B11', true) );
Socket 就是 Socket
建立 Server 端監聽環境 回應 資料 (庫 ) 處理 連線 ( 資源 ) 回收
PHP 擔任 Server 端的挑戰
WebSocket 握手通訊協定是字串 資料傳輸是 binary 接收、分析資料是問題所在
stream_get_line( STDIN, 2048, "\r\n" ); stream_get_contents( STDIN );
回應挑戰
stream_set_blocking(STDIN, FALSE); 正規
preg_match()
不能 sleep() == 有效率的處理
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 ... | +---------------------------------------------------------------+
實作二 Server 端
同步?不同步?是自己決定的
A B CA 拋出資訊
同步?不同步?是自己決定的
A B C
將結果回拋給 C
while{ socket_select(); }
連線模式: Multiple Connections
每個人的動作使用迴圈更新給所有人
Inetd – internet “super-server”
連線模式: Multi-Process
每個連線獨立,
讓畫面活起來 HTML DOM
The HTML DOM (Document Object Model)
使用 JavaScript 可以進行編輯 ( 新增、刪除、修改 )
搞定 DOM == 搞定 90% 工作
http://www.cainiao8.com/web/html_dom/html_dom_01_jiegou.html
<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
<audio>
http://www.html5piano.ilinov.eu/
成功具備的條件
使用者端網頁開發 – User Interface 主機端網路通訊 Socket 處理 防火牆設定
HTML5 + HTML5 WebSocket = !? 家裡有大人之搶奪遙控器 摸不到小手的鋼琴教學
組隊打 Boss
1. 粉紅色遙控器( 使用 A 手機控制 B 手機振動 )
2. 請你跟我這樣做(輪流跟著主持人的 webcam畫面動作 )
後記
OnLine Game 離一步還是一萬步? 什麼才是正確的路徑?
任天堂!?
背景僅能顯示一個捲軸,畫面解析度為 256x240 2KB 的視訊記憶體,調色盤可顯示 48 色及 5 個灰階
一個畫面可顯示 64 個角色 (sprites) ,角色格式為 8x8 或 8x16 個像素
3個模擬聲道用於演奏樂音, 1個雜音聲道表現特殊聲效