Pro Yearly is on sale from $80 to $50! »

WebSockets Intro - Riverside Ruby Group - 03/2016

WebSockets Intro - Riverside Ruby Group - 03/2016

An introduction into WebSockets benefits and drawbacks

55e2e1f28b890e26c101ed44c5f1d3af?s=128

kickinbahk

March 17, 2016
Tweet

Transcript

  1. WEBSOCKETS / Josiah Mory @kickinbahk

  2. Standard REST Request dissected

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

  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
  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
  6. Cookies

  7. Identity Maintained by Cookies

  8. Passed back and forth with all requests

  9. Disadvantages Carries Overhead Open to Security Vulnerabilities

  10. Introducing Websockets

  11. Originally Part of HTML5 standard

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

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

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

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

    any time
  16. Remains Open till Client Closes Connection

  17. Stateless

  18. No Connection Limitation (Mulitple Tabs)

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

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

  21. Calling the Websockets API

  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 ' ] ) ;
  23. Second Argument - Accepts Optional Subprotocols as a String or

    an Array of Strings
  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 ) ; } ;
  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 ) } ;
  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 ) ;
  27. Possible Use Cases Multiplayer online games Chat applications Live sports

    ticker Realtime updating social streams
  28. Why Not Websockets?

  29. Users want "delightful realtime web apps".

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

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

    web apps".
  32. Difficult to Implement Difficult to Debug No Connection Limitation Complicated

    Load Balancing Illusion of Reliability Lack of Browser Support
  33. Other ways for Similar Results

  34. Long Polling Facebook Gmail

  35. HTTP/2 Protocol with Long Polling Twitter

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

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

  38. Allows for built-in Functionality

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

  40. Know What Problem it will Solve for Me

  41. Questions?