Configuracindeunaredinalmbricaen13pasos 111110012627-phpapp01-111121132700-phpapp01
creatingrealtimeapplicationswithphpandwebsockets-130912101104-phpapp01
description
Transcript of creatingrealtimeapplicationswithphpandwebsockets-130912101104-phpapp01
-
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 siteHixie-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 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 RESPONSETHE 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.IOAtmosphere.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