Creating Realtime Applications with PHP and Websockets

71,361 views

Published on

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

Published in: Technology

Creating Realtime Applications with PHP and Websockets

  1. 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. 2. SO... WHAT ARE WEBSOCKETS? Full-duplex client/server communication over TCP Hackery piggybacking on HTTP handshake , an official protocol!RFC6455
  3. 3. OK... BUT WHY USE WEBSOCKETS? Optimized for low latency applications Cross-origin communication No more AJAX polling Because it's flashy
  4. 4. 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
  5. 5. LET'S TALK HTTP OVERHEAD REQUEST RESPONSE
  6. 6. 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
  7. 7. CLIENT REQUEST SERVER RESPONSE THE WEBSOCKET HTTP HANDSHAKE Only incur HTTP header overhead on the initial handshake. GET /endpoint HTTP/1.1 Origin: http://example.com Host: server.example.com Upgrade: WebSocket Connection: Upgrade Sec-WebSocket-Key: dGhlIHNhbXBsZSBu b25jZQ== Sec-WebSocket-Version: 13 [...] HTTP/1.1 101 Switching Protocols Upgrade: WebSocket Connection: Upgrade Sec-WebSocket-Accept: s3pPLMBiTxaQ9 kYGzzhZRbK+xOo= [...]
  8. 8. BROWSER SUPPORT: STILL SHODDY BECAUSE WE ALL HAVE TO DEAL WITH BACKWARDS COMPATIBILITY...
  9. 9. CLIENT SIDE: HTML5 JS API var socket = new WebSocket('ws://localhost:8000/socketServer.php'); socket.onopen = function() { console.log('Socket status: ' + socket.readyState); // send message to socket server socket.send('Hello, world!'); // close connection socket.close(); }; socket.onmessage = function(msg) { console.log(msg.data); }; socket.onclose = function() { }; socket.onerror = function() { };
  10. 10. 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. use RatchetMessageComponentInterface; use RatchetConnectionInterface; use RatchetServerIoServer; use RatchetWebSocketWsServer; class MyWsServer implements MessageComponentInterface { public function onOpen(ConnectionInterface $conn) { } public function onMessage(ConnectionInterface $conn, $msg) { } public function onClose(ConnectionInterface $conn) { } public function onError(ConnectionInterface $conn, Exception $e) { } } $server = IoServer::factory(new WsServer(new MyWsServer()), 8090); $server->run();
  11. 11. RATCHET SUPPORTS THE WAMP SUB- PROTOCOL use RatchetConnectionInterface; use RatchetWampWampServerInterface; class Demo implements WampServerInterface { public function onSubscribe(ConnectionInterface $conn, $topic) { } public function onUnSubscribe(ConnectionInterface $conn, $topic) { } public function onOpen(ConnectionInterface $conn) { } public function onClose(ConnectionInterface $conn) public function onCall(ConnectionInterface $conn, $id, $topic, arra y $params) { } public function onPublish(ConnectionInterface $conn, $topic, $event , array $exclude, array $eligible) { } public function onError(ConnectionInterface $conn, Exception $e) { } public function onMessage($entry) { } }
  12. 12. DEMO TIME: SITE VISITOR LOGGING http://websockets.coreyballou.co/demos/UserLogger/
  13. 13. DEMO TIME: MOUSE TRACKING http://websockets.coreyballou.co/demos/Mouse/
  14. 14. DEMO TIME: TODO LIST http://websockets.coreyballou.co/demos/Todo/
  15. 15. 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
  16. 16. 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
  17. 17. RPC PUBSUB AUTOBAHN.JS: A JS CLIENT LIBRARY SUPPORTING WAMP window.onload = function() { var ws = ab.connect( "ws://localhost:9000", connected, disconnected ); function connected(session) { var arg1 = 'hello', arg2 = 'world'; session.call('topic', arg1, arg2).then( callback_success_func, callback_error_func ); } window.onload = function() { var ws = ab.connect( "ws://localhost:9000", connected, disconnected ); function connected(session) { session.subscribe('topic', callback_func); session.publish('myTopic', { id: 27, ts: new Date().getTime() }); } function disconnect(code, reaso n) { console.log(reason);
  18. 18. 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
  19. 19. OTHER SERVER SIDE FRAMEWORKS formerly php-websocket. for Socket.IO support in PHP. Wrench Elephant.IO
  20. 20. 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
  21. 21. 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?
  22. 22. IETF LibEvent
  23. 23. QUESTIONS? COMMENTS? https://joind.in/8020

×