WebSockets Intro - Riverside Ruby Group - 03/2016

An introduction into WebSockets benefits and drawbacks

Transcript

1. WEBSOCKETS
   /
   Josiah Mory @kickinbahk
   

   View Slide

2. Standard REST Request
   dissected
   

   View Slide

3. Request a Website
   http://www.meetup.com/Riverside-Ruby-User-Group/
   

   View Slide

4. Standard Rest Transaction
   1. Open a socket port to 80 on meetup.com
   2. Send an Http header request to the server
   (Apache/Nginx)
   3. This buffers the message
   4. Message is sent to server apppcation
   5. Server application decides what to do with request
   

   View Slide

5. Standard Rest Transaction (cont)
   6. Fetches Data
   7. Generates HTML
   8. Sends it back to the server (Apache/Nginx)
   9. Appropriate HTTP headers are added to the body
   10. Sent back to browser and connection closed
   

   View Slide

6. Cookies
   

   View Slide

7. Identity Maintained by Cookies
   

   View Slide

8. Passed back and forth with all
   requests
   

   View Slide

9. Disadvantages
   Carries Overhead
   Open to Security Vulnerabilities
   

   View Slide

10. Introducing Websockets
    

    View Slide

11. Originally Part of HTML5 standard
    

    View Slide

12. Moved to its own standard to keep
    the specification focused
    

    View Slide

13. Bi-directional, full-duplex
    persistent connection from a web
    browser to a server
    

    View Slide

14. An Interactive communication
    session between the user's browser
    and a server
    

    View Slide

15. Client or Server can pass messages
    to each other at any time
    

    View Slide

16. Remains Open till Client
    Closes Connection
    

    View Slide

17. Stateless
    

    View Slide

18. No Connection Limitation
    (Mulitple Tabs)
    

    View Slide

19. Faye - Rails
    Socket.io - Node
    ActionCable - Rails
    

    View Slide

20. Faye - Rails
    Socket.io - Node
    ActionCable - Rails
    

    View Slide

21. Calling the Websockets
    API
    

    View Slide

22. v
    a
    r c
    o
    n
    n
    e
    c
    t
    i
    o
    n = n
    e
    w W
    e
    b
    S
    o
    c
    k
    e
    t
    (
    u
    r
    l
    , [
    p
    r
    o
    t
    o
    c
    o
    l
    ] )
    ;
    Ex:
    v
    a
    r c
    o
    n
    n
    e
    c
    t
    i
    o
    n = n
    e
    w W
    e
    b
    S
    o
    c
    k
    e
    t
    (
    '
    w
    s
    :
    /
    /
    h
    t
    m
    l
    5
    r
    o
    c
    k
    s
    .
    w
    e
    b
    s
    o
    c
    k
    e
    t
    .
    o
    r
    g
    /
    e
    c
    h
    o
    '
    ,
    [
    '
    s
    o
    a
    p
    '
    , '
    x
    m
    p
    p
    '
    ]
    )
    ;
    

    View Slide

23. Second Argument
    -
    Accepts Optional Subprotocols as a String or an Array of
    Strings
    

    View Slide

24. Events
    /
    / W
    h
    e
    n t
    h
    e c
    o
    n
    n
    e
    c
    t
    i
    o
    n i
    s o
    p
    e
    n
    ,
    /
    / s
    e
    n
    d s
    o
    m
    e d
    a
    t
    a t
    o t
    h
    e s
    e
    r
    v
    e
    r
    c
    o
    n
    n
    e
    c
    t
    i
    o
    n
    .
    o
    n
    o
    p
    e
    n = f
    u
    n
    c
    t
    i
    o
    n (
    ) {
    /
    / S
    e
    n
    d t
    h
    e m
    e
    s
    s
    a
    g
    e '
    P
    i
    n
    g
    ' t
    o t
    h
    e S
    e
    r
    v
    e
    r
    c
    o
    n
    n
    e
    c
    t
    i
    o
    n
    .
    s
    e
    n
    d
    (
    '
    P
    i
    n
    g
    '
    )
    ;
    }
    ;
    /
    / L
    o
    g e
    r
    r
    o
    r
    s
    c
    o
    n
    n
    e
    c
    t
    i
    o
    n
    .
    o
    n
    e
    r
    r
    o
    r = f
    u
    n
    c
    t
    i
    o
    n (
    e
    r
    r
    o
    r
    ) {
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    '
    W
    e
    b
    S
    o
    c
    k
    e
    t E
    r
    r
    o
    r ' + e
    r
    r
    o
    r
    )
    ;
    }
    ;
    

    View Slide

25. Events (cont.)
    /
    / R
    e
    c
    e
    i
    v
    e d
    a
    t
    a f
    r
    o
    m t
    h
    e s
    e
    r
    v
    e
    r
    c
    o
    n
    n
    e
    c
    t
    i
    o
    n
    .
    o
    n
    m
    e
    s
    s
    a
    g
    e = f
    u
    n
    c
    t
    i
    o
    n (
    e
    ) {
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    '
    S
    e
    r
    v
    e
    r
    : ' + e
    .
    d
    a
    t
    a
    )
    ;
    }
    ;
    /
    / C
    l
    o
    s
    e c
    o
    n
    n
    e
    c
    t
    i
    o
    n
    c
    o
    n
    n
    e
    c
    t
    i
    o
    n
    .
    o
    n
    c
    l
    o
    s
    e = f
    u
    n
    c
    t
    i
    o
    n (
    c
    ) {
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    '
    C
    o
    n
    n
    e
    c
    t
    i
    o
    n
    : c
    l
    o
    s
    e
    d
    .
    .
    .
    ' + c
    )
    }
    ;
    

    View Slide

26. Sending Data
    /
    / S
    e
    n
    d
    i
    n
    g a s
    t
    r
    i
    n
    g
    c
    o
    n
    n
    e
    c
    t
    i
    o
    n
    .
    s
    e
    n
    d
    (
    '
    y
    o
    u
    r m
    e
    s
    s
    a
    g
    e
    '
    )
    ;
    /
    / S
    e
    n
    d
    i
    n
    g c
    a
    n
    v
    a
    s I
    m
    a
    g
    e
    D
    a
    t
    a a
    s A
    r
    r
    a
    y
    B
    u
    f
    f
    e
    r
    v
    a
    r i
    m
    g = c
    a
    n
    v
    a
    s
    _
    c
    o
    n
    t
    e
    x
    t
    .
    g
    e
    t
    I
    m
    a
    g
    e
    D
    a
    t
    a
    (
    0
    , 0
    , 4
    0
    0
    , 3
    2
    0
    )
    ;
    v
    a
    r b
    i
    n
    a
    r
    y = n
    e
    w U
    i
    n
    t
    8
    A
    r
    r
    a
    y
    (
    i
    m
    g
    .
    d
    a
    t
    a
    .
    l
    e
    n
    g
    t
    h
    )
    ;
    f
    o
    r (
    v
    a
    r i = 0
    ; i < i
    m
    g
    .
    d
    a
    t
    a
    .
    l
    e
    n
    g
    t
    h
    ; i
    +
    +
    ) {
    b
    i
    n
    a
    r
    y
    [
    i
    ] = i
    m
    g
    .
    d
    a
    t
    a
    [
    i
    ]
    ;
    }
    c
    o
    n
    n
    e
    c
    t
    i
    o
    n
    .
    s
    e
    n
    d
    (
    b
    i
    n
    a
    r
    y
    .
    b
    u
    f
    f
    e
    r
    )
    ;
    /
    / S
    e
    n
    d
    i
    n
    g f
    i
    l
    e a
    s B
    l
    o
    b
    v
    a
    r f
    i
    l
    e = d
    o
    c
    u
    m
    e
    n
    t
    .
    q
    u
    e
    r
    y
    S
    e
    l
    e
    c
    t
    o
    r
    (
    '
    i
    n
    p
    u
    t
    [
    t
    y
    p
    e
    =
    "
    f
    i
    l
    e
    "
    ]
    '
    )
    .
    f
    i
    l
    e
    s
    [
    c
    o
    n
    n
    e
    c
    t
    i
    o
    n
    .
    s
    e
    n
    d
    (
    f
    i
    l
    e
    )
    ;
    

    View Slide

27. Possible Use Cases
    Multiplayer online games
    Chat applications
    Live sports ticker
    Realtime updating social streams
    

    View Slide

28. Why Not Websockets?
    

    View Slide

29. Users want "delightful realtime web
    apps".
    

    View Slide

30. Developers want "delightfully easy
    to build realtime web apps".
    

    View Slide

31. Operations want "delightfully easy
    to deploy, scale and manage
    realtime web apps".
    

    View Slide

32. Difficult to Implement
    Difficult to Debug
    No Connection Limitation
    Complicated Load Balancing
    Illusion of Reliability
    Lack of Browser Support
    

    View Slide

33. Other ways for Similar
    Results
    

    View Slide

34. Long Polling
    Facebook
    Gmail
    

    View Slide

35. HTTP/2 Protocol with Long Polling
    Twitter
    

    View Slide

36. https://samsaffron.com/archive/20
    15/12/29/websockets-caution-
    required
    

    View Slide

37. Action Cable/Faye/Socket.io
    is Abstraction on WebSockets API
    

    View Slide

38. Allows for built-in
    Functionality
    

    View Slide

39. But Functionality Possible in other
    Ways, with More Benefits
    

    View Slide

40. Know What Problem it will Solve
    for Me
    

    View Slide

41. Questions?
    

    View Slide