Creating Realtime Applications with PHP and Websockets

Follow me on Twitter at http://www.twitter.com/cballou or checkout my startup at http://www.pop.co.

In this presentation we will overview the latest WebSockets spec before jumping into multiple interactive demos of increasing complexity utilizing the open source Ratchet library provided by React PHP. By the end of the presentation, you'll walk away with access to a github repository containing all of the presentation slides and demos ready to run yourself!

Sorry about the slides spanning multiple pages; Reveal.js print to pdf had problems!

https://github.com/cballou/php-websockets-demos

Transcript

1. CREATING REALTIME CREATING REALTIME CREATING REALTIME APPLICATIONS WITH PHP APPLICATIONS WITH PHP APPLICATIONS WITH PHP AND WEBSOCKETS AND WEBSOCKETS AND WEBSOCKETS · Corey Ballou @cballou
2. SO... WHAT ARE WEBSOCKETS? Full-duplex client/server communication over TCP Hackery piggybacking on HTTP handshake , an official protocol! RFC6455
3. OK... BUT WHY USE WEBSOCKETS? Optimized for low latency applications Cross-origin communication No more AJAX polling Because it's flashy
5. WEBSOCKETS PROTOCOL HISTORY. BORING! TLDR; It's mostly security enhancements. Pro tip: · · · · · · · · · · · · · · you can check RFC diffs on the IETF site Hixie-75 v Hixie-76 Hixie-75 v Hybi-00 Hixie-75 v Hybi-07 Hixie-75 v Hybi-10 Hixie-75 v RFC6455 Hixie-76 v Hybi-00 Hixie-76 v Hybi-07 Hixie-76 v Hybi-10 Hixie-76 v RFC6455 Hybi-00 v Hybi-07 Hybi-00 v Hybi-10 Hybi-00 v RFC6455 Hybi-07 v Hybi-10 Hybi-07 v RFC6455 Hybi-10 v RFC6455
6. LET'S TALK HTTP OVERHEAD REQUEST RESPONSE
8. LET'S TALK PERFORMANCE Compare vs. AJAX polling using the previous slide. (and assume AJAX polling every second vs. receiving a WebSocket message every second) Clients HTTP Throughput WS Throughput Difference 1,000 1.56 MB 0.002 MB 780x 10,000 15.26 MB 0.019 MB 803x 100,000 152.59 MB 0.191 MB 799x
9. CLIENT REQUEST SERVER RESPONSE THE WEBSOCKET HTTP HANDSHAKE Only incur HTTP header overhead on the initial handshake. G E T / e n d p o i n t H T T P / 1 . 1 O r i g i n : h t t p : / / e x a m p l e . c o m H o s t : s e r v e r . e x a m p l e . c o m U p g r a d e : W e b S o c k e t C o n n e c t i o n : U p g r a d e S e c - W e b S o c k e t - K e y : d G h l I H N h b X B s Z S B u b 2 5 j Z Q = = S e c - W e b S o c k e t - V e r s i o n : 1 3 [ . . . ] H T T P / 1 . 1 1 0 1 S w i t c h i n g P r o t o c o l s U p g r a d e : W e b S o c k e t C o n n e c t i o n : U p g r a d e S e c - W e b S o c k e t - A c c e p t : s 3 p P L M B i T x a Q 9 k Y G z z h Z R b K + x O o = [ . . . ]
10. BROWSER SUPPORT: STILL SHODDY BECAUSE WE ALL HAVE TO DEAL WITH BACKWARDS COMPATIBILITY...
12. CLIENT SIDE: HTML5 JS API v a r s o c k e t = n e w W e b S o c k e t ( ' w s : / / l o c a l h o s t : 8 0 0 0 / s o c k e t S e r v e r . p h p ' ) ; s o c k e t . o n o p e n = f u n c t i o n ( ) { c o n s o l e . l o g ( ' S o c k e t s t a t u s : ' + s o c k e t . r e a d y S t a t e ) ; / / s e n d m e s s a g e t o s o c k e t s e r v e r s o c k e t . s e n d ( ' H e l l o , w o r l d ! ' ) ; / / c l o s e c o n n e c t i o n s o c k e t . c l o s e ( ) ; } ; s o c k e t . o n m e s s a g e = f u n c t i o n ( m s g ) { c o n s o l e . l o g ( m s g . d a t a ) ; } ; s o c k e t . o n c l o s e = f u n c t i o n ( ) { } ; s o c k e t . o n e r r o r = f u n c t i o n ( ) { } ;
13. SERVER SIDE: RATCHET ROCKS Ratchet is a loosely coupled PHP library providing developers with tools to create real time, bi-directional applications between clients and servers over WebSockets. u s e R a t c h e t \ M e s s a g e C o m p o n e n t I n t e r f a c e ; u s e R a t c h e t \ C o n n e c t i o n I n t e r f a c e ; u s e R a t c h e t \ S e r v e r \ I o S e r v e r ; u s e R a t c h e t \ W e b S o c k e t \ W s S e r v e r ; c l a s s M y W s S e r v e r i m p l e m e n t s M e s s a g e C o m p o n e n t I n t e r f a c e { p u b l i c f u n c t i o n o n O p e n ( C o n n e c t i o n I n t e r f a c e $ c o n n ) { } p u b l i c f u n c t i o n o n M e s s a g e ( C o n n e c t i o n I n t e r f a c e $ c o n n , $ m s g ) { } p u b l i c f u n c t i o n o n C l o s e ( C o n n e c t i o n I n t e r f a c e $ c o n n ) { } p u b l i c f u n c t i o n o n E r r o r ( C o n n e c t i o n I n t e r f a c e $ c o n n , \ E x c e p t i o n $ e ) { } } $ s e r v e r = I o S e r v e r : : f a c t o r y ( n e w W s S e r v e r ( n e w M y W s S e r v e r ( ) ) , 8 0 9 0 ) ; $ s e r v e r - > r u n ( ) ;
14. RATCHET SUPPORTS THE WAMP SUB- PROTOCOL u s e R a t c h e t \ C o n n e c t i o n I n t e r f a c e ; u s e R a t c h e t \ W a m p \ W a m p S e r v e r I n t e r f a c e ; c l a s s D e m o i m p l e m e n t s W a m p S e r v e r I n t e r f a c e { p u b l i c f u n c t i o n o n S u b s c r i b e ( C o n n e c t i o n I n t e r f a c e $ c o n n , $ t o p i c ) { } p u b l i c f u n c t i o n o n U n S u b s c r i b e ( C o n n e c t i o n I n t e r f a c e $ c o n n , $ t o p i c ) { } p u b l i c f u n c t i o n o n O p e n ( C o n n e c t i o n I n t e r f a c e $ c o n n ) { } p u b l i c f u n c t i o n o n C l o s e ( C o n n e c t i o n I n t e r f a c e $ c o n n ) p u b l i c f u n c t i o n o n C a l l ( C o n n e c t i o n I n t e r f a c e $ c o n n , $ i d , $ t o p i c , a r r a y $ p a r a m s ) { } p u b l i c f u n c t i o n o n P u b l i s h ( C o n n e c t i o n I n t e r f a c e $ c o n n , $ t o p i c , $ e v e n t , a r r a y $ e x c l u d e , a r r a y $ e l i g i b l e ) { } p u b l i c f u n c t i o n o n E r r o r ( C o n n e c t i o n I n t e r f a c e $ c o n n , \ E x c e p t i o n $ e ) { } p u b l i c f u n c t i o n o n M e s s a g e ( $ e n t r y ) { } }
15. DEMO TIME: SITE VISITOR LOGGING http://websockets.coreyballou.co/demos/UserLogger/
18. DEMO TIME: MOUSE TRACKING http://websockets.coreyballou.co/demos/Mouse/
21. DEMO TIME: TODO LIST http://websockets.coreyballou.co/demos/Todo/
23. WEBSOCKETS USE CASES Analytics and dashboards Play-by-play sports Stock trading News tickers Chat Multiplayer gaming Social streams User collaboration Instant feedback autocompletion YOUR IMAGINATION
24. WEBSOCKETS AND WAMP PROBABLY NOT THE WAMP YOU'RE THINKING OF WAMP is a sub-protocol of WebSockets WAMP is async RPC WAMP is async PubSub
25. RPC PUBSUB AUTOBAHN.JS: A JS CLIENT LIBRARY SUPPORTING WAMP w i n d o w . o n l o a d = f u n c t i o n ( ) { v a r w s = a b . c o n n e c t ( " w s : / / l o c a l h o s t : 9 0 0 0 " , c o n n e c t e d , d i s c o n n e c t e d ) ; f u n c t i o n c o n n e c t e d ( s e s s i o n ) { v a r a r g 1 = ' h e l l o ' , a r g 2 = ' w o r l d ' ; s e s s i o n . c a l l ( ' t o p i c ' , a r g 1 , a r g 2 ) . t h e n ( c a l l b a c k _ s u c c e s s _ f u n c , c a l l b a c k _ e r r o r _ f u n c ) ; } w i n d o w . o n l o a d = f u n c t i o n ( ) { v a r w s = a b . c o n n e c t ( " w s : / / l o c a l h o s t : 9 0 0 0 " , c o n n e c t e d , d i s c o n n e c t e d ) ; f u n c t i o n c o n n e c t e d ( s e s s i o n ) { s e s s i o n . s u b s c r i b e ( ' t o p i c ' , c a l l b a c k _ f u n c ) ; s e s s i o n . p u b l i s h ( ' m y T o p i c ' , { i d : 2 7 , t s : n e w D a t e ( ) . g e t T i m e ( ) } ) ; } f u n c t i o n d i s c o n n e c t ( c o d e , r e a s o n ) { c o n s o l e . l o g ( r e a s o n ) ;
26. CLIENT SIDE WEBSOCKET FRAMEWORKS So you can be under way with minimal overhead. if you don't need fallbacks. provides WAMP support. crudely supported by supports JS/Java/Groovy, sorry PHP :( Native HTML5 Support Autobahn.js Portal Socket.IO Elephant.IO Atmosphere.js
27. OTHER SERVER SIDE FRAMEWORKS formerly php-websocket. for Socket.IO support in PHP. Wrench Elephant.IO
28. COOL DEMOS Because copying is the sincerest form of flattery. Plink Paint With Me Pixelatr WordSquared BrowserQuest Rawkets WPilot Rumpetroll JiTT Realtim Twitterwall Quake 2 Port
29. CREDITS Ratchet Autobahn.js WAMP.ws An Introduction To WebSockets WebSocket.org | About HTML5 WebSockets WebSocket.org | HTML5 Web Sockets: A Quantum Leap in Scalability for the Web Bloated Request & Response Headers W3C | The Web Sockets API Publication History Wikipedia | WebSocket CanIUse?
30. IETF LibEvent
31. QUESTIONS? COMMENTS? https://joind.in/8020