これから利用拡大？WebSocket

Advanced Tech Night No.06

これから利用拡大？WebSocket

2013/03/15

Acroquest Technology

阪本雄一郎

1

自己紹介

阪本雄一郎（さかもとゆういちろう）

Acroquest Technology株式会社

OSSの評価や、それを利用した標準プラットフォームの開発をやってます。

① Hadoop

② Mahout

③ Zabbix

④ Nginx

etc…

Advanced Tech Night

2

目次

1. 次世代標準 HTML5

2. ブラウザで双方向通信 WebSocket

3. 今までの通信方式との違い

4. サポート状況

5. デモ

6. クライアントサイド実装

7. サーバサイド実装

8. 使用上の注意点

9. まとめ

Advanced Tech Night


Advanced Tech Night

3

HTML5とは・・・

プロプライエタリなプラグインとして提供されているリッチインターネットアプリケーションのプラットフォームを置き換えることを標榜しており、ウェブアプリケーションのプラットフォームとしての機能やマルチメディア要素が実装されている。

（Wikipedia）


Advanced Tech Night

4

HTML5とは・・・

ブラウザの標準機能でリッチな画面・機能を実現できるようにするための規格。


Advanced Tech Night

5

HTML4では

① 基本、「動かない」ページの構築。

→アニメーションはFlashで。

② ちょっとだけ賢い入力フォームを作るにも、jQuery

などのライブラリが必要。

HTML5だと

① Canvasが使える。

→アニメーションはJavaScriptで。

② 日付入力など、よく使う入力

フォームはデフォルトで搭載。


Advanced Tech Night

6

WebSocketとは・・・

コンピュータ・ネットワーク用の通信規格の1つである。インターネットの標準化団体であるW3CとIETFがウェブサーバーとウェブブラウザとの間の通信のために規定を予定している双方向通信用の技術規格であり、APIはW3Cが、WebSocket プロトコルはIETFが策定に関与している。プロトコルの仕様は RFC 6455。TCP上で動く。

（Wikipedia）


Advanced Tech Night

7

WebSocketとは・・・

Webブラウザ上で双方向リアルタイム通信を行うための規格。

○×△ ！？・・・ HTML5の仕様から分離


1. 真のリアルタイム通信をサポート。

2. セキュア通信をサポート。 →HTTPSに相当するプロトコルが存在するため、業務利用もしやすい。

Advanced Tech Night

8

We

bS

ocketS

erv

er

クライアント Web/APサーバ DBサーバ

3. 今までの通信方式との違い

ブラウザとWebサーバ間の通信方式には、登場順に以下の方式があります。

①Ajax

②Comet

③WebSocket

それぞれについて、簡単に説明します。

Advanced Tech Night

9

3-1. Ajax概要①

1. Asynchronous JavaScript + XMLの略。

2. 文字通り、「非同期通信」を行う手法。 →ページ遷移をしないでデータの送受信を行う。

Advanced Tech Night

10

GET /index.html

HTTP 200 OK

GET /getInfo.htm

HTTP 200 OK

HTMLページを

返却

クライアントからのリクエストを受けて、

XMLやJSON

データを返却

ページ表示

要求

JavaScriptから

リクエスト送信

（Ajax）

3-1. Ajax概要②

Advanced Tech Night

11

• ほぼすべてのブラウザで使用可能。

（IE6でも使用できる。）

• クライアントからのポーリング方式のため、サーバからのリアルタイム通知には

向かない。

3-2. Comet概要①

1. Ajaxでできなかったリアルタイム通知を擬似的に実現。

2. サーバサイドでリクエストを受け取った後、タイムアウトぎりぎりまでレスポンスを返さない。

Advanced Tech Night

12

GET /index.html

HTTP 200 OK

GET /getInfo.htm

HTTP 200 OK

HTMLページ

ページ表示要求

イベントが発生するまで待機

JavaScriptから

リクエスト送信

（Comet）

イベント発生

3-2. Comet概要②

Advanced Tech Night

13

• 擬似リアルタイム通信が可能。

• タイムアウトぎりぎりまで接続を保持するため、リソース消費が大きい。

→接続中はずっとスレッドを占有するため、

C10K問題が発生する。

3-3. WebSocket概要①

専用プロトコルでリアルタイム双方向通信を実現。

Advanced Tech Night

14

GET /index.html

HTTP 101 Switching Protocols

メッセージ

メッセージ

プロトコル

切り替え

画面遷移開始

以降、WebSocket

プロトコルで

送受信

サーバ／クライアントどちらからでも送信可能

メッセージ

HTTP 200 OK HTMLページ

GET /start 特殊ヘッダ付与

3-3. WebSocket概要②

Advanced Tech Night

15

• ソケット通信と同様、リアルタイムな

双方向通信が可能。

• 専用プロトコルを使用するため、通信の

オーバーヘッドが少ない。

• IE9までは対応していない。

4. サポート状況

・・・といっても、

最新のIE10ではWebSocketをサポート。

Advanced Tech Night

16

ブラウザ IE Chrome FireFox Safari

サポート開始バージョン(※1) 10 16 11 6

最新バージョン(※2) 10 25 19 6

今後はWebSocketを使用したシステムが

増えてくる可能性大！

(※1) Wikipedia調べ

(※2) 2013/03/15現在

5. デモ

複数端末のブラウザ間で、画面遷移が連動するデモを

作ってみた。

Advanced Tech Night

17

Java7

Tomcat7 WebSocket

左！

左！

左！

左

左

左


1. JavaScriptでWebSocketオブジェクトを生成。

2. 接続時やメッセージ受信時のイベントフック関数を登録。

Advanced Tech Night

18

var ws = new WebSocket(

"ws://localhost:8080/WebSocketServer/websocket/CarouselServlet");

ws.onopen = function(){

};

ws.onmessage = function(message){

$carousel.carousel(message.data);

};

ws.onerror = function(event){

$("#message").html("Error occurred.");

};


1. メッセージ送信はsendメソッドを呼ぶのみ。 ※sendは非同期で実行されます。

Advanced Tech Night

19

ws.send($(this).attr("data-slide"));


1. TomcatにWebSocketServletクラスが用意されているため、それを継承。

2. createWebSocketInboundメソッドで、送受信を行うオブジェクト（MessageInboundクラスのサブクラス）を返却。

Advanced Tech Night

20

public class CarouselServlet extends WebSocketServlet {

private InboundContext inboundContext_ = new InboundContext();

@Override

protected StreamInbound createWebSocketInbound(String protocol,

HttpServletRequest request) {

return new CarouselMessageInbound(this.inboundContext_);

}

}


1. MessageInboundでは、接続時、切断時、メッセージ受信時（テキスト／バイナリ）の処理を記述できる。

2. メッセージ送信は、WsOutboundに書き込む。

Advanced Tech Night

21

public class CarouselMessageInbound extends MessageInbound {

protected void onOpen(WsOutbound wsOutbound) {

}

protected void onClose(int status) {

}

protected void onBinaryMessage(ByteBuffer buffer) throws IOException {

}

protected void onTextMessage(CharBuffer buffer) throws IOException {

}

}

wsOutbound.writeTextMessage(buffer);

wsOutbound.flush();

8. 使用上の注意点

WebSocketには、複数のプロトコルが存在する。各環境でサポートするプロトコルを確認すること。

Advanced Tech Night

22

プロトコル IE Firefox Chrome Safari

draft-hixie-thewebsocketprotocol-75 4 5.0.0

draft-hixie-thewebsocketprotocol-76

draft-ietf-hybi-thewebsocketprotocol-00

※同一のプロトコル内容

4 6 5.0.1

draft-ietf-hybi-thewebsocketprotocol-07 6

draft-ietf-hybi-thewebsocketprotocol-10 7 14

RFC 6455 10 11 16 6

9. まとめ

1. WebSocketはHTML5から分離した仕様。「ブラウザをリッチに」する中での、サーバ通信部分を担う。

2. WebSocketを用いることで、ブラウザ上で双方向のリアルタイム通信が可能。

3. 対応ブラウザも増えてきたため、今後WebSocketを利用したシステムがもっと増えてくる（はず！）

Advanced Tech Night

23

これから利用拡大？WebSocket

Technology

Transcript of これから利用拡大？WebSocket