WebSockets (jsday)

Transcript

1. WEBSOCKETS
2. • phpBB • Symfony2 • Silex • Composer igorw @igorwesome
4. WEBSOCKETS
5. WEB
6. Application HTTP Presentation TCP Session TCP Transport TCP Network IP Data Link Physical
7. Application HTTP Presentation TCP Session TCP Transport TCP Network IP Data Link Physical
8. HTTP
9. client
10. request client
11. reponse client request
12. GET / HTTP/1.1 Host: igor.io >
13. HTTP/1.1 200 OK Server: nginx Content-Type: text/html; charset=UTF-8 Transfer-Encoding: chunked Connection: keep-alive cache-control: no-cache date: Mon, 14 May 2012 10:08:23 GMT Hello World! GET / HTTP/1.1 Host: igor.io > <
14. THIS IS A GOOD THING
15. BUT
16. NOT FOR EVERYTHING
17. UNIDIRECTIONAL
19. LATENCY
20. LATENCY KEEP-ALIVE PIPELINING SPDY
21. STATELESS
22. Application HTTP Presentation TCP Session TCP Transport TCP Network IP Data Link Physical
23. Application HTTP Presentation TCP Session TCP Transport TCP Network IP Data Link Physical
24. WEBSOCKETS
25. SOCKETS
26. WEBSOCKETS
27. PROTOCOL API
28. THE WEBSOCKET PROTOCOL
29. browser
31. GET /foo HTTP/1.1 Host: localhost Connection: Upgrade Upgrade: websocket Sec-WebSocket-Key: ZQqy3/N7NzBwMak/2+aFIQ== Sec-WebSocket-Origin: ws://localhost:8080/foo Sec-WebSocket-Version: 13 >
32. GET /foo HTTP/1.1 Host: localhost Connection: Upgrade Upgrade: websocket Sec-WebSocket-Key: ZQqy3/N7NzBwMak/2+aFIQ== Sec-WebSocket-Origin: ws://localhost:8080/foo Sec-WebSocket-Version: 13 HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: p5XeX6xlMI7WflwlN4B8OFqdWPA= > <
33. • Handshake / Upgrade • TCP + framing • Proxies • Supports TLS (SSL)
35. RFC 6455
36. COMET
37. THE WEBSOCKET API
38. browser
40. var ws = new WebSocket('ws://example.org:8080/updates'); ws.onopen = function () { ws.send('hello'); }; ws.onmessage = function (event) { console.log(event.data); };
41. JS INTERFACE • WebSocket • onopen • onmessage • onerror • onclose • binaryType • MessageEvent • data
42. browser API PROTOCOL
43. USE CASES •Games •Notifications •Collaboration •Statistics •Chat
44. 4.0+ (2009) 6.0+ (2011) 10.70+ (2012) 5.0+ (2010) 10+ (2012)
45. • transport abstraction (fallbacks) • broadcasting, reconnection, serialization, other stuff • monolithic! (and almost trying to fix it)
46. SOCKJS
47. TRANSPORTS • Native WebSocket • Streaming • Polling
48. TRANSPORTS • Native WebSocket (RFC6455, hixie-76, hybi-10) • Streaming (xhr-streaming, xdr-streaming, iframe-eventsource, iframe-htmlfile) • Polling (xhr-polling, xdr-polling, iframe-xhr-polling, jsonp- polling)
50. ASYNC STACK Connect (fix it, sencha) Express SockJS
51. ASYNC STACK ? ? SockJS
52. ASYNC STACK EventMachine ? ? SockJS
53. ASYNC STACK ? ? SockJS
54. Y U NO PHP?
55. SYNC STACK Application
56. SYNC STACK Application
57. ASYNC Connect (fix it, sencha) Express SockJS SYNC Application
60. *MQ
61. *MQ Sync Async
62. DEMO
63. •Pub/Sub •RPC MESSAGING PATTERNS
66. NULLMQ
67. DEBUGGING •printf •chrome inspector •wssh •ngrep •zmqc
68. RECAP • Use SockJS • Polyglot is the future • Learn from the MQs
69. LINKS • tools.ietf.org/html/rfc6455 • dev.w3.org/html5/websockets • developer.mozilla.org/en/WebSockets (fix it) • sockjs.org • github.com/igorw/websockets-talk
70. github.com/igorw/websockets-talk
71. CREDITS • thenounproject.com • stopwatch
72. Questions? @igorwesome speakerdeck.com /u/igorw joind.in/6421