Creating Realtime Applications with PHP and Websockets

CREATING REALTIME
CREATING REALTIME
CREATING REALTIME
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?

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

Creating Realtime Applications with PHP and Websockets

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (18)

Recently uploaded

Recently uploaded (20)

Creating Realtime Applications with PHP and Websockets