これから利用拡大？WebSocket
- 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.