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

1. WebSocket
2011/08/15 @
11 8 15

2. Push/Push Like
11 8 15

3. Push/Push Like
XMLHttpRequest (Ajax: )
Comet (Long Polling Push)
Flash (Action Script )
iframe (
11 8 15

4. WebSocket
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

11. Client API
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

40. http://d.hatena.ne.jp/ikeike443/20110808
11 8 15

41. 11 8 15

42. Push
11 8 15

43. 11 8 15