Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

これから利用拡大?WebSocket

9,318 views

Published on

AdvancedTechNight No.6 Session #1

Published in: Technology
  • Be the first to comment

これから利用拡大?WebSocket

  1. 1. Advanced Tech Night No.06 これから利用拡大?WebSocket 2013/03/15 Acroquest Technology 阪本 雄一郎
  2. 2. 自己紹介 阪本 雄一郎(さかもと ゆういちろう) Acroquest Technology株式会社 OSSの評価や、 それを利用した標準プラットフォームの開発を やってます。 ① Hadoop ② Mahout ③ Zabbix ④ Nginx etc… 1 Advanced Tech Night
  3. 3. 目次1. 次世代標準 HTML52. ブラウザで双方向通信 WebSocket3. 今までの通信方式との違い4. サポート状況5. デモ6. クライアントサイド実装7. サーバサイド実装8. 使用上の注意点9. まとめ 2 Advanced Tech Night
  4. 4. 1. 次世代標準 HTML5HTML5とは・・・プロプライエタリなプラグインとして提供されているリッチインターネットアプリケーションのプラットフォームを置き換えることを標榜しており、ウェブアプリケーションのプラットフォームとしての機能やマルチメディア要素が実装されている。 (Wikipedia) 3 Advanced Tech Night
  5. 5. 1. 次世代標準 HTML5HTML5とは・・・ブラウザの標準機能でリッチな画面・機能を実現できるようにするための規格。 4 Advanced Tech Night
  6. 6. 1. 次世代標準 HTML5 HTML4では ① 基本、「動かない」ページの構築。 →アニメーションはFlashで。 ② ちょっとだけ賢い入力フォームを作るにも、jQuery などのライブラリが必要。 HTML5だと ① Canvasが使える。 →アニメーションはJavaScriptで。 ② 日付入力など、よく使う入力 フォームはデフォルトで搭載。 5 Advanced Tech Night
  7. 7. 2. ブラウザで双方向通信 WebSocketWebSocketとは・・・コンピュータ・ネットワーク用の通信規格の1つである。インターネットの標準化団体であるW3CとIETFがウェブサーバーとウェブブラウザとの間の通信のために規定を予定している双方向通信用の技術規格であり、APIはW3Cが、WebSocket プロトコルはIETFが策定に関与している。プロトコルの仕様は RFC 6455。TCP上で動く。 (Wikipedia) 6 Advanced Tech Night
  8. 8. 2. ブラウザで双方向通信 WebSocketWebSocketとは・・・Webブラウザ上で双方向リアルタイム通信を行うための規格。 HTML5の仕様から分離 !? ・・・ ○×△ 7 Advanced Tech Night
  9. 9. 2. ブラウザで双方向通信 WebSocket1. 真のリアルタイム通信をサポート。2. セキュア通信をサポート。 →HTTPSに相当するプロトコルが存在するため、業務利用もし やすい。 クライアント Web/APサーバ DBサーバ WebSocketServer 8 Advanced Tech Night
  10. 10. 3. 今までの通信方式との違いブラウザとWebサーバ間の通信方式には、登場順に以下の方式があります。 ① Ajax ② Comet ③ WebSocketそれぞれについて、簡単に説明します。 9 Advanced Tech Night
  11. 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. 12. 3-1. Ajax概要② • ほぼすべてのブラウザで使用可能。 (IE6でも使用できる。) • クライアントからのポーリング方式のため、 サーバからのリアルタイム通知には 向かない。 11 Advanced Tech Night
  13. 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. 14. 3-2. Comet概要② • 擬似リアルタイム通信が可能。 • タイムアウトぎりぎりまで接続を保持するた め、リソース消費が大きい。 →接続中はずっとスレッドを占有するため、 C10K問題が発生する。 13 Advanced Tech Night
  15. 15. 3-3. WebSocket概要①専用プロトコルでリアルタイム双方向通信を実現。 画面遷移開始 GET /index.html HTTP 200 OK HTMLページ 特殊ヘッダ付与 GET /start プロトコル 以降、WebSocket HTTP 101 Switching Protocols 切り替え プロトコルで 送受信 メッセージ サーバ/クライ メッセージ アントどちらから でも送信可能 メッセージ 14 Advanced Tech Night
  16. 16. 3-3. WebSocket概要② • ソケット通信と同様、リアルタイムな 双方向通信が可能。 • 専用プロトコルを使用するため、通信の オーバーヘッドが少ない。 • IE9までは対応していない。 15 Advanced Tech Night
  17. 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. 18. 5. デモ複数端末のブラウザ間で、画面遷移が連動するデモを作ってみた。 左! 左 左 左! 左 Java7 左! Tomcat7 WebSocket 17 Advanced Tech Night
  19. 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. 20. 6. クライアントサイド実装1. メッセージ送信はsendメソッドを呼ぶのみ。ws.send($(this).attr("data-slide")); ※sendは非同期で実行されます。 19 Advanced Tech Night
  21. 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. 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. 23. 8. 使用上の注意点WebSocketには、複数のプロトコルが存在する。各環境でサポートするプロトコルを確認すること。 プロトコル IE Firefox Chrome Safaridraft-hixie-thewebsocketprotocol-75 4 5.0.0draft-hixie-thewebsocketprotocol-76 4 6 5.0.1draft-ietf-hybi-thewebsocketprotocol-00※同一のプロトコル内容draft-ietf-hybi-thewebsocketprotocol-07 6draft-ietf-hybi-thewebsocketprotocol-10 7 14RFC 6455 10 11 16 6 22 Advanced Tech Night
  24. 24. 9. まとめ1. WebSocketはHTML5から分離した仕様。 「ブラウザをリッチに」する中での、サーバ通信部分を 担う。2. WebSocketを用いることで、ブラウザ上で双方向のリ アルタイム通信が可能。3. 対応ブラウザも増えてきたため、今後WebSocketを利 用したシステムがもっと増えてくる(はず!) 23 Advanced Tech Night
  25. 25. Let’s enjoy WebSocket ! Infrastructures Evolution 24 Copyright © Acroquest Technology Co., Ltd. All rights reserved.

×