CREATING REALTIME
CREATING REALTIME
CREATING REALTIMEAPPLICATIONS WITH PHP
APPLICATIONS WITH PHP
APPLICATIONS WITH PHPAND WEBSOCKETS
AND WEBSOCKETS
AND WEBSOCKETS · Corey Ballou @cballou
SO... WHAT ARE WEBSOCKETS?Full-duplex client/server communication over TCPHackery piggybacking on HTTP handshake
, an official protocol!
RFC6455
OK... BUT WHY USE WEBSOCKETS?Optimized for low latency applicationsCross-origin communicationNo more AJAX pollingBecause 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-07Hybi-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 OVERHEADREQUEST
RESPONSE
LET'S TALK PERFORMANCECompare 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 Difference1,000 1.56 MB 0.002 MB 780x10,000 15.26 MB 0.019 MB 803x100,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.1Origin: http://example.comHost: server.example.comUpgrade: WebSocketConnection: UpgradeSec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==Sec-WebSocket-Version: 13[...]
HTTP/1.1 101 Switching ProtocolsUpgrade: WebSocketConnection: UpgradeSec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=[...]
BROWSER SUPPORT: STILL SHODDYBECAUSE WE ALL HAVE TO DEAL WITH BACKWARDS COMPATIBILITY...
CLIENT SIDE: HTML5 JS APIvar 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 ROCKSRatchet is a loosely coupled PHP library providing developers
with tools to create real time, bi-directional applicationsbetween clients and servers over WebSockets.
use Ratchet\MessageComponentInterface;use Ratchet\ConnectionInterface;use Ratchet\Server\IoServer;use Ratchet\WebSocket\WsServer;
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 Ratchet\ConnectionInterface;use Ratchet\Wamp\WampServerInterface;
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, array $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 LOGGINGhttp://websockets.coreyballou.co/demos/UserLogger/
DEMO TIME: MOUSE TRACKINGhttp://websockets.coreyballou.co/demos/Mouse/
DEMO TIME: TODO LISThttp://websockets.coreyballou.co/demos/Todo/
WEBSOCKETS USE CASESAnalytics and dashboardsPlay-by-play sportsStock tradingNews tickersChatMultiplayer gamingSocial streamsUser collaborationInstant feedback autocompletionYOUR IMAGINATION
WEBSOCKETS AND WAMPPROBABLY NOT THE WAMP YOU'RE THINKING OF
WAMP is a sub-protocol of WebSocketsWAMP is async RPCWAMP is async PubSub
RPC PUBSUB
AUTOBAHN.JS: A JS CLIENT LIBRARYSUPPORTING 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, reason) { console.log(reason);
CLIENT SIDE WEBSOCKET FRAMEWORKSSo 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 SupportAutobahn.jsPortalSocket.IO Elephant.IO
Atmosphere.js
OTHER SERVER SIDE FRAMEWORKS formerly php-websocket.
for Socket.IO support in PHP.
WrenchElephant.IO
COOL DEMOSBecause copying is the sincerest form of flattery.
PlinkPaint With MePixelatrWordSquaredBrowserQuestRawketsWPilotRumpetrollJiTT Realtim TwitterwallQuake 2 Port
CREDITS
RatchetAutobahn.jsWAMP.wsAn Introduction To WebSocketsWebSocket.org | About HTML5 WebSocketsWebSocket.org | HTML5 Web Sockets: A Quantum Leapin Scalability for the WebBloated Request & Response HeadersW3C | The Web Sockets API Publication HistoryWikipedia | WebSocketCanIUse?
IETF
QUESTIONS? COMMENTS?https://joind.in/8020