More Related Content Similar to 淺談Html5及建立完整 web socket 應用觀念 Similar to 淺談Html5及建立完整 web socket 應用觀念 (7) 淺談Html5及建立完整 web socket 應用觀念1. 主題:淺談 HTML5 及建立完整 WebSocket 應用觀念
簡介:HTML5 推行好多年了,你開始使用了嗎?有什麼新功能是非用不可的嗎?
1. 認識 HTML5 可以做什麼:振動、GPS 資訊、陀螺儀方位這些行動裝置功能,不用
APP 網頁也做得到
2. 建立完整 WebSocket 使用觀念:從此不需要慢吞吞的重新整理網頁,被動的更新訊息
3. 從多方面深入了解 WebSocket 應用:多人混戰塗鴉、面對面聊天室、矛盾大對決的點
點點生死鬥
3. 免俗 – 講者介紹
黃志賢 Hoyo 黑社會老大
hoyo.idv.tw – 在家自架 Server
pc@hoyo.idv.tw – Google Apps
主要出沒 → 酷學園
專注在 FreeBSD + Apache + PHP + MySQL (MariaDB) 提供解決方案
5. 淺談 HTML5 及
建立完整 WEBSOCKET 應用觀念
Hoyo Talk Men’s Love (感謝〝老大的女人〞提供)
我都基動了我
第一次簡報需要鬥雞眼做
14. HTML5 多了哪些東西
硬體裝備支援
<video></video>
<audio></audio>
<canvas></canvas>
WebSocket
很多的表單元件
很多的排版元件
:
逐漸模糊網頁以及應用程式界線
15. 你應該先知道
HTML 5 Demos and Examples
how well does your browser support HTML5?
20. RFC 6455 - WebSocket已經是標準
http://zh.wikipedia.org/wiki/WebSocket
http://tools.ietf.org/html/rfc6455
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>
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)
);
34. PHP 擔任 Server 端的挑戰
WebSocket 握手通訊協定是字串
資料傳輸是 binary
接收、分析資料是問題所在
stream_get_line( STDIN, 2048, "rn" );
stream_get_contents( STDIN );
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 ... |
+---------------------------------------------------------------+
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