real-time web apps & symfony. what are your options?
TRANSCRIPT
![Page 1: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/1.jpg)
Real-time Web Apps & Symfony.
What are your options?
PHIL @LEGGETTERHead of Developer Relations
1 / 72
@leggetter
![Page 2: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/2.jpg)
2 / 72
![Page 3: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/3.jpg)
What we'll cover
1. Why Real-Time?2. What are your options
How do you choose?
Pros & Cons
3. 3 Example Solutions for Symfony
3 / 72
![Page 4: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/4.jpg)
Why Realtime?
4 / 72
![Page 5: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/5.jpg)
Notifications & Signalling
5 / 72
![Page 6: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/6.jpg)
Activity Streams
6 / 72
![Page 7: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/7.jpg)
Data Visualizations
7 / 72
![Page 8: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/8.jpg)
8 / 72
Chat
![Page 9: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/9.jpg)
9 / 72
![Page 10: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/10.jpg)
Real-Time Location Tracking
10 / 72
![Page 11: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/11.jpg)
Multi-User Collaboration
11 / 72
![Page 12: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/12.jpg)
Multiplayer Games /
"Do some real-time art!"
12 / 72
![Page 13: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/13.jpg)
13 / 72
![Page 14: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/14.jpg)
Users expect a real-time UX
14 / 72
![Page 15: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/15.jpg)
Users expect a real-time UX
Without a real-time UX your app appears
broken
15 / 72
![Page 16: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/16.jpg)
Real-time Web Apps & Symfony.What are your options?
16 / 72
![Page 17: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/17.jpg)
6 Factors to Consider
17 / 72
![Page 18: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/18.jpg)
1. Use an existing solution
Don't reinvent the wheel
Unless you've a unique use case
18 / 72
![Page 19: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/19.jpg)
Why use an existing solution?
Fallback/upgrade hacks still requiredSupport/CommunityMaintenanceFuture featuresScaling
19 / 72
![Page 20: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/20.jpg)
20 / 72
![Page 21: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/21.jpg)
2. Use languages you're comfortable
with
21 / 72
![Page 22: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/22.jpg)
Solutions by language
PHP: ReactPHP, Ratchet, dNode-php, phpDaemonJava: Netty, JettyJavaScript (Node.JS): Faye, Socket.IO (Engine.IO), Primus.io.NET (C#): SignalR, XSocketsPython: Lots of options built on TornadoRuby: em-websocket, FayeLanguage agnostic: most hosted services
22 / 72
![Page 23: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/23.jpg)
j.mp/realtime-tech-guide
23 / 72
![Page 24: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/24.jpg)
3. Native Mobile Support?
24 / 72
![Page 25: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/25.jpg)
Native Mobile Support?
Only some have mobile librariesHow much data are you sending?SSL required on 3/4G networks
25 / 72
![Page 26: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/26.jpg)
FayeFirebaseHydnaPubNub
PusherRatchet (via Autobahn)SignalRSocket.IO
Solutions with Native Mobile Libraries
26 / 72
![Page 27: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/27.jpg)
4. Application/SolutionFunctionality
27 / 72
![Page 28: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/28.jpg)
Functionality, huh?!
28 / 72
![Page 29: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/29.jpg)
Functionality, huh?!
Communication Patterns
29 / 72
![Page 30: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/30.jpg)
onMessage
// client
var sock = new SockJS( 'http://localhost:9999/sockjs' );
30 / 72
![Page 31: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/31.jpg)
onMessage
// client
var sock = new SockJS( 'http://localhost:9999/sockjs' );
sock.onmessage = function( e ) {
console.log( 'message', e.data );
};
31 / 72
![Page 32: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/32.jpg)
onMessage
// client
var sock = new SockJS( 'http://localhost:9999/sockjs' );
sock.onmessage = function( e ) {
console.log( 'message', e.data );
};
// server
sock.write( 'hello SockJS' );
32 / 72
![Page 33: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/33.jpg)
PubSub
// client
var client = new FayeClient();
33 / 72
![Page 34: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/34.jpg)
PubSub
// client
var client = new FayeClient();
client.subscribe( 'chat', function( message ) {
// Handle Update
} );
34 / 72
![Page 35: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/35.jpg)
PubSub
// client
var client = new FayeClient();
client.subscribe( 'chat', function( message ) {
// Handle Update
} );
// server
var message = {
text: 'Hello, world!',
user_name: '@leggetter'
}
Faye.publish( 'chat', message );
35 / 72
![Page 36: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/36.jpg)
Evented PubSub
// client
var pusher = new Pusher( APP_KEY );
36 / 72
![Page 37: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/37.jpg)
Evented PubSub
// client
var pusher = new Pusher( APP_KEY );
var channel = pusher.subscribe( 'chat' );
37 / 72
![Page 38: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/38.jpg)
Evented PubSub
// client
var pusher = new Pusher( APP_KEY );
var channel = pusher.subscribe( 'chat' );
channel.bind( 'message', function( data ) {
// Handle Update
} );
38 / 72
![Page 39: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/39.jpg)
Evented PubSub
// client
var pusher = new Pusher( APP_KEY );
var channel = pusher.subscribe( 'chat' );
channel.bind( 'message', function( data ) {
// Handle Update
} );
channel.bind( 'message-updated', function( data ) {} );
channel.bind( 'room-name-changed', function( data ) {} );
39 / 72
![Page 40: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/40.jpg)
Evented PubSub
// client
var pusher = new Pusher( APP_KEY );
var channel = pusher.subscribe( 'chat' );
channel.bind( 'message', function( data ) {
// Handle Update
} );
channel.bind( 'message-updated', function( data ) {} );
channel.bind( 'room-name-changed', function( data ) {} );
// server
var data = [
'text' => 'Hello, world!',
'user_name' => '@leggetter'
}
pusher->trigger( 'chat', 'message', data );
40 / 72
![Page 41: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/41.jpg)
Data Sync
var myDataRef = new Firebase('https://yo.firebaseio.com/');
41 / 72
![Page 42: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/42.jpg)
Data Sync
var myDataRef = new Firebase('https://yo.firebaseio.com/');
myDataRef.push( {name: '@leggetter', text: 'Yo!'} );
42 / 72
![Page 43: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/43.jpg)
Data Sync
var myDataRef = new Firebase('https://yo.firebaseio.com/');
myDataRef.push( {name: '@leggetter', text: 'Yo!'} );
myDataRef.on( 'child_added', function(snapshot) {
// Data added
});
myDataRef.on( 'child_changed', function(snapshot) {
// Data has changed
});
myDataRef.on( 'child_removed', function(snapshot) {
// Data removed
});
43 / 72
![Page 44: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/44.jpg)
RMI
// client
$.connection.hub.start(); // async
var chat = $.connection.chatHub;
44 / 72
![Page 45: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/45.jpg)
RMI
// client
$.connection.hub.start(); // async
var chat = $.connection.chatHub;
chat.client.broadcastMessage = function (name, message) {
// handle message
};
45 / 72
![Page 46: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/46.jpg)
RMI
// client
$.connection.hub.start(); // async
var chat = $.connection.chatHub;
chat.client.broadcastMessage = function (name, message) {
// handle message
};
chat.server.send( 'me', 'hello world' );
46 / 72
![Page 47: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/47.jpg)
RMI
// client
$.connection.hub.start(); // async
var chat = $.connection.chatHub;
chat.client.broadcastMessage = function (name, message) {
// handle message
};
chat.server.send( 'me', 'hello world' );
// server
public class ChatHub : Hub
{
47 / 72
![Page 48: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/48.jpg)
RMI
// client
$.connection.hub.start(); // async
var chat = $.connection.chatHub;
chat.client.broadcastMessage = function (name, message) {
// handle message
};
chat.server.send( 'me', 'hello world' );
// server
public class ChatHub : Hub
{
public void Send(string name, string message)
{
48 / 72
![Page 49: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/49.jpg)
RMI
// client
$.connection.hub.start(); // async
var chat = $.connection.chatHub;
chat.client.broadcastMessage = function (name, message) {
// handle message
};
chat.server.send( 'me', 'hello world' );
// server
public class ChatHub : Hub
{
public void Send(string name, string message)
{
// Call the broadcastMessage method to update clients.
Clients.All.broadcastMessage(name, message);
}
}
49 / 72
![Page 50: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/50.jpg)
50 / 72
![Page 51: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/51.jpg)
51 / 72
![Page 52: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/52.jpg)
52 / 72
![Page 53: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/53.jpg)
5. Architecture Considerations
53 / 72
![Page 54: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/54.jpg)
I wanna build a real-time Symfony app
or
I wanna add real-time to an existing
Symfony app
54 / 72
![Page 55: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/55.jpg)
Self Hosted (Tightly Coupled)
55 / 72
![Page 56: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/56.jpg)
PHP Self-Hosted options
React (PHP)Event-driven, non-blocking I/O with PHP.
Ratchet (Built on React PHP)WebSockets, WAMP, PubSub samples. No HTTP Fallback
dnode-php (RPC/RMI)phpDaemon
Lots of examples. Most docs in Russian.
56 / 72
![Page 57: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/57.jpg)
Chris Boden, Creator/Maintainer of React (PHP) & Ratchet
“ Yes it’s possible but not common or probably
recommended yet. There are some projects that are
starting to do this by running the HTTP stack on
React [...] but it’s very uncommon at this point in
time
57 / 72
![Page 58: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/58.jpg)
58 / 72
![Page 59: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/59.jpg)
Self-Hosted Demo 1: Symfony + Ratchet (Loosely Coupled)
59 / 72
![Page 60: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/60.jpg)
Pros
PHPSimple integrationStandards-based
WAMP/AutobahnJS, Android, iOS & more
Cons
No HTTP fallbackLow-level abstractionsDifferent programming styleYou need to scale
Self-Hosted Demo 1 - Pro & Cons
60 / 72
![Page 61: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/61.jpg)
61 / 72
![Page 62: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/62.jpg)
Self-Hosted Demo 2: Symfony + Faye (Loosely Coupled)
62 / 72
![Page 63: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/63.jpg)
Pros
PubSubConnection fallbackIn-build Redis/Queue supportSimple integration
Cons
Not PHP(?)You need to scale
Self-Hosted Demo 2 - Pro & Cons
63 / 72
![Page 64: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/64.jpg)
64 / 72
![Page 65: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/65.jpg)
Hosted Demo: Pusher
65 / 72
![Page 66: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/66.jpg)
Pros
Simple & powerfulInstantly scalableManaged & dedicatedDirect integration into Symfony
Cons
3rd party reliance
Hosted - Pros & Cons
66 / 72
![Page 67: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/67.jpg)
6. Self-Hosted v Hosted
"Build vs. Buy"
67 / 72
![Page 69: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/69.jpg)
How do you choose?
6 Realtime Framework Considerations
1. Use an Existing Solution2. Use a language you're comfortable with3. Do you need native mobile support?4. onMessage, PubSub (Evented), RMI or DataSync5. Architectural considerations6. Hosted v Self-Hosted (Build vs. Buy)
69 / 72
![Page 70: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/70.jpg)
You need Real-Time!
There are lots of options.
Make the choice that's right for you.
I hope this helps!
70 / 72
![Page 71: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/71.jpg)
Resources
Real-time Tech GuideReact (PHP)Ratchet (PHP)Faye (Node/Ruby)PusherLopiPusherBundlegithub.com/leggetter/realtime-symfony-examples
71 / 72
![Page 72: Real-Time Web Apps & Symfony. What are your options?](https://reader031.vdocuments.net/reader031/viewer/2022020119/58acdfcf1a28ab40588b4a21/html5/thumbnails/72.jpg)
Real-time Web Apps & Symfony.
What are your options?
Questions?
joind.in/14980 | leggetter.github.io/realtime-symfony
PHIL @LEGGETTERHead of Developer Relations
72 / 72