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

主題：淺談 HTML5 及建立完整 WebSocket 應用觀念簡介： HTML5 推行好多年了，你開始使用了嗎？有什麼新功能是非用不可的嗎？

1. 認識 HTML5 可以做什麼：振動、 GPS 資訊、陀螺儀方位這些行動裝置功能，不用 APP 網頁也做得到

2. 建立完整 WebSocket 使用觀念：從此不需要慢吞吞的重新整理網頁，被動的更新訊息

3. 從多方面深入了解 WebSocket 應用：多人混戰塗鴉、面對面聊天室、矛盾大對決的點點點生死鬥

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

免俗 – 講者介紹黃志賢 Hoyo 黑社會老大hoyo.idv.tw – 在家自架 Server

pc@hoyo.idv.tw – 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 端監聽環境 回應 資料 (庫 ) 處理 連線 ( 資源 ) 回收

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