WebSockets Intro - Riverside Ruby Group - 03/2016

An introduction into WebSockets benefits and drawbacks

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?