javascript最新動向〜websocket編〜

JavaScript最新動向～WebSocket編～

NTTアドバンステクノロジアプリケーションソリューション事業本部

情報機器テクノロジセンタきんじょうゆう

金城雄

2011/09/16石川県ソフトウェア技術研究会

•質問について•資料について•講演内容について•お断り•目的•自己紹介•商品紹介

はじめに

質問の時間を設けますが、必要であれば

適時質問して頂いて構いません

ただし、全ての質問に答えられない可能性があります

質問について

資料は事前に配布していますが本番で使用したスライドをオンラインで公開します

※ 事前配布資料は修正される可能性があります

資料について

自由に発信してもらって構いませんBlogに感想を書いてもらって構いませんTwitterでつぶやいても構いません

むしろ、大歓迎です

講演内容について

表記が揺れていますが、この資料ではWebSocketで統一します

WebSocket WebSocketsWeb SocketWeb Sockets

お断りその1

話をわかりやすくするために、この資料では、

Clientは単にブラウザのことを指します

※ HTTPによる通信がブラウザとWeb Server間に限らないことと同様に、

WebSocketによる通信はブラウザとWebSocket Server間以外でも行えます。

お断りその2

一年後も使えるWebSocketの基礎知識を

WebSocketを使い始める時に事前に知っていたら理解が早まる情報を

目的

きんじょうゆう金城雄NTTアドバンステクノロジ

NTT-ATアプリケーションソリューション事業本部情報機器テクノロジセンタ所属

自己紹介その1

http://gihyo.jp/dev/feature/01/websocket より引用

自己紹介その2

http://gihyo.jp/dev/feature/01/websocket/0001

gihyo.jp

Jettyで始めるWebSocket超入門



商品紹介

別のスライドを用います

•質問について•資料について•講演内容について•お断り•目的•自己紹介•商品紹介

はじめに

•HTML5とJavaScriptとWebSocket•Client・Server間の通信の歴史•Ajax・Comet・WebSocketを比較•WebSocketの歴史•なぜWebSocketなのか•今すぐ使える技術なのか•デバイス間連携

本日の内容

HTML5については

既に白石さんが話されているそうなので簡単に...

http://itpro.nikkeibp.co.jp/article/NEWS/20101021/353254/ より引用

HTML5と言われたとき広義の意味(バズワード)と狭義の意味(本当の仕様)の

どちらの意味で使われているのか

注意が必要

\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 より引用

\NbZ��!��?

Web Workers

Web Storage

The WebSockets API

Server-Sent Events

Geolocation API


Canvas 2D

Forms

File API

SVG

Drag & Drop API


Microdata


WebGL

WebFonts

Event Listener

Microformats

CSS3 Transitions

ECMAScript 5th

Offline Events

HTML5 Markup

WebM (VP8) Codec

XPath

WHATWG 仕様書の定義によるCanvas はタグの定義だけが HTML5


HTML5とJavaScript

\NbZ��!��?

Web Workers

Web Storage

The WebSockets API

Server-Sent Events

Geolocation API


Canvas 2D

Forms

File API

SVG

Drag & Drop API


Microdata


WebGL

WebFonts

Event Listener

Microformats

CSS3 Transitions

ECMAScript 5th

Offline Events

HTML5 Markup

WebM (VP8) Codec

XPath


JavaScriptが必要なAPIは?

\NbZ��!��?

Web Workers

Web Storage

The WebSockets API

Server-Sent Events

Geolocation API


Canvas 2D

Forms

File API

SVG

Drag & Drop API


Microdata


WebGL

WebFonts

Event Listener

Microformats

CSS3 Transitions

ECMAScript 5th

Offline Events

HTML5 Markup

WebM (VP8) Codec

XPath


JavaScriptが必要なAPI

WebSocketとHTML5の関係について

WebSocketはHTML5ですか?

質問

WebSocketはHTML5ではありません

解答

\NbZ��!��?

Web Workers

Web Storage

The WebSockets API

Server-Sent Events

Geolocation API


Canvas 2D

Forms

File API

SVG

Drag & Drop API


Microdata


WebGL

WebFonts

Event Listener

Microformats

CSS3 Transitions

ECMAScript 5th

Offline Events

HTML5 Markup

WebM (VP8) Codec

XPath


\NbZ��!��?

Web Workers

Web Storage

The WebSockets API

Server-Sent Events

Geolocation API


Canvas 2D

Forms

File API

SVG

Drag & Drop API


Microdata


WebGL

WebFonts

Event Listener

Microformats

CSS3 Transitions

ECMAScript 5th

Offline Events

HTML5 Markup

WebM (VP8) Codec

XPath

WHATWG 仕様書の定義によるCanvas はタグの定義だけが HTML5


WebSocket

WebSocketはHTML5の一部であったが

後に分離された

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



<device> ping=""

timed track HTML→Atom

Elements, Events, APIs Elements, Events, APIs


WebSocket

最低限知っておきたいこと•HTML5はFlashを駆逐するものではない•HTML5とFlashはお互いを補い合うもの•適材適所

HTML5 vs Flash

HTML5•広義と狭義•広義の意味でのHTML5は使わない方が無難

HTML5とJavaScript•HTML5関連技術とJavaScriptは関連が深い

HTML5とWebSocket•WebSocketは元々はHTML5の一部•今は別の仕様

ここまでのまとめ


本日の内容

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 山田おひさ



ページ内の非同期通信山田名前

発言発言

山田名前

発言発言

iframe

JavaScriptで非表示iframeを生成

09:27 佐藤おひさ！09:27 鈴木おおお！久しぶり！

差分コンテンツ取得

JavaScriptでコンテンツ反映

ServerRequest 09:27 佐藤おひさ！

09:27 鈴木おおお！久しぶり！Response

•通信を行うXMLHttpRequestオブジェクトが追加•サーバとの通信が容易になった•通信の起点はClient


09:25 佐藤こんにちは！━━━━━━━━━━━━━━━━━━09:26 山田おひさ



Ajaxの誕生山田名前

発言発言

山田名前

発言発言

差分コンテンツ反映

Server09:27 佐藤おひさ！09:27 鈴木おおお！久しぶり！

Response

var xhr=new XMLHttpRequest();...xhr.send(...);

Request

XMLHttpRequestで非同期通信開始

※ Ajax Comet WebSocketの詳細な比較は後ほど...

•Ajax等を駆使し実現した疑似サーバプッシュ技術•応答を遅延させるという発想の転換•接続の起点はClient 情報配信の起点はServer


09:25 佐藤こんにちは！━━━━━━━━━━━━━━━━━━09:26 山田おひさ



Cometの発明山田名前

発言発言

山田名前

発言発言

コンテンツを逐次反映

Server09:27 佐藤おひさ！Response

var xhr=new XMLHttpRequest();...xhr.send(...);

Request

XMLHttpRequestで非同期通信開始

応答をすぐには返さない09:27 鈴木おおお！久しぶり！

※ Ajax Comet WebSocketの詳細な比較は後ほど...

•新たにWebSocketオブジェクトが追加•サーバプッシュが容易になった•接続の起点はClient 情報配信は双方向

09:26 山田おひさ

チャットルームチャットルーム


WebSocketの誕生山田名前

発言発言

山田名前

発言発言

コンテンツを逐次反映

Server09:25 佐藤こんにちは！send

var ws=new WebSocket(...);...ws.send(...);

Connect

WebSocketで非同期通信開始

09:27 佐藤おひさ！09:27 鈴木おおお！久しぶり！

双方向通信※ Ajax Comet WebSocketの詳細な比較は後ほど...

通信技術の発明と実装動的なページを作成できるJavaScriptの誕生

需要 : 画面遷移せず通信したい

隠しiframeによる非同期通信の発明

限界 : 複雑で簡単に使えない

非同期通信のできるXMLHttpRequestの誕生需要 : サーバプッシュがしたい

Cometによる疑似サーバプッシュの発明問題 : 複雑で簡単に使えない

サーバプッシュのできるWebSocketの誕生

需要 : ???

新技術

工夫

新技術

工夫

新技術

旧来のページ限界 : ページが動的でない

ここまでのまとめ静的なウェブページ

動的なウェブページ

定期的な更新

ページ内の非同期通信

Ajaxの誕生

Cometの発明

WebSocketの誕生

新技術

既存の技術内で新手法の発明

既存の枠組みの限界新たな需要


本日の内容

AjaxComet

WebSocket

電話☎で例えると...

☎リリリリリ～ン

はい


はい

新しい情報をください

新しい情報が2件ありました

ありがとうございます ☎ガチャ


新しい情報はありませんでした


一定時間経過(例えば1分)

Ajax新しい情報を

もらえるパターン

新しい情報をもらえないパターン

Client Server


はい

・・・・・


ちょっと待ってください

あのぉ・・・


Comet新しい情報を


もうちょっとまだですか?

・・・・・・・・・・


新しい情報が来ました!!!

はい

Client Server


はい

・・・・・



あのぉ・・・


Comet新しい情報をもらえないパターン


・・・・・・・・・・

・・・・・あのぉ・・・

☎ツーッツーッツーッ

あっ!あっ!

Client Server


電話は切らずにお待ちください


ありがとうございます!!!

WebSocket電話は

繋げたまま

・・・・・・・・・・

・・・・・・・・・・

・・・・・・・・・・



こちらも情報を提供します!!!

おおっ!

Client Server

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では一回のみ

Client Server

接続処理のコスト

※1 通信したい情報に対してHTTP Headerが大きい

Serverにとっても負荷が高い

電話だ!☎リリリ～ン

Ajax•Client側からのみリアルタイムに送信が可能•Server側の情報は、Clientが取得しにいく必要がある•Server側に届いた情報をClientに即時反映できない•Client側からの送信は、別処理として書くことが多い

Comet•Server側からリアルタイムに送信が可能•Client側からの送信はAjaxで別に行う※1

WebSocket•Server/Clientの双方からリアルタイムに送信が可能•接続の確立はClientから行う必要がある

双方向性とリアルタイム性

※1 Cometのみで双方向通信する方法もありますが、話を単純化するために省略します

それぞれの接続方法の特徴

•接続の継続性•接続処理のコスト•双方向性•リアルタイム性

これらを考慮しもう一度電話の例を見てみます


はい


はい


新しい情報が2件ありました



新しい情報はありませんでした


一定時間経過(例えば1分)

Ajax新しい情報を


新しい情報をもらえないパターン

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•負荷が小さい•サーバ側の情報取得はリアルタイム•クライアント側の情報送信も同じ接続内(双方向通信)



本日の内容

その前に仕様の説明

API•ブラウザからWebSocketを使うための仕様•AjaxでいうXMLHttpRequestに相当•W3Cが策定に関与•仕様はまだドラフトだが更新が比較的少ない

Protocol•WebSocketの通信プロトコル•ライブラリやブラウザを作るために必要•AjaxでいうHTTPプロトコルに相当•IETFが策定に関与•仕様はドラフトで更新が頻繁に行われている

2つの仕様

※ ドラフト(draft)とは草案のことで、最終決定していない仕様です

WebSocketProtocolの

歴史

ドラフトのバージョンが違うと互換性がない•調べる時はドラフトのバージョンに注意

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

プロトコルのドラフトの変移

※ 主要なドラフトの抜粋です

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

ドラフトの名前の変更

どのような脆弱性だった?•そもそもは透過型プロキシの問題

何が起きる?•Firewall Circumvention•特定の条件を満たすLANに不正アクセス•ブラウザ経由でFirewallより内側のサーバにアクセス•Cache Poisoning•キャッシュの汚染•XSSの危険

セキュリティホールの内容

http://blog.livedoor.jp/kotesaki/archives/1600864.html 参照

WebSocketは危険?•最新のドラフトでは解決済み•プロトコルレベルで対応したWebSocket•ドラフトだからできた大きな修正

FlashやJavaでも同様の脆弱性がある•広く普及しているため未対応

WebSocketの普及への影響•若干水を差す結果に•最近は普及が再び加速している印象

WebSocketは危険?

hybi 00が普及の兆し•Chromeに実装•Safariに実装•iOSに実装•Firefox 4のベータ版にも実装

hybi 03とそれ以前にセキュリティホールが発覚•Firefoxで無効化•Operaも同様に無効化•Chromeは状況次第で無効化すると発表

hybi 04でセキュリティホール解消

脆弱性がブラウザに与えた影響

WebSocketの2つの仕様•API•Protocol

プロトコルのドラフトのバージョン•調査時はバージョンに注意

名称変更•調査時は名称にも注意

WebSocketとセキュリティ•プロトコルレベルで解決済み•少なからず普及への影響はあった



本日の内容

サーバ側から情報を送るにはrequest/responseでないと届きにくい

Client Server

よくあるネットワーク構成

request

response

FireWallNATProxy

send

send×

HTTPが一番届きやすい

Client Server

通過しやすいProtocolは?FireWallNATProxy

HTTP

Telnet ×FTP ×etc. ×

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とブラウザの関係

Safari

ブラウザの対応状況

FirefoxOperaIE Chrome

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

Android標準ブラウザ

スマートフォンの対応状況ブラウザの場合

iOS 4.2.1以降mobile Safari

×hixie 76hybi 00

Android

スマートフォンの対応状況ネイティブアプリの場合

iOS

JettyというJava実装のサーバライブラリならサーバ実装の報告あり多分クライアントも...

iOSアプリからは使えない?Obj-Cに詳しくないので詳細はわかりません

すいません

WebSocketとHTTPの関係•ネットワーク機器からはHTTPに見える•ネットワークの設定変更の必要がほとんどない

WebSocketとブラウザの関係•各ブラウザが対応を進めている•JavaScriptからも使える•ウェブアプリケーションの通信の基礎

つまり、既存の環境との互換性が考慮されている



本日の内容

WebSocketは今すぐ使える技術?

ブラウザの対応がまだ出揃っていない•特に、IEがネック

プロトコルの仕様がまだ不安定•ドラフトのバージョン間に互換性がない

APIが突然無効になる可能性も•脆弱性が発見された時のFirefoxとOperaの対応

ノウハウがまだ不十分

今すぐ使える技術?

商用で本格的に使うにはまだリスクが高い

実験的なサービスであれば...エラーのハンドリングをしっかり!Comet等にFallbackする仕組み•Cometでも耐えられる負荷に抑える工夫•キーワード → socket.io

個人で遊ぶなら十分使える•遊んでノウハウを得るのは有用

どうしても使いたい場合


本日の内容

デモ時間があれば、

なぜデバイス間連携なのかのスライドも...

デバイス間連携

WebSocketをデバイス連携に使うのは現時点ではマイナーな利用形態です。

デバイス連携は私の得意分野のため、デモもそれに沿っています。

デモお断りその1

現在、WebSocketの主流は、もちろんインターネット上です。

デモではJettyというJavaのライブラリを使用していますが、

現在の主流は、node.jsというJavaScriptのサーバです。

デモお断りその2

•HTML5とJavaScriptとWebSocket•HTML5関連技術とJavaScriptは関連が深い•WebSocketはHTML5の一部だったが別仕様に•Client・Server間の通信の歴史•新技術の誕生と新手法の発明の繰り返し•Ajax・Comet・WebSocketを比較•WebSocketは低負荷でリアルタイムな双方向通信

まとめその1

•WebSocketの歴史•名称とバージョン間の互換性に注意•問題となったセキュリティホールは解決済み•なぜWebSocketなのか•既存のネットワーク環境が使える•JavaScriptから扱える•今すぐ使える技術なのか•商用利用にはまだ早い•デバイス間連携•デモ

まとめその２

ご清聴ありがとうございました

もう一度聞きたいところはありますか?

もっと詳しく聞きたいところはありますか?

質疑応答

javascript最新動向 〜websocket編〜

Technology

javascript最新動向〜websocket編〜