PowerPoint プレゼンテーション

Size: px

Start display at page:

Download "PowerPoint プレゼンテーション"

きよあつこうだ
4 years ago
Views:

1 Webocket を使ってみた pdf 用 ver ( 発表直前までに修正をした場合は pdf 用も後日修正します )

自己紹介 @nobi000 (twitter) 今回の発表に合わせて取得 nobi000000@gmail.com http://log25.

2 (twitter) 今回の発表に合わせて取得今日の発表の pdf も上記から nobi (niconico) ニコニコ動画の 5 年間の歩みを分析してみた (sm ) 他 sm 第 2 回ニコニコ学会 β ポスター発表ニコニコ動画のタグを分析してみた

3 Webocket の位置づけ広義の HTML 5 Webocket Webtorage WebWorker Indexed Database Canvas 2D Macrodata WHATWG の HTML5 W3C の HTML5 Elements Froms Offline Events Drag & Drop API etc.

4 目次前座 : Ajax の確認 Webocket の紹介 Webocket を使ったアプリケーション Webocket のプログラミング例

5 2ch と Gmail / Google maps の違い掲示板 (2ch) ページを一度開いたら次のリンクをクリックするまでページは変化しない更新するリンクを押して初めて新しいページが表示される Gmail / Google maps ページを開くだけでなくマウス操作などによってもページが変化する

6 Ajax 画面遷移を伴わないイベントに連動してバックグラウンド上の http 通信が可能 var xmlhttp = new XMLHttpRequest(); var xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP");

7 Webocket とはブラウザ上で双方向のソケット通信を行うための技術規格

8 Webocket と Ajax との違い Webocket は双方向のリアルタイムな通信が可能 Ajax ではサーバ側が変化する場合ポーリング等が必要サーバ側も Webocket に対応 : 必要マッシュアップのように相手側の出力が決まっている場合は置き換えできない

9 Webocket はどのブラウザで使えるの? Chrome Firefox Opera afari 最新版であれば対応

10 afari で使えるってことは ipad などでも行ける io 以上で可能初代は Version UP が必須 ipad2 以降はデフォルトで使えるただし Webocket のバージョンが古いので注意

11 Android は? 標準ブラウザは使えない ( はず未確認 ) Chrome や Firefox をインストールすると使える

12 Internet Explorer は? Internet Explorer 9 までは使えない Internet Explorer 10 で使える ( 未確認 )

13 目次前座 : Ajax の確認 Webocket の紹介 Webocket を使ったアプリケーション Webocket のプログラミング例

14 Webocket でできること? チャット通信対戦表示画面 ( ブラウザ上 ) の共有モニタリングリモートデスクトップセンサー管理

15 ここでデモを紹介します

16 目次前座 : Ajax の確認 Webocket の紹介 Webocket を使ったアプリケーション Webocket のプログラミング例

17 Webocket のバージョン chrome Firefox Opera afari Hixie Hixie-76 Hybi-00 Hybi-07 6 Hybi Hybi-17 RFC6455 主要なバージョンのみ紹介括弧付きはデフォルトで off 6 (11.00)

18 Webocket を使う際のステップ 1. コネクションの確立 2. データの送受信 3. コネクションの切断

19 Webocket を使う際のステップ 1. コネクションの確立 2. データの送受信 3. コネクションの切断

20 Webocket を使う際のステップ 1. コネクションの確立 2. データの送受信 3. コネクションの切断 ( これはどちらからでも可能 )

21 クライアント ( ブラウザ側 ) Javacript フルスクラッチの場合 1. コネクションの確立 var ws = new Webocket("ws://localhost:8000/"); 2. サーバ側に送信 ws.send(" 送信文字列 "); 3. コネクションの切断 ws.close();

22 クライアント ( ブラウザ側 ) Javacript フルスクラッチの場合イベント open イベント内容コネクションが確立されデータの送受信が可能になった時 message サーバからデータを受信した時引数を取る (event とする ) event.data が受信したデータ error close エラーが発生した時サーバ側からコネクションの解放要求が来た時

23 ブラウザ側のライブラリ ocket.io Webocket が無い環境では他で代替して通信する (Canvas における Explorer Canvas) jquery のプラグイン var ws = $.websocket("ws://localhost:8080/");

24 サーバ側完全にソケットプログラミング 1. コネクションの確立ハンドシェイクが必要 GET / HTTP/1.1 Upgrade: websocket var ws = new Connection: Upgrade Webocket(" "); Host: :8000 Origin: ec-webocket-key: OLdsFUdouiPqrn7pfj1hkg== ec-webocket-version: 13 ec-webocket-extensions: x-webkit-deflate-frame

25 サーバ側完全にソケットプログラミング 1. コネクションの確立ハンドシェイクが必要このやり取りを行うと Webocket が利用可能 open イベント発生 HTTP/ witching Protocols Upgrade: Webocket Connection: Upgrade ec-webocket-accept: XeA3VARVsdC9imRoy3E7RMarxBA=

26 サーバ側完全にソケットプログラミング 2. サーバ側に送信 3. コネクションの切断以下のデータフレームをやり取りする F I N R V 1 R V 2 R V 3 opcode 延長 Payload 長 M A K Payload 長延長 Payload 長 (payload == 126:16bit or 127:64bit) 延長 Payload 長 Masking - key(mask が 1 の時 ) Masking - key データ以下データ

27 サーバ側のライブラリ Jetty, jwebsocket (Java) libwebsockets (C) Node.js + ocket.io (Javacript) PocketIO (perl) pywebsocket (python) php-websocket (php)

28 終わり Webocket を使うといろんなアプリケーションが開発できる他の技術との組み合わせに期待 + WebGL で MMORPG! + WebRTC で部屋遠隔管理! 各種ロゴについては無断で使用いたしました

29 参考にさせていただきました小松健作 : 徹底解説 HTML5 API ガイドブックコミュニケーション系 API 編 ( 秀和システム ) websocket_study_kuruma.pdf

30 ご清聴ありがとうございました今日の発表の pdf

32 以下追加資料

33 Accept フィールドの生成

34 サーバ側完全にソケットプログラミング 1. コネクションの確立 Accept フィールドの生成 1 ec-webocket-key フィールドと '258EAFA5- E914-47DA-95CA-C5AB0DC85B11' の文字列連結下は PHP での実装例 base64_encode(pack('h*', sha1($headers['ec-webocket-key']. '258EAFA5-E914-47DA-95CA-C5AB0DC85B11')));

35 サーバ側完全にソケットプログラミング 1. コネクションの確立 Acceptフィールドの生成 2 その結果をHA1ハッシュで計算 3 文字列をバイナリ文字列化 base64_encode(pack('h*', sha1($headers['ec-webocket-key']. '258EAFA5-E914-47DA-95CA-C5AB0DC85B11')));

36 サーバ側完全にソケットプログラミング 1. コネクションの確立 Acceptフィールドの生成 4 Base64で変換 base64_encode(pack('h*', sha1($headers['ec-webocket-key']. '258EAFA5-E914-47DA-95CA-C5AB0DC85B11')));

37 データフレームの解釈

38 データフレームの解釈 F I N R V 1 R V 2 R V 3 opcode 延長 Payload 長 M A K Payload 長延長 Payload 長 (payload == 126:16bit or 127:64bit) 延長 Payload 長 Masking - key(mask が 1 の時 ) Masking - key データ以下データ

39 データフレームの解釈 opcode(4bit): データの解釈 0x1: テキストデータ 0x2: バイナリデータ 0x8: close 0x9: ping F I N R V 1 R V 2 R V 3 opcode 延長 Payload 長 M A K Payload 長延長 Payload 長 (payload == 126:16bit or 127:64bit) 延長 Payload 長 Masking - key(mask が 1 の時 ) Masking - key データ以下データ

40 データフレームの解釈 Opcode(4bit): データの解釈 0x1: テキストデータ 0x2: バイナリデータ 0x8: close 0x9: ping opcode の取得例 (php) $firstbytebinary = sprintf('%08b', ord($data[0])); $opcode = bindec(substr($firstbytebinary, 4, 4));

41 データフレームの解釈 mask(1bit): データのマスクを行っているか 1 なら masking-key によってマスクがかかっているブラウザ -> サーバはマスクを必ず掛けるサーバ -> ブラウザはマスクを掛けてはいけない F I N R V 1 R V 2 R V 3 opcode 延長 Payload 長 M A K Payload 長延長 Payload 長 (payload == 126:16bit or 127:64bit) 延長 Payload 長 Masking - key(mask が 1 の時 ) Masking - key データ以下データ

42 データフレームの解釈 mask: データのマスクを行っているか 1 なら masking-key によってマスクがかかっている mask bit の取得例 (php) $secondbytebinary = sprintf('%08b',ord($data[1])); $ismasked = ($secondbytebinary[0] == '1')? true : false; マスクの解除例 (php) $unmaskedpayload.= $data[$i] ^ $mask[($i - $payloadoffset) % 4]; $payloadoffset はデータ開始バイト

43 データフレームの解釈 Payload 長 (7bit): データの長さ 126: 延長 payload 長 (16bit) がデータの長さ 127: 延長 payload 長 (64bit) がデータの長さ F I N R V 1 R V 2 R V 3 opcode 延長 Payload 長 M A K Payload 長延長 Payload 長 (payload == 126:16bit or 127:64bit) 延長 Payload 長 Masking - key(mask が 1 の時 ) Masking - key データ以下データ

44 データフレームの解釈 Payload 長 (7bit): データの長さ 126: 延長 payload 長 (16bit) がデータの長さ 127: 延長 payload 長 (64bit) がデータの長さ $payloadlength = ord($data[1]) & 127; if($payloadlength === 126){ $datalength = bindec(sprintf('%08b', ord($data[2])). sprintf('%08b', ord($data[3]))); }else if($payloadlength === 127){ $tmp = ''; for($i = 0; $i < 8; $i++){ $tmp.= sprintf('%08b', ord($data[$i+2])); } $datalength = bindec($tmp); }

45 データフレームへの変換

46 データフレームへの変換 opcode(4bit): データの解釈 0x1: テキストデータ 0x2: バイナリデータ 0x8: close 0x9: ping F I N R V 1 R V 2 R V 3 opcode 延長 Payload 長 M A K Payload 長延長 Payload 長 (payload == 126:16bit or 127:64bit) 延長 Payload 長 Masking - key(mask が 1 の時 ) // 後続フレームなしテキストデータの場合 Masking - key 以下データ $framehead[0] = 129; データ

47 データフレームへの変換 Payload 長 (7bit): データの長さ 126: 延長 payload 長 (16bit) がデータの長さ 127: 延長 payload 長 (64bit) がデータの長さ F I N R V 1 R V 2 R V 3 opcode 延長 Payload 長 M A K Payload 長延長 Payload 長 (payload == 126:16bit or 127:64bit) 延長 Payload 長 Masking - key(mask が 1 の時 ) Masking - key データ以下データ

48 データフレームへの変換 Payload 長 (7bit): データの長さ 126: 延長 payload 長 (16bit) がデータの長さ 127: 延長 payload 長 (64bit) がデータの長さ $payloadlength = strlen($payload); if($payloadlength > 65535){ $payloadlengthbin = str_split(sprintf('%064b', $payloadlength), 8); $framehead[1] = ($masked === true)? 255 : 127; for($i = 0; $i < 8; $i++){ $framehead[$i+2] = bindec($payloadlengthbin[$i]); } }elseif($payloadlength > 125){ $payloadlengthbin = str_split(sprintf('%016b', $payloadlength), 8); $framehead[1] = ($masked === true)? 254 : 126; $framehead[2] = bindec($payloadlengthbin[0]); $framehead[3] = bindec($payloadlengthbin[1]); }

WebSocketを見てみよう

WebSocketを見てみよう WebSocket を見てみよう @Kuruma 本スライドは下記 URI で公開しています : http://bit.ly/ws-kuruma http://kuruman.org/diary/2011/05/28/file/websocket_study_kuruma.pdf # whoami Kuruma しがないOpera Browser 使い twitter.com/kuruma kuruman.org