More Related Content
More from You_Kinjoh (11)
WebSocketのキホン
- 1. WebSocketのキホン
2011/12/16
HTML5+IE9 Web Camp 2 with html5j.org
NTTアドバンステクノロジ
アプリケーションソリューション事業本部
情報機器テクノロジセンタ
きんじょう ゆう
金城 雄
- 2. 自己紹介
きんじょう ゆう
金城 雄
NTTアドバンステクノロジ
gihyo.jp NTT-AT
アプリケーションソリューション事業本部
Jettyで始める 情報機器テクノロジセンタ所属
WebSocket超入門
http://gihyo.jp/dev/feature/01/websocket より引用
- 3. 資料について
本番で使用したスライドを
オンラインで公開します
http://www.slideshare.net/You_Kinjoh/
※ 発表資料は修正される可能性があります
※ イベントのサイトからも公開される予定だそうです
- 4. お断り その1
表記が揺れていますが、
この資料ではWebSocketで統一します
WebSocket Web Socket
WebSockets Web Sockets
- 5. お断り その2
話をわかりやすくするために、
この資料では、
Clientは単にブラウザのことを指します
※ HTTPによる通信が
ブラウザとWeb Server間に限らないことと同様に、
WebSocketによる通信は
ブラウザとWebSocket Server間以外でも行えます。
- 8. 加速度データ転送
無線LAN
WebSocket
Server
WebSocket WebSocket
iPhone Windows8
Safari IE10
JavaScript JavaScript
WebSocket WebSocket
加速度センサ Canvas
- 9. 画面キャプチャ・マウス操作データ転送
無線LAN
WebSocket
Server
WebSocket WebSocket
Mac Windows8
App IE10
Java JavaScript
WebSocket WebSocket
画面キャプチャ マウス操作
ポインタ移動 キャプチャ表示
- 13. 静的なウェブページ
ホームに戻る
○△□のホームページ 1996年7月の日記
あなたは00112人目の訪問者です
リンクをクリック 1996年7月10日
キリ番の方は連絡ください 今日は朝から天気が良かったので、友達
と買い物に行きました。
100番目は〇〇さんでした！ 何を買った知りたいですか？
フフフ ナイショです！！！
1996年6月の日記へ
1996年7月の日記へ 1996年7月13日
1996年8月の日記へ 3日ぶりの更新です！
1996年9月の日記へ と言いつつ何も書くことがありませ
ん・・・
見にきてくれている人、ごめんなさい
m(_ _)m
Request Response
Server
•HTTPはリクエスト/レスポンス型
•画面の書き換えには再読み込みや画面遷移が必要
- 14. 動的なウェブページ
○△□のホームページ クリック ○△□のホームページ
ココをクリックすると ココをクリックすると
ヒミツのメッセージが表示されます！ ヒミツのメッセージが表示されます！
あ！ あ！
非表示
見られちゃいましたね！
ようこそ○△□のホームページへ！
見られちゃいましたね！
ようこそ○△□のホームページへ！
クリックすると表示
•JavaScriptの登場によるDHTML
•情報は最初から埋め込まれている
•新しい情報を得るには画面遷移が必要
- 15. 定期的な更新
チャットルーム チャットルーム
名前 山田 名前 山田
発言 発言 発言 発言
一定間隔で再読み込み
09:25 佐藤 09:25 佐藤
こんにちは！ こんにちは！
━━━━━━━━━━━━━━━━━━ ━━━━━━━━━━━━━━━━━━
09:26 山田 09:26 山田
おひさ おひさ
━━━━━━━━━━━━━━━━━━
09:27 佐藤
おひさ！
━━━━━━━━━━━━━━━━━━
09:27 鈴木
リフレッシュすると更新 おおお！久しぶり！
全て読み込まれる
Request Response
09:25 佐藤 こんにちは！
Server 09:26
09:27
山田
佐藤
おひさ
おひさ！
09:27 鈴木 おおお！久しぶり！
•metaタグやJavaScriptによるリフレッシュ
•新しい情報を得るには再読み込みが必要
•通信の起点はClient
- 16. ページ内の非同期通信
チャットルーム チャットルーム
名前 山田 JavaScriptで 名前 山田
発言 発言 コンテンツ反映 発言 発言
09:25 佐藤 09:25 佐藤
こんにちは！ こんにちは！
━━━━━━━━━━━━━━━━━━ ━━━━━━━━━━━━━━━━━━
09:26 山田 09:26 山田
おひさ JavaScriptで おひさ
━━━━━━━━━━━━━━━━━━
非表示iframeを生成 09:27 佐藤
おひさ！
━━━━━━━━━━━━━━━━━━
09:27 鈴木
差分コンテンツ取得 おおお！久しぶり！
09:27 佐藤 おひさ！
iframe 09:27 鈴木 おおお！久しぶり！
Request Response09:27 佐藤 おひさ！
Server 09:27 鈴木 おおお！久しぶり！
•隠しiframeを使ってサーバと通信する方法が発明された
•画面遷移なしに新しい情報を取得できるようになった
•通信の起点はClient
- 17. Ajaxの誕生
チャットルーム チャットルーム
名前 山田 XMLHttpRequestで 名前 山田
発言 発言 非同期通信開始 発言 発言
09:25 佐藤 09:25 佐藤
こんにちは！ こんにちは！
━━━━━━━━━━━━━━━━━━ ━━━━━━━━━━━━━━━━━━
09:26 山田 09:26 山田
おひさ おひさ
━━━━━━━━━━━━━━━━━━
09:27 佐藤
おひさ！
var xhr=
━━━━━━━━━━━━━━━━━━
new XMLHttpRequest(); 09:27 鈴木
... 差分コンテンツ反映 おおお！久しぶり！
xhr.send(...);
Request Response09:27 佐藤 おひさ！
Server 09:27 鈴木 おおお！久しぶり！
※ Ajax Comet WebSocketの詳細な比較は後ほど...
•通信を行うXMLHttpRequestオブジェクトが追加
•サーバとの通信が容易になった
•通信の起点はClient
- 18. Cometの発明
チャットルーム チャットルーム
名前 山田 XMLHttpRequestで 名前 山田
発言 発言 非同期通信開始 発言 発言
09:25 佐藤 09:25 佐藤
こんにちは！ こんにちは！
━━━━━━━━━━━━━━━━━━ ━━━━━━━━━━━━━━━━━━
09:26 山田 09:26 山田
おひさ おひさ
━━━━━━━━━━━━━━━━━━
09:27 佐藤
おひさ！
var xhr=
━━━━━━━━━━━━━━━━━━
new XMLHttpRequest(); 09:27 鈴木
... コンテンツを逐次反映 おおお！久しぶり！
xhr.send(...);
Request Response09:27 佐藤 おひさ！
応答をすぐには返さない Server 09:27 鈴木 おおお！久しぶり！
※ Ajax Comet WebSocketの詳細な比較は後ほど...
•Ajax等を駆使し実現した疑似サーバプッシュ技術
•応答を遅延させるという発想の転換
•接続の起点はClient 情報配信の起点はServer
- 19. WebSocketの誕生
チャットルーム チャットルーム
名前 山田 WebSocketで 名前 山田
発言 発言 非同期通信開始 発言 発言
09:25 佐藤
こんにちは！
━━━━━━━━━━━━━━━━━━
09:26 山田
おひさ
━━━━━━━━━━━━━━━━━━
09:27 佐藤
おひさ！
var ws=
━━━━━━━━━━━━━━━━━━
new WebSocket(...); 09:27 鈴木
... コンテンツを逐次反映 おおお！久しぶり！
ws.send(...);
09:26 山田 おひさ
Connect send 09:25 佐藤 こんにちは！
Server 09:27 佐藤 おひさ！
09:27 鈴木 おおお！久しぶり！
双方向通信
※ Ajax Comet WebSocketの詳細な比較は後ほど...
•新たにWebSocketオブジェクトが追加
•サーバプッシュが容易になった
•接続の起点はClient 情報配信は双方向
- 20. 通信技術の発明と実装
動的なページを作成できる
旧来のページ
新技術 JavaScriptの誕生
問題や限界 : ページが動的でない
需要 : 画面遷移せず通信したい
工夫
隠しiframeによる 非同期通信のできる
非同期通信の発明 新技術 XMLHttpRequestの誕生
問題や限界 : 複雑で簡単に使えない 需要 : サーバプッシュがしたい
工夫
Cometによる サーバプッシュのできる
疑似サーバプッシュの発明 新技術 WebSocketの誕生
問題や限界 : 複雑で簡単に使えない 需要 : ???
- 21. ここまでのまとめ
静的なウェブページ
新技術
動的なウェブページ
定期的な更新
既存の枠組みの
ページ内の非同期通信 新たな需要
問題や限界
Ajaxの誕生
Cometの発明 既存の技術内で
新手法の発明
WebSocketの誕生
- 24. Ajax
☎リリリリリ∼ン
新しい情報を
はい
もらえる
新しい情報をください パターン
新しい情報が2件ありました
ありがとうございます ☎ガチャ
一定時間経過(例えば1分)
☎リリリリリ∼ン
Client はい Server
新しい情報をください
新しい情報を
新しい情報はありませんでした もらえない
ありがとうございます ☎ガチャ パターン
- 25. Comet
☎リリリリリ∼ン
新しい情報を
はい
もらえる
新しい情報をください パターン
ちょっと待ってください
あのぉ・・・ ・・・・・
まだですか? もうちょっと
・・・・・ ・・・・・
Client 新しい情報が来ました!!! Server
ありがとうございます ☎ガチャ
☎リリリリリ∼ン
はい
- 26. Comet
☎リリリリリ∼ン
新しい情報を
はい
もらえない
新しい情報をください パターン
ちょっと待ってください
あのぉ・・・ ・・・・・
まだですか? もうちょっと
・・・・・ ・・・・・
Client あのぉ・・・ ・・・・・ Server
☎ツーッツーッツーッ
あっ! あっ!
☎リリリリリ∼ン
- 27. WebSocket
☎リリリリリ∼ン
電話は
電話は切らずにお待ちください
繋げたまま
・・・・・ ・・・・・
新しい情報が来ました!!!
ありがとうございます!!!
・・・・・ ・・・・・
・・・・・ ・・・・・
Client 新しい情報が来ました!!! Server
ありがとうございます!!!
こちらも情報を提供します!!!
おおっ!
- 31. 接続処理のコスト
☎ピッポッパッポッパッ
☎リリリ∼ン 電話だ!
☎リリリ∼ン 待って!
☎リリリ∼ン ハイハイハイ
☎ガチャ
Client もしもし Server
はい! サーバです!
接続処理は負荷が高い※1
•AjaxとCometでは高頻度で発生 ※1 通信したい情報に対して
HTTP Headerが大きい
•WebSocketでは一回のみ Serverにとっても負荷が高い
- 34. Ajax
高い負荷 ☎リリリリリ∼ン
新しい情報を
はい
もらえる
新しい情報をください パターン
新しい情報が2件ありました
ありがとうございます ☎ガチャ
一定時間経過(例えば1分) 空白時間
高い負荷 ☎リリリリリ∼ン
Client はい Server
新しい情報をください
新しい情報を
無駄な接続も発生 新しい情報はありませんでした もらえない
ありがとうございます ☎ガチャ パターン
- 35. Comet
高い負荷 ☎リリリリリ∼ン
新しい情報を
はい
もらえる
新しい情報をください パターン
ちょっと待ってください
あのぉ・・・ ・・・・・
情報は一方向 まだですか? もうちょっと 通知があるまで待機
・・・・・ ・・・・・
Client 新しい情報が来ました!!! Server
受信したら即切断
ありがとうございます ☎ガチャ
高い負荷 ☎リリリリリ∼ン
はい
- 36. Comet
高い負荷 ☎リリリリリ∼ン
新しい情報を
はい
もらえない
新しい情報をください パターン
ちょっと待ってください
あのぉ・・・ ・・・・・
情報は一方向 まだですか? もうちょっと 通知があるまで待機
・・・・・ ・・・・・
Client あのぉ・・・ ・・・・・ Server
無駄な接続も発生 ☎ツーッツーッツーッ 通話時間の上限
あっ! あっ!
高い負荷 ☎リリリリリ∼ン
- 37. WebSocket
高い負荷 ☎リリリリリ∼ン
電話は
電話は切らずにお待ちください
繋げたまま
・・・・・ ・・・・・
新しい情報が来ました!!!
ありがとうございます!!!
・・・・・ ・・・・・
・・・・・ ・・・・・
Client 新しい情報が来ました!!! Server
再接続せずに送信
ありがとうございます!!!
双方向性 こちらも情報を提供します!!!
おおっ!
- 38. client server
Ajax
open
request
response
close
timeout
connection
- 39. client server
Comet
open
request
response
close
timeout
connection
- 40. client server
WebSocket
open
from Client
from Server
close
timeout
connection
- 42. ここまでのまとめ
Ajax
•負荷が高い
•サーバ側の情報取得は定期的
•クライアント側の情報送信は別接続で行うことが多い
Comet
•負荷が非常に高い
•サーバ側の情報取得はリアルタイム
•クライアント側の情報送信は別接続のAjax
WebSocket
•負荷が小さい
•サーバ側の情報取得はリアルタイム
•クライアント側の情報送信も同じ接続内(双方向通信)
- 48. よくあるネットワーク構成
FireWall
NAT
Proxy
send
send
request
Client response Server
サーバ側から情報を送るには
request/responseでないと届きにくい
- 49. 通過しやすいProtocolは?
FireWall
NAT
Proxy
HTTP
Telnet
FTP
etc.
Client Server
HTTPが一番届きやすい
- 50. サーバ側からリアルタイムな
配信が可能なこれまでの技術
Comet
•HTTP上でlong polling
•制御はプログラマやライブラリ
チャットアプリケーションや映像配信
•リアルタイムなProtocolに見える
•実は裏で、AjaxやCometと同じような処理
一部のProtocol
•HTTP以外のProtocolを使用
•ネットワークの設定が必要
- 54. draft
version
IE Opera Firefox Safari Chrome
hixie 75 5.0.0 4
hixie 76 11 4
5.0.1 6
hybi 00 (無効※2) (無効※2)
6
hybi 07
(Moz※3)
hybi 09
hybi 10 10 7
14
(Last Call) (PP3※1) (Moz※3)
hybi 17 16
(最新) (Beta)
※1 Platform Preview 3
※2 configで設定を変更する必要がある(設定画面ではない)
※3 ベンダープレフィックスが必要
