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 shanon

6,000 views

Published on

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

Published in: Technology
  • Dating for everyone is here: ❤❤❤ http://bit.ly/39sFWPG ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ❤❤❤ http://bit.ly/39sFWPG ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×