WebSockets (jsday)

Transcript

1. WEBSOCKETS

2. • phpBB • Symfony2 • Silex • Composer igorw @igorwesome

3. None

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

18. None

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

30. None

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)
34. None

35. RFC 6455

36. COMET

37. THE WEBSOCKET API

38. browser

39. None

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)
49. None

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

58. None
59. None

60. *MQ

61. *MQ Sync Async

62. DEMO

63. •Pub/Sub •RPC MESSAGING PATTERNS

64. None
65. None

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