WebSocketのキホン
-
Upload
youkinjoh -
Category
Technology
-
view
12.722 -
download
3
Transcript of WebSocketのキホン
WebSocketのキホン
NTTアドバンステクノロジアプリケーションソリューション事業本部
情報機器テクノロジセンタきんじょう ゆう
金城 雄
2011/12/16HTML5+IE9 Web Camp 2 with html5j.org
きんじょう ゆう金城 雄NTTアドバンステクノロジ
NTT-ATアプリケーションソリューション事業本部情報機器テクノロジセンタ所属
gihyo.jpJettyで始めるWebSocket超入門
自己紹介
http://gihyo.jp/dev/feature/01/websocket より引用
本番で使用したスライドをオンラインで公開します
http://www.slideshare.net/You_Kinjoh/
※ 発表資料は修正される可能性があります※ イベントのサイトからも公開される予定だそうです
資料について
表記が揺れていますが、この資料ではWebSocketで統一します
WebSocket Web Socket WebSockets Web Sockets
お断り その1
話をわかりやすくするために、この資料では、
Clientは単にブラウザのことを指します
※ HTTPによる通信がブラウザとWeb Server間に限らないことと同様に、
WebSocketによる通信はブラウザとWebSocket Server間以外でも行えます。
お断り その2
•DEMO•Client・Server間の通信の歴史•Ajax・Comet・WebSocketを比較•WebSocketの歴史の概要•なぜWebSocketなのか•今すぐ使える技術なのか
本日の内容
•DEMO•Client・Server間の通信の歴史•Ajax・Comet・WebSocketを比較•WebSocketの歴史の概要•なぜWebSocketなのか•今すぐ使える技術なのか
本日の内容
無線LANWebSocketServer
iPhoneSafari
JavaScript
WebSocket加速度センサ
Windows8IE10
JavaScript
WebSocketCanvas
加速度データ転送
WebSocketWebSocket
無線LAN
MacAppJava
WebSocket画面キャプチャポインタ移動
Windows8IE10
JavaScript
WebSocketマウス操作
キャプチャ表示
画面キャプチャ・マウス操作データ転送
WebSocketWebSocket
WebSocketServer
DEMO
•DEMO•Client・Server間の通信の歴史•Ajax・Comet・WebSocketを比較•WebSocketの歴史の概要•なぜWebSocketなのか•今すぐ使える技術なのか
本日の内容
Client・Server間の通信の歴史
•HTTPはリクエスト/レスポンス型•画面の書き換えには再読み込みや画面遷移が必要
静的なウェブページ○△□のホームページ
あなたは00112人目の訪問者ですキリ番の方は連絡ください
100番目は〇〇さんでした!
1996年6月の日記へ1996年7月の日記へ1996年8月の日記へ1996年9月の日記へ
ホームに戻る1996年7月の日記
1996年7月10日今日は朝から天気が良かったので、友達と買い物に行きました。何を買った知りたいですか?フフフ ナイショです!!!
1996年7月13日3日ぶりの更新です!と言いつつ何も書くことがありません・・・見にきてくれている人、ごめんなさいm(_ _)m
リンクをクリック
ServerRequest Response
•JavaScriptの登場によるDHTML•情報は最初から埋め込まれている•新しい情報を得るには画面遷移が必要
動的なウェブページ○△□のホームページ
ココをクリックするとヒミツのメッセージが表示されます!
あ!見られちゃいましたね!
ようこそ○△□のホームページへ!
○△□のホームページ
ココをクリックするとヒミツのメッセージが表示されます!
あ!見られちゃいましたね!
ようこそ○△□のホームページへ!非表示
クリックすると表示
クリック
•metaタグやJavaScriptによるリフレッシュ•新しい情報を得るには再読み込みが必要•通信の起点はClient
定期的な更新チャットルーム
09:25 佐藤こんにちは!━━━━━━━━━━━━━━━━━━09:26 山田おひさ
チャットルーム
09:25 佐藤こんにちは!━━━━━━━━━━━━━━━━━━09:26 山田おひさ━━━━━━━━━━━━━━━━━━09:27 佐藤おひさ!━━━━━━━━━━━━━━━━━━09:27 鈴木おおお!久しぶり!
山田名前
発言 発言
山田名前
発言 発言
リフレッシュすると更新全て読み込まれる
ServerRequest 09:25 佐藤 こんにちは!
09:26 山田 おひさ09:27 佐藤 おひさ!09:27 鈴木 おおお!久しぶり!
Response
一定間隔で再読み込み
•隠しiframeを使ってサーバと通信する方法が発明された•画面遷移なしに新しい情報を取得できるようになった•通信の起点はClient
ページ内の非同期通信チャットルーム
09:25 佐藤こんにちは!━━━━━━━━━━━━━━━━━━09:26 山田おひさ
チャットルーム
09:25 佐藤こんにちは!━━━━━━━━━━━━━━━━━━09:26 山田おひさ━━━━━━━━━━━━━━━━━━09:27 佐藤おひさ!━━━━━━━━━━━━━━━━━━09:27 鈴木おおお!久しぶり!
山田名前
発言 発言
山田名前
発言 発言
iframe
JavaScriptで非表示iframeを生成
09:27 佐藤 おひさ!09:27 鈴木 おおお!久しぶり!
差分コンテンツ取得
JavaScriptでコンテンツ反映
ServerRequest 09:27 佐藤 おひさ!
09:27 鈴木 おおお!久しぶり!Response
•通信を行うXMLHttpRequestオブジェクトが追加•サーバとの通信が容易になった•通信の起点はClient
Ajaxの誕生
※ Ajax Comet WebSocketの詳細な比較は後ほど...
チャットルーム
09:25 佐藤こんにちは!━━━━━━━━━━━━━━━━━━09:26 山田おひさ
チャットルーム
09:25 佐藤こんにちは!━━━━━━━━━━━━━━━━━━09:26 山田おひさ━━━━━━━━━━━━━━━━━━09:27 佐藤おひさ!━━━━━━━━━━━━━━━━━━09:27 鈴木おおお!久しぶり!
山田名前
発言 発言
山田名前
発言 発言
差分コンテンツ反映
Server09:27 佐藤 おひさ!09:27 鈴木 おおお!久しぶり!
Response
var xhr=new XMLHttpRequest();...xhr.send(...);
Request
XMLHttpRequestで非同期通信開始
•Ajax等を駆使し実現した疑似サーバプッシュ技術•応答を遅延させるという発想の転換•接続の起点はClient 情報配信の起点はServer
Cometの発明
※ Ajax Comet WebSocketの詳細な比較は後ほど...
チャットルーム
09:25 佐藤こんにちは!━━━━━━━━━━━━━━━━━━09:26 山田おひさ
チャットルーム
09:25 佐藤こんにちは!━━━━━━━━━━━━━━━━━━09:26 山田おひさ━━━━━━━━━━━━━━━━━━09:27 佐藤おひさ!━━━━━━━━━━━━━━━━━━09:27 鈴木おおお!久しぶり!
山田名前
発言 発言
山田名前
発言 発言
コンテンツを逐次反映
Server09:27 佐藤 おひさ!Response
var xhr=new XMLHttpRequest();...xhr.send(...);
Request
XMLHttpRequestで非同期通信開始
応答をすぐには返さない09:27 鈴木 おおお!久しぶり!
•新たにWebSocketオブジェクトが追加•サーバプッシュが容易になった•接続の起点はClient 情報配信は双方向
WebSocketの誕生
※ Ajax Comet WebSocketの詳細な比較は後ほど...
09:26 山田 おひさ
チャットルーム チャットルーム
09:25 佐藤こんにちは!━━━━━━━━━━━━━━━━━━09:26 山田おひさ━━━━━━━━━━━━━━━━━━09:27 佐藤おひさ!━━━━━━━━━━━━━━━━━━09:27 鈴木おおお!久しぶり!
山田名前
発言 発言
山田名前
発言 発言
コンテンツを逐次反映
Server09:25 佐藤 こんにちは!send
var ws=new WebSocket(...);...ws.send(...);
Connect
WebSocketで非同期通信開始
09:27 佐藤 おひさ!09:27 鈴木 おおお!久しぶり!
双方向通信
通信技術の発明と実装動的なページを作成できるJavaScriptの誕生
需要 : 画面遷移せず通信したい
隠しiframeによる非同期通信の発明
問題や限界 : 複雑で簡単に使えない
非同期通信のできるXMLHttpRequestの誕生需要 : サーバプッシュがしたい
Cometによる疑似サーバプッシュの発明
問題や限界 : 複雑で簡単に使えない
サーバプッシュのできるWebSocketの誕生
需要 : ???
新技術
工夫
新技術
工夫
新技術
旧来のページ問題や限界 : ページが動的でない
ここまでのまとめ静的なウェブページ
動的なウェブページ
定期的な更新
ページ内の非同期通信
Ajaxの誕生
Cometの発明
WebSocketの誕生
新技術
既存の技術内で新手法の発明
既存の枠組みの問題や限界 新たな需要
•DEMO•Client・Server間の通信の歴史•Ajax・Comet・WebSocketを比較•WebSocketの歴史の概要•なぜWebSocketなのか•今すぐ使える技術なのか
本日の内容
AjaxComet
WebSocket
電話☎で例えると...
新しい情報をもらえないパターン
新しい情報をもらえるパターン
Ajax☎リリリリリ~ン
はい
☎リリリリリ~ン
はい
新しい情報をください
新しい情報が2件ありました
ありがとうございます ☎ガチャ
新しい情報をください
新しい情報はありませんでした
ありがとうございます ☎ガチャ
一定時間経過(例えば1分)
Client Server
新しい情報をもらえるパターン
Comet☎リリリリリ~ン
はい
・・・・・
新しい情報をください
ちょっと待ってください
あのぉ・・・
☎リリリリリ~ン
もうちょっとまだですか?
・・・・・・・・・・
ありがとうございます ☎ガチャ
新しい情報が来ました!!!
はい
Client Server
新しい情報をもらえないパターン
Comet☎リリリリリ~ン
はい
・・・・・
新しい情報をください
ちょっと待ってください
あのぉ・・・
☎リリリリリ~ン
もうちょっとまだですか?
・・・・・・・・・・
・・・・・あのぉ・・・
☎ツーッツーッツーッ
あっ!あっ!
Client Server
電話は繋げたまま
☎リリリリリ~ン
電話は切らずにお待ちください
新しい情報が来ました!!!
ありがとうございます!!!
・・・・・・・・・・
・・・・・・・・・・
・・・・・・・・・・
ありがとうございます!!!
新しい情報が来ました!!!
こちらも情報を提供します!!!
おおっ!
Client Server
WebSocket
Request/Response型のアーキテクチャ•要求に対して応答返す様式•Server側からClientに直接送信ができない•ClientがFireWallの背後にいるため•電話で例えると、着信拒否をかけられているようなもの
HTTPについて
それぞれの接続方法の特徴
•接続の継続性•接続処理のコスト•双方向性•リアルタイム性
Ajax•接続1回に対して、情報の取得処理は多くて1回•Clientは定期的にServerに接続を行う※1
Comet•Serverは応答を返すのをできるだけ引き延ばす※2
•Web Serverの本来の動作に反する※3
•引き延ばせる時間に上限があるため、再接続が必要WebSocket•一度接続してしまえば、繋ぎっぱなしにできる•接続が切れない限り、再接続が不要
接続の継続性
※1 ポーリングと言います※2 ロングポーリングと言います※3 リクエストに対してできるだけ速くレスポンスを返すのが本来の動作
接続処理は負荷が高い※1
•AjaxとCometでは高頻度で発生•WebSocketでは一回のみ
接続処理のコスト
※1 通信したい情報に対してHTTP Headerが大きい
Serverにとっても負荷が高い
☎ピッポッパッポッパッ
待って!
はい! サーバです!
もしもし
☎ガチャ
ハイハイハイ☎リリリ~ン
☎リリリ~ン
Client Server
電話だ!☎リリリ~ン
Ajax•Client側からのみリアルタイムに送信が可能•Server側の情報は、Clientが取得しにいく必要がある•Server側に届いた情報をClientに即時反映できない•Client側からの送信は、別処理として書くことが多い
Comet•Server側からリアルタイムに送信が可能•Client側からの送信はAjaxで別に行う※1
WebSocket•Server/Clientの双方からリアルタイムに送信が可能•接続の確立はClientから行う必要がある
双方向性とリアルタイム性
※1 Cometのみで双方向通信する方法もありますが、話を単純化するために省略します
それぞれの接続方法の特徴
•接続の継続性•接続処理のコスト•双方向性•リアルタイム性
これらを考慮しもう一度電話の例を見てみます
新しい情報をもらえないパターン
新しい情報をもらえるパターン
Ajax☎リリリリリ~ン
はい
☎リリリリリ~ン
はい
新しい情報をください
新しい情報が2件ありました
ありがとうございます ☎ガチャ
新しい情報をください
新しい情報はありませんでした
ありがとうございます ☎ガチャ
一定時間経過(例えば1分)
Client Server
高い負荷
高い負荷空白時間
無駄な接続も発生
新しい情報をもらえるパターン
Comet☎リリリリリ~ン
はい
・・・・・
新しい情報をください
ちょっと待ってください
あのぉ・・・
☎リリリリリ~ン
もうちょっとまだですか?
・・・・・・・・・・
ありがとうございます ☎ガチャ
新しい情報が来ました!!!
はい
Client Server
高い負荷
高い負荷
通知があるまで待機
受信したら即切断
情報は一方向
新しい情報をもらえないパターン
Comet☎リリリリリ~ン
はい
・・・・・
新しい情報をください
ちょっと待ってください
あのぉ・・・
☎リリリリリ~ン
もうちょっとまだですか?
・・・・・・・・・・
・・・・・あのぉ・・・
☎ツーッツーッツーッ
あっ!あっ!
Client Server
高い負荷
高い負荷
無駄な接続も発生
通知があるまで待機
通話時間の上限
情報は一方向
電話は繋げたまま
WebSocket☎リリリリリ~ン
電話は切らずにお待ちください
新しい情報が来ました!!!
ありがとうございます!!!
・・・・・・・・・・
・・・・・・・・・・
・・・・・・・・・・
ありがとうございます!!!
新しい情報が来ました!!!
こちらも情報を提供します!!!
おおっ!
Client Server
高い負荷
双方向性
再接続せずに送信
openrequestresponseclosetimeout
client server
connection
Ajax
openrequestresponseclosetimeout
client server
connection
Comet
openfrom Clientfrom Serverclosetimeout
client server
connection
WebSocket
WebSocketCometAjax
Ajax•負荷が高い•サーバ側の情報取得は定期的•クライアント側の情報送信は別接続で行うことが多い
Comet•負荷が非常に高い•サーバ側の情報取得はリアルタイム•クライアント側の情報送信は別接続のAjax
WebSocket•負荷が小さい•サーバ側の情報取得はリアルタイム•クライアント側の情報送信も同じ接続内(双方向通信)
ここまでのまとめ
•DEMO•Client・Server間の通信の歴史•Ajax・Comet・WebSocketを比較•WebSocketの歴史の概要•なぜWebSocketなのか•今すぐ使える技術なのか
本日の内容
その前に仕様の説明
API•ブラウザからWebSocketを使うための仕様•AjaxでいうXMLHttpRequestに相当•W3Cが策定に関与•現在勧告候補
Protocol•WebSocketの通信プロトコル•ライブラリやブラウザを作るために必要•AjaxでいうHTTPプロトコルに相当•IETFが策定に関与•2011/12/11にRFCの標準化提案になった
2つの仕様
Protocolのバージョン•ドラフトのバージョン間で互換性がない•RFC化されたので、混乱も終息するはず
Protocolのセキュリティホール•古いドラフトにはセキュリティホールがあった•新しいドラフトでは解決済み•まだ古いProtocolを使っているブラウザがある
インターネット上の情報は、まだドラフトの情報ばかりのため、少し歴史を把握していると理解しやすい
これまでの歴史の概要
※ ドラフト(draft)とは草案のことで、最終決定していない仕様です
•DEMO•Client・Server間の通信の歴史•Ajax・Comet・WebSocketを比較•WebSocketの歴史の概要•なぜWebSocketなのか•今すぐ使える技術なのか
本日の内容
サーバ側から情報を送るにはrequest/responseでないと届きにくい
よくあるネットワーク構成
Client Serverrequest
response
send
send×
FireWallNATProxy
HTTPが一番届きやすい
通過しやすいProtocolは?
Client Server
HTTP
Telnet ×FTP ×etc. ×
FireWallNATProxy
Comet•HTTP上でlong polling•制御はプログラマやライブラリ
チャットアプリケーションや映像配信•リアルタイムなProtocolに見える•実は裏で、AjaxやCometと同じような処理
一部のProtocol•HTTP以外のProtocolを使用•ネットワークの設定が必要
サーバ側からリアルタイムな配信が可能なこれまでの技術
•利用するPort番号はHTTP/HTTPSと同じ※1
•接続処理にHTTPを使う•接続時のヘッダはほぼHTTP•セキュアなWebSocketを使うと更に通過しやすい※2
•Upgradeという処理を経てWebSocketに変更•ネットワーク機器からはHTTPに見える•ネットワークの設定変更の必要がほとんどない•ただし、脆弱性対策のためHTTPとの互換性が若干低下
WebSocketとHTTPの関係
※1 現在の仕様では80番と443番※2 接続にHTTPSを使うことでBody部が隠匿されるため
•HTML5関連技術として策定されている•各ブラウザがWebSocketへの対応を進めている•ブラウザをバージョンアップするだけで良い•ブラウザ上のJavaScriptからもAPI経由で使える•バイナリも扱える•標準仕様で双方向通信ができるのはWebSocketが初•ウェブアプリケーションの通信部分の基礎になる可能性
WebSocketとブラウザの関係
ブラウザの対応状況
SafariFirefoxOperaIE Chrome
draftversion
hixie 75 5.0.0 4
hixie 76hybi 00
11(無効※2)
4(無効※2) 5.0.1 6
hybi 07 6(Moz※3)
hybi 09
hybi 10(Last Call)
10(PP3※1)
7(Moz※3) 14
hybi 17(最新)
16(Beta)
SafariFirefoxOperaIE Chrome
※1 Platform Preview 3※2 configで設定を変更する必要がある(設定画面ではない)※3 ベンダープレフィックスが必要
WebSocketとHTTPの関係•ネットワーク機器からはHTTPに見える•ネットワークの設定変更の必要がほとんどない
WebSocketとブラウザの関係•各ブラウザが対応を進めている•JavaScriptからも使える•ウェブアプリケーションの通信の基礎
つまり、既存の環境との互換性が考慮されている
ここまでのまとめ
•DEMO•Client・Server間の通信の歴史•Ajax・Comet・WebSocketを比較•WebSocketの歴史の概要•なぜWebSocketなのか•今すぐ使える技術なのか
本日の内容
WebSocketは今すぐ使える技術?
ブラウザの対応がまだ完全には出揃っていない•IE10のリリースで、主要なモダンブラウザが全部出揃う
ブラウザのWebSocketの仕様はドラフト•ドラフトのバージョン間に互換性がない
ノウハウがまだ十分ではない•ノウハウを自分達で貯めるのか、他の人に依存するのか
今すぐ使える技術?
商用で本格的に使うにはまだそこそこリスクが高い
クリティカルなシステムを避ける•実験的なサービスであれば...
エラーのハンドリングをしっかり!•Comet等にFallbackする仕組み等•Cometでも耐えられる負荷に抑える工夫
ClientのDraftのバージョンを制限•ネイティブアプリやFlashでWebSocket
個人で遊ぶなら十分使える•遊んでノウハウを得るのはとても有用
どうしても使いたい場合
ピグライフ•アメーバピグ内のソーシャルゲーム•ClientにはFlashを使用
WebSocketが使えるホスティングサービス•Pusher ← 下りのみWebSocket•Joyent, Node Ninja etc.
Windows•IIS,WCF,IE等でWebSocketへの対応を進めている
商用で使用している例
DEMO•ローカルネットワークでのデモ
Client・Server間の通信の歴史•新技術の誕生と新手法の発明の繰り返し
Ajax・Comet・WebSocketを比較•WebSocketは低負荷でリアルタイムな双方向通信
WebSocketの歴史の概要•RFC化されたので混乱も終息していくはず•今学ぶなら、歴史を知っておくと理解しやすい
まとめ その1
なぜWebSocketなのか•既存のネットワーク環境が使える•JavaScriptから扱える
今すぐ使える技術なのか•商用利用にはまだ少し早い•条件を満たせば...•商用例も出てきている
まとめ その2
ご清聴ありがとうございました