JavaプログラマのためのWebSocket概要           2013/1/31 Java ♡ HTML5 Night   株式会社オープンウェブ・テクノロジー          白石 俊平(@Shumpei)
自己紹介   白石俊平と申します。   HTML5開発者コミュニティhtml5j.org管理人(会員    数5,000名超)   HTML5とか勉強会主催(毎月一回、100名を動員)   Google API Expert (HTML...
WebSocketとは何か?
WebSocketとは何か?   リアルタイム・ウェブをもたらす技術として    非常に期待されている   実態は、TCP上に構築された双方向のソケッ    ト通信プロトコル   HTTPをベースにしているため、Webとの親和    性が...
WebSocketの動作原理1.   通常のHTTP GETリクエストを用いて、サーバ     に接続2.   サーバがWebSocketに対応していれば、その接     続をそのままWebSocketの通信経路として「張     りっぱなし」...
クライアントとサーバの対称性   一度接続が確立してしまえば、クライアントと    サーバの間で役割やできることの違いはほとんど    ない              ・テキスト送受信              ・バイナリ送受信       ...
WebSocketの利用例   オンライン黒板
WebSocketの利用例   BrowserQuest
WebSocketの利用例   Technitone
技術面から見たWebSocket
仕様   プロトコル     IETFにより標準化(RFC6455)   JavaScript API     W3Cにより標準化(The                 WebSocket API)     勧告候補というステータス
WebSocketのエンドポイント   URL・・・ws://もしくはwss://で始まる   ポート・・・80番(ws)/443番(wss)
WebSocketハンドシェイク   Upgradeヘッダ付きのGETリクエストに対し、    サーバが「101 Switching Protocols」で応答す    れば、接続確立GET /chat HTTP/1.1           ...
フレームフォーマット   6-14バイトの小さなヘッダを付与   ペイロード長は最大2^64バイト                                            バイト長               1       ...
プロトコルの拡張が可能     圧縮やマルチプレクサなどの拡張が提案され      ているGET /chat HTTP/1.1                        HTTP/1.1 101 Switching ProtocolsHo...
サブプロトコル   WebSocketは、接続確立後はシンプルなTCP    ソケット通信とみなすことが可能。   →WebSocket上で新たなプロトコルが構築さ    れることを当初から想定しているGET /chat HTTP/1.1 ...
WebSocketのJavaScript API
WebSocketのJavaScript API   WebSocket APIは比較的実装が進んでいる     IE    Firefox   Chrome   Safari   Opera    iOS     Android      ...
JavaScript APIの使用法まず、WebSocket接続を確立する。// WebSocket接続を開始var ws = new WebSocket(ws://localhost:2000/chat);// 接続が確立したら呼び出されるw...
JavaScript APIの使用法データの送信// sendメソッドにより、サーバにデータを送信できる// sendメソッドは文字列だけではなく、ArrayBufferや// Blobも送信可能ws.send(Hello);データの受信// ...
JavaScript APIの使用法接続のクローズ(クライアントから)// クライアントから接続を切断ws.close();接続のクローズ(サーバから)// データが到着したら呼び出されるws.onclose = function(e) {  ...
ぼくはここまで!  ご清聴ありがとうございました!       @Shumpei
Upcoming SlideShare
Loading in …5
×

JavaプログラマのためのWebSocket概要

7,244 views

Published on

Published in: Technology
0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,244
On SlideShare
0
From Embeds
0
Number of Embeds
702
Actions
Shares
0
Downloads
0
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide

JavaプログラマのためのWebSocket概要

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

×