JavaScript最新動向 〜WebSocket編〜
-
Upload
youkinjoh -
Category
Technology
-
view
29.950 -
download
3
description
Transcript of JavaScript最新動向 〜WebSocket編〜
![Page 1: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/1.jpg)
JavaScript最新動向~WebSocket編~
NTTアドバンステクノロジアプリケーションソリューション事業本部
情報機器テクノロジセンタきんじょう ゆう
金城 雄
2011/09/16石川県ソフトウェア技術研究会
![Page 2: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/2.jpg)
•質問について•資料について•講演内容について•お断り•目的•自己紹介•商品紹介
はじめに
![Page 3: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/3.jpg)
質問の時間を設けますが、必要であれば
適時質問して頂いて構いません
ただし、全ての質問に答えられない可能性があります
質問について
![Page 4: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/4.jpg)
資料は事前に配布していますが本番で使用したスライドをオンラインで公開します
※ 事前配布資料は修正される可能性があります
資料について
![Page 5: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/5.jpg)
自由に発信してもらって構いませんBlogに感想を書いてもらって構いませんTwitterでつぶやいても構いません
むしろ、大歓迎です
講演内容について
![Page 6: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/6.jpg)
表記が揺れていますが、この資料ではWebSocketで統一します
WebSocket WebSocketsWeb SocketWeb Sockets
お断り その1
![Page 7: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/7.jpg)
話をわかりやすくするために、この資料では、
Clientは単にブラウザのことを指します
※ HTTPによる通信がブラウザとWeb Server間に限らないことと同様に、
WebSocketによる通信はブラウザとWebSocket Server間以外でも行えます。
お断り その2
![Page 8: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/8.jpg)
一年後も使えるWebSocketの基礎知識を
WebSocketを使い始める時に事前に知っていたら理解が早まる情報を
目的
![Page 9: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/9.jpg)
きんじょう ゆう金城 雄NTTアドバンステクノロジ
NTT-ATアプリケーションソリューション事業本部情報機器テクノロジセンタ所属
自己紹介 その1
http://gihyo.jp/dev/feature/01/websocket より引用
![Page 10: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/10.jpg)
自己紹介 その2
http://gihyo.jp/dev/feature/01/websocket/0001
gihyo.jp
Jettyで始めるWebSocket超入門
![Page 11: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/11.jpg)
商品紹介
別のスライドを用います
![Page 12: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/12.jpg)
•質問について•資料について•講演内容について•お断り•目的•自己紹介•商品紹介
はじめに
![Page 13: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/13.jpg)
•HTML5とJavaScriptとWebSocket•Client・Server間の通信の歴史•Ajax・Comet・WebSocketを比較•WebSocketの歴史•なぜWebSocketなのか•今すぐ使える技術なのか•デバイス間連携
本日の内容
![Page 14: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/14.jpg)
•HTML5とJavaScriptとWebSocket•Client・Server間の通信の歴史•Ajax・Comet・WebSocketを比較•WebSocketの歴史•なぜWebSocketなのか•今すぐ使える技術なのか•デバイス間連携
本日の内容
![Page 15: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/15.jpg)
HTML5
![Page 16: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/16.jpg)
HTML5については
既に白石さんが話されているそうなので簡単に...
http://itpro.nikkeibp.co.jp/article/NEWS/20101021/353254/ より引用
![Page 17: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/17.jpg)
HTML5と言われたとき広義の意味(バズワード)と狭義の意味(本当の仕様)の
どちらの意味で使われているのか
注意が必要
![Page 18: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/18.jpg)
\NbZ��!��?
Web Workers
Web Storage
The WebSockets API
Server-Sent Events
Geolocation API
XMLHttpRequest Level 2
Canvas 2D
Forms
File API
SVG
Drag & Drop API
Indexed Database API
Microdata
Cross-document Messaging
WebGL
WebFonts
Event Listener
Microformats
CSS3 Transitions
ECMAScript 5th
Offline Events
HTML5 Markup
WebM (VP8) Codec
XPath
http://www.slideshare.net/dynamis/keypoints-html5-4920336 より引用
![Page 19: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/19.jpg)
\NbZ��!��?
Web Workers
Web Storage
The WebSockets API
Server-Sent Events
Geolocation API
XMLHttpRequest Level 2
Canvas 2D
Forms
File API
SVG
Drag & Drop API
Indexed Database API
Microdata
Cross-document Messaging
WebGL
WebFonts
Event Listener
Microformats
CSS3 Transitions
ECMAScript 5th
Offline Events
HTML5 Markup
WebM (VP8) Codec
XPath
WHATWG 仕様書の定義によるCanvas はタグの定義だけが HTML5
http://www.slideshare.net/dynamis/keypoints-html5-4920336 より引用
![Page 20: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/20.jpg)
HTML5とJavaScript
![Page 21: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/21.jpg)
\NbZ��!��?
Web Workers
Web Storage
The WebSockets API
Server-Sent Events
Geolocation API
XMLHttpRequest Level 2
Canvas 2D
Forms
File API
SVG
Drag & Drop API
Indexed Database API
Microdata
Cross-document Messaging
WebGL
WebFonts
Event Listener
Microformats
CSS3 Transitions
ECMAScript 5th
Offline Events
HTML5 Markup
WebM (VP8) Codec
XPath
http://www.slideshare.net/dynamis/keypoints-html5-4920336 より引用
JavaScriptが必要なAPIは?
![Page 22: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/22.jpg)
\NbZ��!��?
Web Workers
Web Storage
The WebSockets API
Server-Sent Events
Geolocation API
XMLHttpRequest Level 2
Canvas 2D
Forms
File API
SVG
Drag & Drop API
Indexed Database API
Microdata
Cross-document Messaging
WebGL
WebFonts
Event Listener
Microformats
CSS3 Transitions
ECMAScript 5th
Offline Events
HTML5 Markup
WebM (VP8) Codec
XPath
http://www.slideshare.net/dynamis/keypoints-html5-4920336 より引用
JavaScriptが必要なAPI
![Page 23: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/23.jpg)
WebSocketとHTML5の関係について
![Page 24: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/24.jpg)
WebSocketはHTML5ですか?
質問
![Page 25: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/25.jpg)
WebSocketはHTML5ではありません
解答
![Page 26: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/26.jpg)
\NbZ��!��?
Web Workers
Web Storage
The WebSockets API
Server-Sent Events
Geolocation API
XMLHttpRequest Level 2
Canvas 2D
Forms
File API
SVG
Drag & Drop API
Indexed Database API
Microdata
Cross-document Messaging
WebGL
WebFonts
Event Listener
Microformats
CSS3 Transitions
ECMAScript 5th
Offline Events
HTML5 Markup
WebM (VP8) Codec
XPath
http://www.slideshare.net/dynamis/keypoints-html5-4920336 より引用
![Page 27: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/27.jpg)
\NbZ��!��?
Web Workers
Web Storage
The WebSockets API
Server-Sent Events
Geolocation API
XMLHttpRequest Level 2
Canvas 2D
Forms
File API
SVG
Drag & Drop API
Indexed Database API
Microdata
Cross-document Messaging
WebGL
WebFonts
Event Listener
Microformats
CSS3 Transitions
ECMAScript 5th
Offline Events
HTML5 Markup
WebM (VP8) Codec
XPath
WHATWG 仕様書の定義によるCanvas はタグの定義だけが HTML5
http://www.slideshare.net/dynamis/keypoints-html5-4920336 より引用
WebSocket
![Page 28: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/28.jpg)
WebSocketはHTML5の一部であったが
後に分離された
![Page 29: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/29.jpg)
Next Generation of HTML
WHATWG - HTML5
世間で "HTML5" とごちゃ混ぜで呼ばれることがある仕様の一部...
Canvas 2D Graphics Context
MicrodataMicrodata vocabularies
W3C - HTML5
Cross-document messagingChannel messaging
HTML5 Web Messaging
HTML5 Microdata
HTML Canvas 2D Context
Web Workers
The WebSocket protocol
SVGMathML
Web Storage
The WebSockets API
Server-Sent Events
Geolocation API
XMLHttpRequest Level 2
Indexed Database API
<device> ping=""
timed track HTML→Atom
Elements, Events, APIs Elements, Events, APIs
http://www.slideshare.net/dynamis/keypoints-html5-4920336 より引用
WebSocket
![Page 30: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/30.jpg)
最低限知っておきたいこと•HTML5はFlashを駆逐するものではない•HTML5とFlashはお互いを補い合うもの•適材適所
HTML5 vs Flash
![Page 31: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/31.jpg)
HTML5•広義と狭義•広義の意味でのHTML5は使わない方が無難
HTML5とJavaScript•HTML5関連技術とJavaScriptは関連が深い
HTML5とWebSocket•WebSocketは元々はHTML5の一部•今は別の仕様
ここまでのまとめ
![Page 32: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/32.jpg)
•HTML5とJavaScriptとWebSocket•Client・Server間の通信の歴史•Ajax・Comet・WebSocketを比較•WebSocketの歴史•なぜWebSocketなのか•今すぐ使える技術なのか•デバイス間連携
本日の内容
![Page 33: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/33.jpg)
Client・Server間の通信の歴史
![Page 34: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/34.jpg)
•HTTPはリクエスト/レスポンス型•画面の書き換えには再読み込みや画面遷移が必要
○△□のホームページ
あなたは00112人目の訪問者ですキリ番の方は連絡ください
100番目は〇〇さんでした!
1996年6月の日記へ1996年7月の日記へ1996年8月の日記へ1996年9月の日記へ
ホームに戻る1996年7月の日記
1996年7月10日今日は朝から天気が良かったので、友達と買い物に行きました。何を買った知りたいですか?フフフ ナイショです!!!
1996年7月13日3日ぶりの更新です!と言いつつ何も書くことがありません・・・見にきてくれている人、ごめんなさいm(_ _)m
静的なウェブページリンクをクリック
ServerRequest Response
![Page 35: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/35.jpg)
•JavaScriptの登場によるDHTML•情報は最初から埋め込まれている•新しい情報を得るには画面遷移が必要
○△□のホームページ
ココをクリックするとヒミツのメッセージが表示されます!
あ!見られちゃいましたね!
ようこそ○△□のホームページへ!
○△□のホームページ
ココをクリックするとヒミツのメッセージが表示されます!
あ!見られちゃいましたね!
ようこそ○△□のホームページへ!
動的なウェブページ
非表示
クリックすると表示
クリック
![Page 36: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/36.jpg)
•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
一定間隔で再読み込み
![Page 37: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/37.jpg)
•隠し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
![Page 38: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/38.jpg)
•通信を行うXMLHttpRequestオブジェクトが追加•サーバとの通信が容易になった•通信の起点はClient
チャットルーム
09:25 佐藤こんにちは!━━━━━━━━━━━━━━━━━━09:26 山田おひさ
チャットルーム
09:25 佐藤こんにちは!━━━━━━━━━━━━━━━━━━09:26 山田おひさ━━━━━━━━━━━━━━━━━━09:27 佐藤おひさ!━━━━━━━━━━━━━━━━━━09:27 鈴木おおお!久しぶり!
Ajaxの誕生山田名前
発言 発言
山田名前
発言 発言
差分コンテンツ反映
Server09:27 佐藤 おひさ!09:27 鈴木 おおお!久しぶり!
Response
var xhr=new XMLHttpRequest();...xhr.send(...);
Request
XMLHttpRequestで非同期通信開始
※ Ajax Comet WebSocketの詳細な比較は後ほど...
![Page 39: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/39.jpg)
•Ajax等を駆使し実現した疑似サーバプッシュ技術•応答を遅延させるという発想の転換•接続の起点はClient 情報配信の起点はServer
チャットルーム
09:25 佐藤こんにちは!━━━━━━━━━━━━━━━━━━09:26 山田おひさ
チャットルーム
09:25 佐藤こんにちは!━━━━━━━━━━━━━━━━━━09:26 山田おひさ━━━━━━━━━━━━━━━━━━09:27 佐藤おひさ!━━━━━━━━━━━━━━━━━━09:27 鈴木おおお!久しぶり!
Cometの発明山田名前
発言 発言
山田名前
発言 発言
コンテンツを逐次反映
Server09:27 佐藤 おひさ!Response
var xhr=new XMLHttpRequest();...xhr.send(...);
Request
XMLHttpRequestで非同期通信開始
応答をすぐには返さない09:27 鈴木 おおお!久しぶり!
※ Ajax Comet WebSocketの詳細な比較は後ほど...
![Page 40: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/40.jpg)
•新たにWebSocketオブジェクトが追加•サーバプッシュが容易になった•接続の起点はClient 情報配信は双方向
09:26 山田 おひさ
チャットルーム チャットルーム
09:25 佐藤こんにちは!━━━━━━━━━━━━━━━━━━09:26 山田おひさ━━━━━━━━━━━━━━━━━━09:27 佐藤おひさ!━━━━━━━━━━━━━━━━━━09:27 鈴木おおお!久しぶり!
WebSocketの誕生山田名前
発言 発言
山田名前
発言 発言
コンテンツを逐次反映
Server09:25 佐藤 こんにちは!send
var ws=new WebSocket(...);...ws.send(...);
Connect
WebSocketで非同期通信開始
09:27 佐藤 おひさ!09:27 鈴木 おおお!久しぶり!
双方向通信※ Ajax Comet WebSocketの詳細な比較は後ほど...
![Page 41: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/41.jpg)
通信技術の発明と実装動的なページを作成できるJavaScriptの誕生
需要 : 画面遷移せず通信したい
隠しiframeによる非同期通信の発明
限界 : 複雑で簡単に使えない
非同期通信のできるXMLHttpRequestの誕生需要 : サーバプッシュがしたい
Cometによる疑似サーバプッシュの発明問題 : 複雑で簡単に使えない
サーバプッシュのできるWebSocketの誕生
需要 : ???
新技術
工夫
新技術
工夫
新技術
旧来のページ限界 : ページが動的でない
![Page 42: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/42.jpg)
ここまでのまとめ静的なウェブページ
動的なウェブページ
定期的な更新
ページ内の非同期通信
Ajaxの誕生
Cometの発明
WebSocketの誕生
新技術
既存の技術内で新手法の発明
既存の枠組みの限界 新たな需要
![Page 43: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/43.jpg)
•HTML5とJavaScriptとWebSocket•Client・Server間の通信の歴史•Ajax・Comet・WebSocketを比較•WebSocketの歴史•なぜWebSocketなのか•今すぐ使える技術なのか•デバイス間連携
本日の内容
![Page 44: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/44.jpg)
AjaxComet
WebSocket
電話☎で例えると...
![Page 45: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/45.jpg)
☎リリリリリ~ン
はい
☎リリリリリ~ン
はい
新しい情報をください
新しい情報が2件ありました
ありがとうございます ☎ガチャ
新しい情報をください
新しい情報はありませんでした
ありがとうございます ☎ガチャ
一定時間経過(例えば1分)
Ajax新しい情報を
もらえるパターン
新しい情報をもらえないパターン
Client Server
![Page 46: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/46.jpg)
☎リリリリリ~ン
はい
・・・・・
新しい情報をください
ちょっと待ってください
あのぉ・・・
☎リリリリリ~ン
Comet新しい情報を
もらえるパターン
もうちょっとまだですか?
・・・・・・・・・・
ありがとうございます ☎ガチャ
新しい情報が来ました!!!
はい
Client Server
![Page 47: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/47.jpg)
☎リリリリリ~ン
はい
・・・・・
新しい情報をください
ちょっと待ってください
あのぉ・・・
☎リリリリリ~ン
Comet新しい情報をもらえないパターン
もうちょっとまだですか?
・・・・・・・・・・
・・・・・あのぉ・・・
☎ツーッツーッツーッ
あっ!あっ!
Client Server
![Page 48: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/48.jpg)
☎リリリリリ~ン
電話は切らずにお待ちください
新しい情報が来ました!!!
ありがとうございます!!!
WebSocket電話は
繋げたまま
・・・・・・・・・・
・・・・・・・・・・
・・・・・・・・・・
ありがとうございます!!!
新しい情報が来ました!!!
こちらも情報を提供します!!!
おおっ!
Client Server
![Page 49: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/49.jpg)
Request/Response型のアーキテクチャ•要求に対して応答返す様式•Server側からClientに直接送信ができない•ClientがFireWallの背後にいるため•電話で例えると、着信拒否をかけられているようなもの
HTTPについて
![Page 50: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/50.jpg)
それぞれの接続方法を比較
•接続の継続性•接続処理のコスト•双方向性•リアルタイム性
![Page 51: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/51.jpg)
Ajax•接続1回に対して、情報の取得処理は多くて1回•Clientは定期的にServerに接続を行う※1
Comet•Serverは応答を返すのをできるだけ引き延ばす※2
•Web Serverの本来の動作に反する※3
•引き延ばせる時間に上限があるため、再接続が必要WebSocket•一度接続してしまえば、繋ぎっぱなしにできる•接続が切れない限り、再接続が不要
接続の継続性
※1 ポーリングと言います※2 ロングポーリングと言います※3 リクエストに対してできるだけ速くレスポンスを返すのが本来の動作
![Page 52: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/52.jpg)
☎ピッポッパッポッパッ
待って!
はい! サーバです!
もしもし
☎ガチャ
ハイハイハイ☎リリリ~ン
☎リリリ~ン
接続処理は負荷が高い※1
•AjaxとCometでは高頻度で発生•WebSocketでは一回のみ
Client Server
接続処理のコスト
※1 通信したい情報に対してHTTP Headerが大きい
Serverにとっても負荷が高い
電話だ!☎リリリ~ン
![Page 53: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/53.jpg)
Ajax•Client側からのみリアルタイムに送信が可能•Server側の情報は、Clientが取得しにいく必要がある•Server側に届いた情報をClientに即時反映できない•Client側からの送信は、別処理として書くことが多い
Comet•Server側からリアルタイムに送信が可能•Client側からの送信はAjaxで別に行う※1
WebSocket•Server/Clientの双方からリアルタイムに送信が可能•接続の確立はClientから行う必要がある
双方向性とリアルタイム性
※1 Cometのみで双方向通信する方法もありますが、話を単純化するために省略します
![Page 54: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/54.jpg)
それぞれの接続方法の特徴
•接続の継続性•接続処理のコスト•双方向性•リアルタイム性
これらを考慮しもう一度電話の例を見てみます
![Page 55: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/55.jpg)
☎リリリリリ~ン
はい
☎リリリリリ~ン
はい
新しい情報をください
新しい情報が2件ありました
ありがとうございます ☎ガチャ
新しい情報をください
新しい情報はありませんでした
ありがとうございます ☎ガチャ
一定時間経過(例えば1分)
Ajax新しい情報を
もらえるパターン
新しい情報をもらえないパターン
Client Server
高い負荷
高い負荷空白時間
無駄な接続も発生
![Page 56: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/56.jpg)
☎リリリリリ~ン
はい
・・・・・
新しい情報をください
ちょっと待ってください
あのぉ・・・
☎リリリリリ~ン
もうちょっとまだですか?
・・・・・・・・・・
ありがとうございます ☎ガチャ
新しい情報が来ました!!!
はい
Comet新しい情報を
もらえるパターン
Client Server
高い負荷
高い負荷
通知があるまで待機
受信したら即切断
情報は一方向
![Page 57: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/57.jpg)
☎リリリリリ~ン
はい
・・・・・
新しい情報をください
ちょっと待ってください
あのぉ・・・
☎リリリリリ~ン
もうちょっとまだですか?
・・・・・・・・・・
・・・・・あのぉ・・・
☎ツーッツーッツーッ
あっ!あっ!
Comet新しい情報をもらえないパターン
Client Server
高い負荷
高い負荷
無駄な接続も発生
通知があるまで待機
通話時間の上限
情報は一方向
![Page 58: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/58.jpg)
☎リリリリリ~ン
電話は切らずにお待ちください
新しい情報が来ました!!!
ありがとうございます!!!
・・・・・・・・・・
・・・・・・・・・・
・・・・・・・・・・
ありがとうございます!!!
新しい情報が来ました!!!
こちらも情報を提供します!!!
おおっ!
WebSocket電話は
繋げたまま
Client Server
高い負荷
双方向性
再接続せずに送信
![Page 59: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/59.jpg)
openrequestresponseclosetimeout
client server
connection
Ajax
![Page 60: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/60.jpg)
openrequestresponseclosetimeout
client server
connection
Comet
![Page 61: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/61.jpg)
openfrom Clientfrom Serverclosetimeout
client server
connection
WebSocket
![Page 62: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/62.jpg)
WebSocketCometAjax
![Page 63: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/63.jpg)
Ajax•負荷が高い•サーバ側の情報取得は定期的•クライアント側の情報送信は別接続で行うことが多い
Comet•負荷が非常に高い•サーバ側の情報取得はリアルタイム•クライアント側の情報送信は別接続のAjax
WebSocket•負荷が小さい•サーバ側の情報取得はリアルタイム•クライアント側の情報送信も同じ接続内(双方向通信)
ここまでのまとめ
![Page 64: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/64.jpg)
•HTML5とJavaScriptとWebSocket•Client・Server間の通信の歴史•Ajax・Comet・WebSocketを比較•WebSocketの歴史•なぜWebSocketなのか•今すぐ使える技術なのか•デバイス間連携
本日の内容
![Page 65: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/65.jpg)
その前に仕様の説明
![Page 66: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/66.jpg)
API•ブラウザからWebSocketを使うための仕様•AjaxでいうXMLHttpRequestに相当•W3Cが策定に関与•仕様はまだドラフトだが更新が比較的少ない
Protocol•WebSocketの通信プロトコル•ライブラリやブラウザを作るために必要•AjaxでいうHTTPプロトコルに相当•IETFが策定に関与•仕様はドラフトで更新が頻繁に行われている
2つの仕様
※ ドラフト(draft)とは草案のことで、最終決定していない仕様です
![Page 67: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/67.jpg)
WebSocketProtocolの
歴史
![Page 68: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/68.jpg)
ドラフトのバージョンが違うと互換性がない•調べる時はドラフトのバージョンに注意
2009.01.09 hixie 002010.02.04 hixie 752010.05.06 hixie 762010.05.23 hybi 00 名称変更(hixie 76と同じもの)2010.10.17 hybi 03 セキュリティホール発覚2011.01.11 hybi 04 セキュリティホール解消2011.07.11 hybi 10 最終草案(Last Call)2011.09.08 hybi 14
プロトコルのドラフトの変移
※ 主要なドラフトの抜粋です
![Page 69: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/69.jpg)
hixie 00~76 (~2010.05.06)hybi 00~14 (2010.05.23~)
•hixie 75やhybi 10のように区別※
•hixie 76とhybi 00は同じもの•ネット上はhixie 75以降の情報が多い
※ この表記は便宜上のもので、正確な名称は次の通りdraft-hixie-thewebsocketprotocol-75
draft-ietf-hybi-thewebsocketprotocol-10
ドラフトの名前の変更
![Page 70: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/70.jpg)
どのような脆弱性だった?•そもそもは透過型プロキシの問題
何が起きる?•Firewall Circumvention•特定の条件を満たすLANに不正アクセス•ブラウザ経由でFirewallより内側のサーバにアクセス•Cache Poisoning•キャッシュの汚染•XSSの危険
セキュリティホールの内容
http://blog.livedoor.jp/kotesaki/archives/1600864.html 参照
![Page 71: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/71.jpg)
WebSocketは危険?•最新のドラフトでは解決済み•プロトコルレベルで対応したWebSocket•ドラフトだからできた大きな修正
FlashやJavaでも同様の脆弱性がある•広く普及しているため未対応
WebSocketの普及への影響•若干水を差す結果に•最近は普及が再び加速している印象
WebSocketは危険?
![Page 72: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/72.jpg)
hybi 00が普及の兆し•Chromeに実装•Safariに実装•iOSに実装•Firefox 4のベータ版にも実装
hybi 03とそれ以前にセキュリティホールが発覚•Firefoxで無効化•Operaも同様に無効化•Chromeは状況次第で無効化すると発表
hybi 04でセキュリティホール解消
脆弱性がブラウザに与えた影響
![Page 73: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/73.jpg)
WebSocketの2つの仕様•API•Protocol
プロトコルのドラフトのバージョン•調査時はバージョンに注意
名称変更•調査時は名称にも注意
WebSocketとセキュリティ•プロトコルレベルで解決済み•少なからず普及への影響はあった
ここまでのまとめ
![Page 74: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/74.jpg)
•HTML5とJavaScriptとWebSocket•Client・Server間の通信の歴史•Ajax・Comet・WebSocketを比較•WebSocketの歴史•なぜWebSocketなのか•今すぐ使える技術なのか•デバイス間連携
本日の内容
![Page 75: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/75.jpg)
サーバ側から情報を送るにはrequest/responseでないと届きにくい
Client Server
よくあるネットワーク構成
request
response
FireWallNATProxy
send
send×
![Page 76: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/76.jpg)
HTTPが一番届きやすい
Client Server
通過しやすいProtocolは?FireWallNATProxy
HTTP
Telnet ×FTP ×etc. ×
![Page 77: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/77.jpg)
Comet•HTTP上でlong polling•制御はプログラマやライブラリ
チャットアプリケーションや映像配信•リアルタイムなProtocolに見える•実は裏で、AjaxやCometと同じような処理
一部のProtocol•HTTP以外のProtocolを使用•ネットワークの設定が必要
サーバ側からリアルタイムな配信が可能なこれまでの技術
![Page 78: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/78.jpg)
•利用するPort番号はHTTP/HTTPSと同じ※1
•接続処理にHTTPを使う•接続時のヘッダはほぼHTTP•セキュアなWebSocketを使うと更に通過しやすい※2
•Upgradeという処理を経てWebSocketに変更•ネットワーク機器からはHTTPに見える•ネットワークの設定変更の必要がほとんどない•ただし、脆弱性対応のためHTTPとの互換性が若干低下
WebSocketとHTTPの関係
※1 現在の仕様では80番と443番※2 接続にHTTPSを使うことでBody部が隠匿されるため
![Page 79: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/79.jpg)
•HTML5関連技術として策定されている•各ブラウザがWebSocketへの対応を進めている•ブラウザをバージョンアップするだけで良い•ブラウザ上のJavaScriptからもAPI経由で使える•バイナリも扱えるようになる予定•標準仕様で双方向通信ができるのはWebSocketが初•ウェブアプリケーションの通信部分の基礎になる可能性
WebSocketとブラウザの関係
![Page 80: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/80.jpg)
Safari
ブラウザの対応状況
FirefoxOperaIE Chrome
![Page 81: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/81.jpg)
draftversion
hixie 75 5.0.0 4
hixie 76hybi 00
11(無効)
4(無効) 5.0.1 6
hybi 07 6(Moz)
hybi 09 HTML5Labs
hybi 10(Last Call)
7(Beta)
14(Beta)
hybi 14(最新)
SafariFirefoxOperaIE Chrome
![Page 82: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/82.jpg)
Android標準ブラウザ
スマートフォンの対応状況ブラウザの場合
iOS 4.2.1以降mobile Safari
×hixie 76hybi 00
![Page 83: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/83.jpg)
Android
スマートフォンの対応状況ネイティブアプリの場合
iOS
JettyというJava実装のサーバライブラリならサーバ実装の報告あり多分クライアントも...
iOSアプリからは使えない?Obj-Cに詳しくないので詳細はわかりません
すいません
![Page 84: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/84.jpg)
WebSocketとHTTPの関係•ネットワーク機器からはHTTPに見える•ネットワークの設定変更の必要がほとんどない
WebSocketとブラウザの関係•各ブラウザが対応を進めている•JavaScriptからも使える•ウェブアプリケーションの通信の基礎
つまり、既存の環境との互換性が考慮されている
ここまでのまとめ
![Page 85: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/85.jpg)
•HTML5とJavaScriptとWebSocket•Client・Server間の通信の歴史•Ajax・Comet・WebSocketを比較•WebSocketの歴史•なぜWebSocketなのか•今すぐ使える技術なのか•デバイス間連携
本日の内容
![Page 86: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/86.jpg)
WebSocketは今すぐ使える技術?
![Page 87: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/87.jpg)
ブラウザの対応がまだ出揃っていない•特に、IEがネック
プロトコルの仕様がまだ不安定•ドラフトのバージョン間に互換性がない
APIが突然無効になる可能性も•脆弱性が発見された時のFirefoxとOperaの対応
ノウハウがまだ不十分
今すぐ使える技術?
商用で本格的に使うにはまだリスクが高い
![Page 88: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/88.jpg)
実験的なサービスであれば...エラーのハンドリングをしっかり!Comet等にFallbackする仕組み•Cometでも耐えられる負荷に抑える工夫•キーワード → socket.io
個人で遊ぶなら十分使える•遊んでノウハウを得るのは有用
どうしても使いたい場合
![Page 89: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/89.jpg)
•HTML5とJavaScriptとWebSocket•Client・Server間の通信の歴史•Ajax・Comet・WebSocketを比較•WebSocketの歴史•なぜWebSocketなのか•今すぐ使える技術なのか•デバイス間連携
本日の内容
![Page 90: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/90.jpg)
デモ時間があれば、
なぜデバイス間連携なのかのスライドも...
デバイス間連携
![Page 91: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/91.jpg)
WebSocketをデバイス連携に使うのは現時点ではマイナーな利用形態です。
デバイス連携は私の得意分野のため、デモもそれに沿っています。
デモ お断り その1
![Page 92: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/92.jpg)
現在、WebSocketの主流は、もちろんインターネット上です。
デモではJettyというJavaのライブラリを使用していますが、
現在の主流は、node.jsというJavaScriptのサーバです。
デモ お断り その2
![Page 93: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/93.jpg)
DEMO
![Page 94: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/94.jpg)
•HTML5とJavaScriptとWebSocket•HTML5関連技術とJavaScriptは関連が深い•WebSocketはHTML5の一部だったが別仕様に•Client・Server間の通信の歴史•新技術の誕生と新手法の発明の繰り返し•Ajax・Comet・WebSocketを比較•WebSocketは低負荷でリアルタイムな双方向通信
まとめ その1
![Page 95: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/95.jpg)
•WebSocketの歴史•名称とバージョン間の互換性に注意•問題となったセキュリティホールは解決済み•なぜWebSocketなのか•既存のネットワーク環境が使える•JavaScriptから扱える•今すぐ使える技術なのか•商用利用にはまだ早い•デバイス間連携•デモ
まとめ その2
![Page 96: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/96.jpg)
ご清聴ありがとうございました
![Page 97: JavaScript最新動向 〜WebSocket編〜](https://reader033.fdocuments.net/reader033/viewer/2022051323/549a477fb47959514d8b59b3/html5/thumbnails/97.jpg)
もう一度聞きたいところはありますか?
もっと詳しく聞きたいところはありますか?
質疑応答