SlideShare a Scribd company logo

Websocket shanon

•
•
Takafumi Ikeda
Takafumi Ikeda

WebSocket is a new web technology that provides bidirectional communication between a client and server over a TCP connection. It aims to overcome limitations of Ajax techniques like long polling and streaming that used HTTP. The WebSocket API was standardized by the W3C and IETF and is supported in HTML5 browsers through native JavaScript. It enables new types of web applications by facilitating real-time data transfer and interactive experiences.

1 of 43
Download to read offline
WebSocket 2011/08/15 @ 11 8 15
Push/Push Like 11 8 15
Push/Push Like XMLHttpRequest (Ajax: ) Comet (Long Polling Push) Flash (Action Script ) iframe ( 11 8 15
WebSocket 11 8 15
WebSocket W3C IETF XMLHttpRequest Comet TCP HTML5 API http://dev.w3.org/html5/websockets/ 11 8 15
WebSocket Web TCP HTTP TCP URI HTTP “ws://” ”wss://” 11 8 15
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
HTTP 11 8 15
Ajax, Comet -> -> 11 8 15
Client API 11 8 15
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
Server Handshake 11 8 15
-> ※ 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 8jKS'y:G*Co,Wxa- 11 8 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%8F 11 8 15
1 0x00[Data]0xFF ※ 11 8 15
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 Google 11 8 15
WebSocket 11 8 15
PC Chrome4 /Safari5 OK Opera,Firefox Off IE iOS 4.2.1 Safari OK android (webkit ) 11 8 15
node.js socket.io WebSocket Flash Jsonp XHR Java Play! Jetty Grizzly 11 8 15
Perl Mojolicious Catalyst FW Ruby em-websocket Python pywebsocket C mod_websocket lighttpd 11 8 15
Kaazing Java .NET Pusher REST API WebSocket push 11 8 15
11 8 15
11 8 15
http://dev.w3.org/html5/websockets/ 7 W3C WebSocket 11 8 15
http://dev.w3.org/html5/websockets/ 7 W3C WebSocket Σ( Д ! 11 8 15
WebSocket 11 8 15
11 8 15
11 8 15
11 8 15
Socket.io 11 8 15
Socket.io 11 8 15
Socket.io WebSocket+α node.js Push http://socket.io/ https://github.com/LearnBoost/socket.io https://github.com/LearnBoost/socket.io-spec 11 8 15
WebSocket Flash Ajax long polling Ajax multipart polling Forever iframe JSONP polling 11 8 15
IE5.5 iPhone Safari iPad Safari Safari3 Android Webkit Chrome3 WebOS Webkit Firefox3 Opera10.61 11 8 15
IE5.5 iPhone Safari iPad Safari Safari3 Android Webkit Chrome3 WebOS Webkit Firefox3 Opera10.61 11 8 15
WebSocket 11 8 15
node.js Javascript Google V8 I/O 11 8 15
11 8 15
http://d.hatena.ne.jp/ikeike443/20110808 11 8 15
11 8 15
Push 11 8 15
11 8 15

More Related Content

Websocket shanon

  • 1. WebSocket 2011/08/15 @ 11 8 15
  • 3. Push/Push Like XMLHttpRequest (Ajax: ) Comet (Long Polling Push) Flash (Action Script ) iframe ( 11 8 15
  • 5. WebSocket W3C IETF XMLHttpRequest Comet TCP HTML5 API http://dev.w3.org/html5/websockets/ 11 8 15
  • 6. WebSocket Web TCP HTTP TCP URI HTTP “ws://” ”wss://” 11 8 15
  • 7. Ajax, Comet Polling http://prog.re-d.net/demo/slide/20110528/ 11 8 15
  • 8. WebSocket http://prog.re-d.net/demo/slide/20110528/ 11 8 15
  • 9. HTTP 11 8 15
  • 10. Ajax, Comet -> -> 11 8 15
  • 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. Server Handshake 11 8 15
  • 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 8jKS'y:G*Co,Wxa- 11 8 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%8F 11 8 15
  • 16. 1 0x00[Data]0xFF ※ 11 8 15
  • 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 Google 11 8 15
  • 18. WebSocket 11 8 15
  • 19. PC Chrome4 /Safari5 OK Opera,Firefox Off IE iOS 4.2.1 Safari OK android (webkit ) 11 8 15
  • 20. node.js socket.io WebSocket Flash Jsonp XHR Java Play! Jetty Grizzly 11 8 15
  • 21. Perl Mojolicious Catalyst FW Ruby em-websocket Python pywebsocket C mod_websocket lighttpd 11 8 15
  • 22. Kaazing Java .NET Pusher REST API WebSocket push 11 8 15
  • 23. 11 8 15
  • 24. 11 8 15
  • 25. http://dev.w3.org/html5/websockets/ 7 W3C WebSocket 11 8 15
  • 26. http://dev.w3.org/html5/websockets/ 7 W3C WebSocket Σ( Д ! 11 8 15
  • 27. WebSocket 11 8 15
  • 28. 11 8 15
  • 29. 11 8 15
  • 30. 11 8 15
  • 31. Socket.io 11 8 15
  • 32. Socket.io 11 8 15
  • 33. Socket.io WebSocket+α node.js Push http://socket.io/ https://github.com/LearnBoost/socket.io https://github.com/LearnBoost/socket.io-spec 11 8 15
  • 34. WebSocket Flash Ajax long polling Ajax multipart polling Forever iframe JSONP polling 11 8 15
  • 35. IE5.5 iPhone Safari iPad Safari Safari3 Android Webkit Chrome3 WebOS Webkit Firefox3 Opera10.61 11 8 15
  • 36. IE5.5 iPhone Safari iPad Safari Safari3 Android Webkit Chrome3 WebOS Webkit Firefox3 Opera10.61 11 8 15
  • 37. WebSocket 11 8 15
  • 38. node.js Javascript Google V8 I/O 11 8 15
  • 39. 11 8 15
  • 41. 11 8 15
  • 42. Push 11 8 15
  • 43. 11 8 15