More Related Content
What's hot (20)
Similar to JavaプログラマのためのWebSocket概要 (20)
More from Shumpei Shiraishi (20)
JavaプログラマのためのWebSocket概要
- 1. Javaプログラマのための WebSocket概要 2013/1/31 Java ♡ HTML5 Night 株式会社オープンウェブ・テクノロジー 白石 俊平（@Shumpei）
- 2. 自己紹介 白石俊平と申します。 HTML5開発者コミュニティhtml5j.org管理人（会員 数5,000名超） HTML5とか勉強会主催（毎月一回、100名を動員） Google API Expert (HTML5) Microsoft Most Valuable Professional (IE9) Twitter: @Shumpei 著書：HTML5&API入門
- 4. WebSocketとは何か？ リアルタイム・ウェブをもたらす技術として 非常に期待されている 実態は、TCP上に構築された双方向のソケッ ト通信プロトコル HTTPをベースにしているため、Webとの親和 性が非常に高い Webブラウザからの利用を主眼としている ファイアウォールを超えられる
- 5. WebSocketの動作原理 1. 通常のHTTP GETリクエストを用いて、サーバ に接続 2. サーバがWebSocketに対応していれば、その接 続をそのままWebSocketの通信経路として「張 りっぱなし」にする。 Server Server TCP TCP HTTP 双方向 GET 接 通信 接 続 続
- 6. クライアントとサーバの対称性 一度接続が確立してしまえば、クライアントと サーバの間で役割やできることの違いはほとんど ない ・テキスト送受信 ・バイナリ送受信 ・通信の圧縮 ・ping ・... クライアント サーバ
- 7. WebSocketの利用例 オンライン黒板
- 8. WebSocketの利用例 BrowserQuest
- 9. WebSocketの利用例 Technitone
- 10. 技術面から見たWebSocket
- 11. 仕様 プロトコル IETFにより標準化（RFC6455） JavaScript API W3Cにより標準化（The WebSocket API） 勧告候補というステータス
- 12. WebSocketのエンドポイント URL・・・ws://もしくはwss://で始まる ポート・・・80番(ws)/443番(wss)
- 13. WebSocketハンドシェイク Upgradeヘッダ付きのGETリクエストに対し、 サーバが「101 Switching Protocols」で応答す れば、接続確立 GET /chat HTTP/1.1 HTTP/1.1 101 Switching Protocols Host: server.example.com Upgrade: websocket Upgrade: websocket Connection: Upgrade Connection: Upgrade Sec-WebSocket-Accept: YYY Sec-WebSocket-Key: XXX Sec-WebSocket-Protocol: chat Origin: http://example.com Sec-WebSocket-Protocol: chat Sec-WebSocket-Version: 13
- 14. フレームフォーマット 6-14バイトの小さなヘッダを付与 ペイロード長は最大2^64バイト バイト長 1 2 3 4 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 R R R M S S S A FI V V V S N 1 2 3 opcode K ペイロード長 拡張ペイロード長（ペイロード長が126の場合） 拡張ペイロード長（ペイロード長が127の場合） 拡張ペイロード長（ペイロード長が127の場合） マスクキー マスクキー データ本体 データ本体…
- 15. プロトコルの拡張が可能 圧縮やマルチプレクサなどの拡張が提案され ている GET /chat HTTP/1.1 HTTP/1.1 101 Switching Protocols Host: server.example.com Upgrade: websocket Upgrade: websocket Connection: Upgrade Connection: Upgrade Sec-WebSocket-Extensions: deflate- Sec-WebSocket-Key: XXX frame Origin: http://example.com Sec-WebSocket-Accept: YYY Sec-WebSocket-Extensions: deflate-frame Sec-WebSocket-Protocol: chat Sec-WebSocket-Protocol: chat Sec-WebSocket-Version: 13
- 16. サブプロトコル WebSocketは、接続確立後はシンプルなTCP ソケット通信とみなすことが可能。 →WebSocket上で新たなプロトコルが構築さ れることを当初から想定している GET /chat HTTP/1.1 HTTP/1.1 101 Switching Protocols Host: server.example.com Upgrade: websocket Upgrade: websocket Connection: Upgrade Connection: Upgrade Sec-WebSocket-Accept: YYY Sec-WebSocket-Key: XXX Sec-WebSocket-Protocol: chat Origin: http://example.com Sec-WebSocket-Protocol: chat Sec-WebSocket-Version: 13
- 18. WebSocketのJavaScript API WebSocket APIは比較的実装が進んでいる IE Firefox Chrome Safari Opera iOS Android Safari Browser 10.0 ○ ○ 6.0 12.1 6.0 ×
- 19. JavaScript APIの使用法 まず、WebSocket接続を確立する。 // WebSocket接続を開始 var ws = new WebSocket('ws://localhost:2000/chat'); // 接続が確立したら呼び出される ws.onopen = function() { // 初期化処理 };
- 20. JavaScript APIの使用法 データの送信 // sendメソッドにより、サーバにデータを送信できる // sendメソッドは文字列だけではなく、ArrayBufferや // Blobも送信可能 ws.send('Hello'); データの受信 // データが到着したら呼び出される ws.onmessage = function(e) { // dataプロパティに受信データが格納 var data = e.data; … };
- 21. JavaScript APIの使用法 接続のクローズ（クライアントから） // クライアントから接続を切断 ws.close(); 接続のクローズ（サーバから） // データが到着したら呼び出される ws.onclose = function(e) { var wasClean = e.wasClean; // 正常終了か var code = e.code; // ステータスコード var reason = e.reason; // 切断理由 };
- 22. ぼくはここまで！ ご清聴ありがとうございました！ @Shumpei