0
WebSocket              2011/08/15   @11   8   15
Push/Push Like11   8   15
Push/Push Like              XMLHttpRequest (Ajax:           )              Comet (Long Polling     Push)              Flas...
WebSocket11   8   15
WebSocket              W3C IETF              XMLHttpRequest                Comet              TCP                    HTML5...
WebSocket               Web         TCP                             HTTP                                   TCP            ...
Ajax, Comet                          Polling              http://prog.re-d.net/demo/slide/20110528/11   8   15
WebSocket              http://prog.re-d.net/demo/slide/20110528/11   8   15
HTTP11   8   15
Ajax, Comet              ->              ->11   8   15
Client API11   8   15
API              var ws = new WebSocket("ws://example.com/service");              ws.onopen = function() {                ...
Server   Handshake11   8   15
->                                                ※                           HTTP              GET /demo HTTP/1.1        ...
&              Challenge & Response                    &                    &                                             ...
1                  0x00[Data]0xFF              ※11   8   15
Google              Ian Hickson editor of HTML5 specification              Reducing kilobytes of data to 2 bytes…and reduci...
WebSocket11   8   15
PC                   Chrome4     /Safari5        OK                   Opera,Firefox                Off                   I...
node.js                 socket.io                        WebSocket   Flash Jsonp   XHR              Java                 P...
Perl                  Mojolicious                       Catalyst   FW              Ruby                  em-websocket     ...
Kaazing                             Java   .NET              Pusher                REST API                WebSocket   pus...
11   8   15
11   8   15
http://dev.w3.org/html5/websockets/                                             7                W3C                      ...
http://dev.w3.org/html5/websockets/                                             7                W3C                      ...
WebSocket11   8   15
11   8   15
11   8   15
11   8   15
Socket.io11   8   15
Socket.io11   8   15
Socket.io              WebSocket+α                     node.js              Push                       http://socket.io/  ...
WebSocket              Flash              Ajax long polling              Ajax multipart polling              Forever ifram...
IE5.5        iPhone Safari                           iPad Safari              Safari3                           Android We...
IE5.5        iPhone Safari                           iPad Safari              Safari3                           Android We...
WebSocket11   8   15
node.js                          Javascript              Google V8                              I/O11   8   15
11   8   15
http://d.hatena.ne.jp/ikeike443/2011080811   8   15
11   8   15
Push11   8   15
11   8   15
Upcoming SlideShare
Loading in...5
×

Websocket shanon

5,303

Published on

株式会社シャノン社内勉強会の資料
Websocket, node.js, socket.ioについて知らない人に向けてのざっくり資料

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

No Downloads
Views
Total Views
5,303
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
54
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Websocket shanon"

  1. 1. WebSocket 2011/08/15 @11 8 15
  2. 2. Push/Push Like11 8 15
  3. 3. Push/Push Like XMLHttpRequest (Ajax: ) Comet (Long Polling Push) Flash (Action Script ) iframe (11 8 15
  4. 4. WebSocket11 8 15
  5. 5. WebSocket W3C IETF XMLHttpRequest Comet TCP HTML5 API http://dev.w3.org/html5/websockets/11 8 15
  6. 6. WebSocket Web TCP HTTP TCP URI HTTP “ws://” ”wss://”11 8 15
  7. 7. Ajax, Comet Polling http://prog.re-d.net/demo/slide/20110528/11 8 15
  8. 8. WebSocket http://prog.re-d.net/demo/slide/20110528/11 8 15
  9. 9. HTTP11 8 15
  10. 10. Ajax, Comet -> ->11 8 15
  11. 11. Client API11 8 15
  12. 12. API var ws = new WebSocket("ws://example.com/service"); ws.onopen = function() { // Web Socket is connected. You can send data by send() method. ws.send("message to send"); .... }; ws.onmessage = function (evt) { var received_msg = evt.data; ... }; ws.onclose = function() { // websocket is closed. }; http://dev.w3.org/html5/websockets/11 8 15
  13. 13. Server Handshake11 8 15
  14. 14. -> ※ HTTP GET /demo HTTP/1.1 Host: example.com Connection: Upgrade Sec-WebSocket-Key2: 12998 5 Y3 1 .P00 Sec-WebSocket-Protocol: sample Upgrade: WebSocket Sec-WebSocket-Key1: 4 @1 46546xW%0l 1 5 Origin: http://example.com ^n:ds[4U -> HTTP/1.1 101 WebSocket Protocol Handshake Upgrade: WebSocket Connection: Upgrade Sec-WebSocket-Origin: http://example.com Sec-WebSocket-Location: ws://example.com/demo Key1, Key2, MD5 Sec-WebSocket-Protocol: sample 8jKSy:G*Co,Wxa-11 8 15
  15. 15. & Challenge & Response & & & http://www.sophia-it.com/content/%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8%26%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B9%E6%96%B9%E5%BC%8F11 8 15
  16. 16. 1 0x00[Data]0xFF ※11 8 15
  17. 17. Google Ian Hickson editor of HTML5 specification Reducing kilobytes of data to 2 bytes…and reducing latency from 150ms to 50ms is far more than marginal. In fact, these two factors alone are enough to make WebSocket seriously interesting to Google. 2 150ms 50ms 2 WebSocket Google11 8 15
  18. 18. WebSocket11 8 15
  19. 19. PC Chrome4 /Safari5 OK Opera,Firefox Off IE iOS 4.2.1 Safari OK android (webkit )11 8 15
  20. 20. node.js socket.io WebSocket Flash Jsonp XHR Java Play! Jetty Grizzly11 8 15
  21. 21. Perl Mojolicious Catalyst FW Ruby em-websocket Python pywebsocket C mod_websocket lighttpd11 8 15
  22. 22. Kaazing Java .NET Pusher REST API WebSocket push11 8 15
  23. 23. 11 8 15
  24. 24. 11 8 15
  25. 25. http://dev.w3.org/html5/websockets/ 7 W3C WebSocket11 8 15
  26. 26. http://dev.w3.org/html5/websockets/ 7 W3C WebSocket Σ( Д !11 8 15
  27. 27. WebSocket11 8 15
  28. 28. 11 8 15
  29. 29. 11 8 15
  30. 30. 11 8 15
  31. 31. Socket.io11 8 15
  32. 32. Socket.io11 8 15
  33. 33. Socket.io WebSocket+α node.js Push http://socket.io/ https://github.com/LearnBoost/socket.io https://github.com/LearnBoost/socket.io-spec11 8 15
  34. 34. WebSocket Flash Ajax long polling Ajax multipart polling Forever iframe JSONP polling11 8 15
  35. 35. IE5.5 iPhone Safari iPad Safari Safari3 Android Webkit Chrome3 WebOS Webkit Firefox3 Opera10.6111 8 15
  36. 36. IE5.5 iPhone Safari iPad Safari Safari3 Android Webkit Chrome3 WebOS Webkit Firefox3 Opera10.6111 8 15
  37. 37. WebSocket11 8 15
  38. 38. node.js Javascript Google V8 I/O11 8 15
  39. 39. 11 8 15
  40. 40. http://d.hatena.ne.jp/ikeike443/2011080811 8 15
  41. 41. 11 8 15
  42. 42. Push11 8 15
  43. 43. 11 8 15
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×