Creating Realtime Applications with PHP and Websockets

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

IETFLibEvent

QUESTIONS? COMMENTS?https://joind.in/8020