Upload
advancedtechnight
View
7.283
Download
0
Embed Size (px)
DESCRIPTION
AdvancedTechNight No.6 Session #1
Citation preview
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
1. 次世代標準 HTML5
Advanced Tech Night
3
HTML5とは・・・
プロプライエタリなプラグインとして提供されているリッチインターネットアプリケーションのプラットフォームを置き換えることを標榜しており、ウェブアプリケーションのプラットフォームとしての機能やマルチメディア要素が実装されている。
(Wikipedia)
1. 次世代標準 HTML5
Advanced Tech Night
4
HTML5とは・・・
ブラウザの標準機能でリッチな画面・機能を実現できるようにするための規格。
1. 次世代標準 HTML5
Advanced Tech Night
5
HTML4では
① 基本、「動かない」ページの構築。
→アニメーションはFlashで。
② ちょっとだけ賢い入力フォームを作るにも、jQuery
などのライブラリが必要。
HTML5だと
① Canvasが使える。
→アニメーションはJavaScriptで。
② 日付入力など、よく使う入力
フォームはデフォルトで搭載。
2. ブラウザで双方向通信 WebSocket
Advanced Tech Night
6
WebSocketとは・・・
コンピュータ・ネットワーク用の通信規格の1つである。インターネットの標準化団体であるW3CとIETFがウェブサーバーとウェブブラウザとの間の通信のために規定を予定している双方向通信用の技術規格であり、APIはW3Cが、WebSocket プロトコルはIETFが策定に関与している。プロトコルの仕様は RFC 6455。TCP上で動く。
(Wikipedia)
2. ブラウザで双方向通信 WebSocket
Advanced Tech Night
7
WebSocketとは・・・
Webブラウザ上で双方向リアルタイム通信を行うための規格。
○×△ !? ・・・ HTML5の仕様から分離
2. ブラウザで双方向通信 WebSocket
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
左!
左!
左!
左
左
左
6. クライアントサイド実装
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.");
};
6. クライアントサイド実装
1. メッセージ送信はsendメソッドを呼ぶのみ。 ※sendは非同期で実行されます。
Advanced Tech Night
19
ws.send($(this).attr("data-slide"));
7. サーバサイド実装
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_);
}
}
7. サーバサイド実装
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
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
24
Let’s enjoy WebSocket !
Infrastructures Evolution