Creating Realtime Applications with PHP and Websockets
Upcoming SlideShare
Loading in...5
×
 

Creating Realtime Applications with PHP and Websockets

on

  • 40,296 views

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

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

Statistics

Views

Total Views
40,296
Views on SlideShare
40,296
Embed Views
0

Actions

Likes
7
Downloads
91
Comments
2

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Creating Realtime Applications with PHP and Websockets Creating Realtime Applications with PHP and Websockets Presentation Transcript

  • CREATING REALTIME CREATING REALTIME CREATING REALTIME APPLICATIONS WITH PHP APPLICATIONS WITH PHP APPLICATIONS WITH PHP AND WEBSOCKETS AND WEBSOCKETS AND WEBSOCKETS ·Corey Ballou @cballou
  • SO... WHAT ARE WEBSOCKETS? Full-duplex client/server communication over TCP Hackery piggybacking on HTTP handshake , an official protocol!RFC6455
  • OK... BUT WHY USE WEBSOCKETS? Optimized for low latency applications Cross-origin communication No more AJAX polling Because it's flashy
  • 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
  • LET'S TALK HTTP OVERHEAD REQUEST RESPONSE
  • 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
  • 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= [...]
  • BROWSER SUPPORT: STILL SHODDY BECAUSE WE ALL HAVE TO DEAL WITH BACKWARDS COMPATIBILITY...
  • 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() { };
  • 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();
  • 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) { } }
  • DEMO TIME: SITE VISITOR LOGGING http://websockets.coreyballou.co/demos/UserLogger/
  • DEMO TIME: MOUSE TRACKING http://websockets.coreyballou.co/demos/Mouse/
  • DEMO TIME: TODO LIST http://websockets.coreyballou.co/demos/Todo/
  • 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
  • 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
  • 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);
  • 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
  • OTHER SERVER SIDE FRAMEWORKS formerly php-websocket. for Socket.IO support in PHP. Wrench Elephant.IO
  • 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
  • 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?
  • IETF LibEvent
  • QUESTIONS? COMMENTS? https://joind.in/8020