AdvancedTechNight No.6 Session #1

1. Advanced Tech Night No.06
これから利用拡大？WebSocket
2013/03/15
Acroquest Technology
阪本 雄一郎

2. 自己紹介
 阪本 雄一郎（さかもと ゆういちろう）
 Acroquest Technology株式会社
 OSSの評価や、
それを利用した標準プラットフォームの開発を
やってます。
① Hadoop
② Mahout
③ Zabbix
④ Nginx
etc…
1
Advanced Tech Night

3. 目次
1. 次世代標準 HTML5
2. ブラウザで双方向通信 WebSocket
3. 今までの通信方式との違い
4. サポート状況
5. デモ
6. クライアントサイド実装
7. サーバサイド実装
8. 使用上の注意点
9. まとめ
2
Advanced Tech Night

4. 1. 次世代標準 HTML5
HTML5とは・・・
プロプライエタリなプラグインとして提供されている
リッチインターネットアプリケーションのプラット
フォームを置き換えることを標榜しており、ウェブ
アプリケーションのプラットフォームとしての機能
やマルチメディア要素が実装されている。
（Wikipedia）
3
Advanced Tech Night

5. 1. 次世代標準 HTML5
HTML5とは・・・
ブラウザの標準機能でリッチな画面・機能を実現
できるようにするための規格。
4
Advanced Tech Night

6. 1. 次世代標準 HTML5
 HTML4では
① 基本、「動かない」ページの構築。
→アニメーションはFlashで。
② ちょっとだけ賢い入力フォームを作るにも、jQuery
などのライブラリが必要。
 HTML5だと
① Canvasが使える。
→アニメーションはJavaScriptで。
② 日付入力など、よく使う入力
フォームはデフォルトで搭載。
5
Advanced Tech Night

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

8. 2. ブラウザで双方向通信 WebSocket
WebSocketとは・・・
Webブラウザ上で双方向リアルタイム通信を行う
ための規格。
HTML5の仕様から分離 ！？
・・・
○×△
7
Advanced Tech Night

9. 2. ブラウザで双方向通信 WebSocket
1. 真のリアルタイム通信をサポート。
2. セキュア通信をサポート。
→HTTPSに相当するプロトコルが存在するため、業務利用もし
やすい。
クライアント Web/APサーバ DBサーバ
WebSocketServer
8
Advanced Tech Night

10. 3. 今までの通信方式との違い
ブラウザとWebサーバ間の通信方式には、
登場順に以下の方式があります。
① Ajax
② Comet
③ WebSocket
それぞれについて、簡単に説明します。
9
Advanced Tech Night

11. 3-1. Ajax概要①
1. Asynchronous JavaScript + XMLの略。
2. 文字通り、「非同期通信」を行う手法。
→ページ遷移をしないでデータの送受信を行う。
ページ表示 GET /index.html
要求
HTMLページを
HTTP 200 OK
返却
JavaScriptから
リクエスト送信
GET /getInfo.htm
（Ajax）
クライアントからの
HTTP 200 OK リクエストを受けて、
XMLやJSON
データを返却
10
Advanced Tech Night

12. 3-1. Ajax概要②
• ほぼすべてのブラウザで使用可能。
（IE6でも使用できる。）
• クライアントからのポーリング方式のため、
サーバからのリアルタイム通知には
向かない。
11
Advanced Tech Night

13. 3-2. Comet概要①
1. Ajaxでできなかったリアルタイム通知を擬似的に実現。
2. サーバサイドでリクエストを受け取った後、タイムアウトぎりぎり
までレスポンスを返さない。
ページ表示要求 GET /index.html
HTTP 200 OK HTMLページ
JavaScriptから
リクエスト送信 GET /getInfo.htm
（Comet）
イベントが発生
するまで待機
HTTP 200 OK イベント発生
12
Advanced Tech Night

14. 3-2. Comet概要②
• 擬似リアルタイム通信が可能。
• タイムアウトぎりぎりまで接続を保持するた
め、リソース消費が大きい。
→接続中はずっとスレッドを占有するため、
C10K問題が発生する。
13
Advanced Tech Night

15. 3-3. WebSocket概要①
専用プロトコルでリアルタイム双方向通信を実現。
画面遷移開始 GET /index.html
HTTP 200 OK HTMLページ
特殊ヘッダ付与 GET /start
プロトコル
以降、WebSocket HTTP 101 Switching Protocols 切り替え
プロトコルで
送受信 メッセージ
サーバ／クライ
メッセージ アントどちらから
でも送信可能
メッセージ
14
Advanced Tech Night

16. 3-3. WebSocket概要②
• ソケット通信と同様、リアルタイムな
双方向通信が可能。
• 専用プロトコルを使用するため、通信の
オーバーヘッドが少ない。
• IE9までは対応していない。
15
Advanced Tech Night

17. 4. サポート状況
・・・といっても、
最新のIE10ではWebSocketをサポート。
ブラウザ IE Chrome FireFox Safari
サポート開始バージョン(※1) 10 16 11 6
最新バージョン(※2) 10 25 19 6
今後はWebSocketを使用したシステムが
増えてくる可能性大！
(※1) Wikipedia調べ
(※2) 2013/03/15現在
16
Advanced Tech Night

18. 5. デモ
複数端末のブラウザ間で、画面遷移が連動するデモを
作ってみた。
左！ 左
左
左！
左
Java7
左！ Tomcat7
WebSocket
17
Advanced Tech Night

19. 6. クライアントサイド実装
1. JavaScriptでWebSocketオブジェクトを生成。
2. 接続時やメッセージ受信時のイベントフック関
数を登録。
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.");
};
18
Advanced Tech Night

20. 6. クライアントサイド実装
1. メッセージ送信はsendメソッドを呼ぶのみ。
ws.send($(this).attr("data-slide"));
※sendは非同期で実行されます。
19
Advanced Tech Night

21. 7. サーバサイド実装
1. TomcatにWebSocketServletクラスが用意され
ているため、それを継承。
2. createWebSocketInboundメソッドで、送受信を
行うオブジェクト（MessageInboundクラスのサブ
クラス）を返却。
public class CarouselServlet extends WebSocketServlet {
private InboundContext inboundContext_ = new InboundContext();
@Override
protected StreamInbound createWebSocketInbound(String protocol,
HttpServletRequest request) {
return new CarouselMessageInbound(this.inboundContext_);
}
}
20
Advanced Tech Night

22. 7. サーバサイド実装
1. MessageInboundでは、接続時、切断時、メッセージ受
信時（テキスト／バイナリ）の処理を記述できる。
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 {
}
}
2. メッセージ送信は、WsOutboundに書き込む。
wsOutbound.writeTextMessage(buffer);
wsOutbound.flush();
21
Advanced Tech Night

23. 8. 使用上の注意点
WebSocketには、複数のプロトコルが存在する。
各環境でサポートするプロトコルを確認すること。
プロトコル IE Firefox Chrome Safari
draft-hixie-thewebsocketprotocol-75 4 5.0.0
draft-hixie-thewebsocketprotocol-76 4 6 5.0.1
draft-ietf-hybi-thewebsocketprotocol-00
※同一のプロトコル内容
draft-ietf-hybi-thewebsocketprotocol-07 6
draft-ietf-hybi-thewebsocketprotocol-10 7 14
RFC 6455 10 11 16 6
22
Advanced Tech Night

24. 9. まとめ
1. WebSocketはHTML5から分離した仕様。
「ブラウザをリッチに」する中での、サーバ通信部分を
担う。
2. WebSocketを用いることで、ブラウザ上で双方向のリ
アルタイム通信が可能。
3. 対応ブラウザも増えてきたため、今後WebSocketを利
用したシステムがもっと増えてくる（はず！）
23
Advanced Tech Night

25. Let’s enjoy WebSocket !
Infrastructures Evolution
24
Copyright © Acroquest Technology Co., Ltd. All rights reserved.