Real-Time Web Apps & .NET. What Are Your Options? NDC Oslo 2016

Real-Time Web Apps & .NET
What are Your Options?
NDC { Oslo } 10-June-2016
@leggetter

PHIL @LEGGETTER
Head of Developer Relations
leggetter@nexmo.com
3 / 105
@leggetter

What we'll cover
1. Why Real-Time?
2. Common Real-Time Use Cases
3. What are your options?
How do you choose? inc. Communication Patterns
.NET examples
Pros & Cons
4. Q&A
5 / 105
@leggetter

When do we need Realtime?
6 / 105
@leggetter

WCaaS
Data: Is there a timely nature to the data?
7 / 105
@leggetter

User Experience: Is there a timely nature to the
experience?
8 / 105
@leggetter

Realtime is required when there's a Need or
Demand for:
Up to date information
Interaction to maintain engagement (UX)
9 / 105
@leggetter

Common Real-Time Use Cases
10 / 105
@leggetter

Notifications & Activity Streams
11 / 105
@leggetter

Data Visualizations
12 / 105
@leggetter

13 / 105
Chat & Bots
@leggetter

Real-Time Location Tracking
15 / 105
@leggetter

Multi-User Collaboration
16 / 105
@leggetter

WebRTC Powered AV Chat
17 / 105
@leggetter

Users expect a real-time UX
18 / 105
@leggetter

Users expect a real-time UX
Without a real-time UX your app appears
broken
18 / 105
@leggetter

You All Have Real-Time Data in Your Apps
Every Single Event
Data Changes
System Interactions
User Interactions
19 / 105
@leggetter

Real-time Web Apps & .NET
What are your options?
20 / 105
@leggetter

7 Factors to Consider
21 / 105
@leggetter

1. Should you keep on polling?
22 / 105
@leggetter

Polling Calculations
Scenario
1. Site average of 10,000 Users
23 / 105
@leggetter

Scenario
2. Over 1 Hour, with a 10 second polling interval
23 / 105
@leggetter

Scenario
3. Requests from pages load + HTML, CSS, JS, Images for 10k users = 50,000
23 / 105
@leggetter

Scenario
4. Poll requests per user/minute = (60 / 10) = 6
23 / 105
@leggetter

Scenario
5. Poll requests per user/hour = (6 * 60) = 360
23 / 105
@leggetter

Scenario
6. Poll requests site wide per hour = (360 * 10,000) = 3,600,000
23 / 105
@leggetter

Scenario
6. Poll requests site wide per hour = (360 * 10,000) = 3,600,000
With polling the site would need to handle 3.65 Million requests per hour
Or 50k HTTP requests + maintain 10k persistent connections?
23 / 105
@leggetter

Cache - clients keep polling
Push Proxy solutions
fanout.io
streamdata.io
Quick Win solutions
24 / 105
@leggetter

2. Use an existing solution
Don't reinvent the wheel
Unless you've a unique use case
25 / 105
@leggetter

Why use an existing solution?
Connection fallback/upgrade hacks still required
WebSocket: 91% of connections
HTTP fallback: 9% of connections
26 / 105
@leggetter

Support/Community
26 / 105
@leggetter

Support/Community
Maintenance
26 / 105
@leggetter

Support/Community
Maintenance
Future features
26 / 105
@leggetter

Support/Community
Maintenance
Future features
Scaling
26 / 105
@leggetter

j.mp/realtime-tech-guide
27 / 105
@leggetter

3. Use languages you're comfortable
with
28 / 105
@leggetter

Solutions by language
PHP: Ratchet, dNode-php
Java: Netty, Jetty
JavaScript (Node.JS): Faye, Socket.IO (Engine.IO), Primus.io
.NET (C#): SignalR, XSockets
Python: Lots of options built on Tornado
Ruby: em-websocket, Faye
Language agnostic: most hosted services
29 / 105
@leggetter

4. Client Device Support?
30 / 105
@leggetter

Client Device Support
Only some have a selection of client libraries
31 / 105
@leggetter

Supported connection transports
31 / 105
@leggetter

How much data are you sending?
31 / 105
@leggetter

How much data are you sending?
SSL required on 3/4G networks
31 / 105
@leggetter

5. Application/Solution
Communication Patterns
32 / 105
@leggetter

5. Application/Solution
Communication Patterns
How does the client/server & client/client communicate
32 / 105
@leggetter

Simple Messaging
33 / 105
@leggetter

0:00 34 / 105
@leggetter
Internet ^5 Machine

Simple Messaging
// client
var ws = new WebSocket('wss://localhost/');
35 / 105
@leggetter

Simple Messaging
// client
ws.onmessage = function(evt) {
var data = JSON.parse(evt.data);
35 / 105
@leggetter

Simple Messaging
// client
// ^5
performHighFive();
};
35 / 105
@leggetter

Simple Messaging
// client
// ^5
performHighFive();
};
// server
server.on('connection', function(socket){
35 / 105
@leggetter

Simple Messaging
// client
// ^5
performHighFive();
};
// server
server.on('connection', function(socket){
socket.send(JSON.stringify({action: 'high-5'}));
});
35 / 105
@leggetter

Simple Messaging
using Nexmo.Api;
// SMS
var results = SMS.Send(new SMS.SMSRequest
{
from = "15555551212",
to = "17775551212",
text = "this is a test"
});
// Voice
var result = Voice.TextToSpeech(new Voice.TextToSpeechCallCommand
{
to = "17775551212",
from = "15555551212",
text = "Hello from Nexmo"
});
36 / 105
@leggetter

PubSub
// client
var client = new Faye.Client('http://localhost:8000/faye');
39 / 105
@leggetter

PubSub
// client
client.subscribe('/leggetter-updates', function(data) {
39 / 105
@leggetter

PubSub
// client
console.log(data.text);
});
39 / 105
@leggetter

PubSub
// client
});
client.subscribe('/leggetter-dm-notifications', function(data) {
console.log(data.count);
});
39 / 105
@leggetter

PubSub
// client
});
});
// server
server.publish('/leggetter-updates', {text: 'Hello DevWeek!'});
39 / 105
@leggetter

PubSub
// client
});
});
// server
server.publish('/leggetter-updates', {text: 'Hello DevWeek!'});
server.publish('/leggetter-dm-notifications', {count: 2});
39 / 105
@leggetter

Evented PubSub
40 / 105
@leggetter

Evented PubSub
// client
var updates = io('/leggetter-updates');
41 / 105
@leggetter

Evented PubSub
// client
updates.on('created', function (data) {
// Add activity to UI
});
41 / 105
@leggetter

Evented PubSub
// client
});
updates.on('updated', function(data) {
// Update activity
});
updates.on('deleted', function(data) {
// Remove activity
});
41 / 105
@leggetter

Evented PubSub
// client
});
// Update activity
});
// Remove activity
});
// server
var io = require('socket.io')();
var updates = io.of('/leggetter-updates');
41 / 105
@leggetter

Evented PubSub
// client
});
// Update activity
});
// Remove activity
});
// server
updates.emit('created', {text: 'PubSub Rocks!', id: 1});
41 / 105
@leggetter

Evented PubSub
// client
});
// Update activity
});
// Remove activity
});
// server
updates.emit('created', {text: 'PubSub Rocks!', id: 1});
updates.emit('updated', {text: 'Evented PubSub Rocks!', id: 1});
updates.emit('deleted', {id: 1});
41 / 105
@leggetter

PubSub vs. Evented PubSub
42 / 105
@leggetter

PubSub
client.subscribe('devexp-channel', function(data) {
if(data.eventType === 'chat-message') {
addMessage(data.message);
}
45 / 105
@leggetter

PubSub
}
else if(data.eventType === 'channel-purposed-changed') {
updateRoomTitle(data.purpose);
}
else if(/* and so on */) {
}
})
45 / 105
@leggetter

PubSub
}
}
}
})
Evented PubSub
var devexp = io('/devexp-channel');
devexp.on('chat-message', addMessage);
devexp.on('channel-purposed-changed', updateChannelPurpose);
45 / 105
@leggetter

PubSub
}
}
}
})
Evented PubSub
var devexp = io('/devexp-channel');
devexp.on('chat-message', addMessage);
devexp.on('channel-purposed-changed', updateChannelPurpose);
devexp.on('current-topic-changed', updateChannelTopic);
devexp.on('user-online', userOnline);
devexp.on('user-offline', userOffline);
45 / 105
@leggetter

Data Sync
// client
var ref = new Firebase("https://app.firebaseio.com/doc1/lines");
48 / 105
@leggetter

Data Sync
// client
ref.on('child_added', function(childSnapshot, prevChildKey) {
// code to handle new child.
});
48 / 105
@leggetter

Data Sync
// client
});
ref.on('child_changed', function(childSnapshot, prevChildKey) {
// code to handle child data changes.
});
48 / 105
@leggetter

Data Sync
// client
});
});
ref.on('child_removed', function(oldChildSnapshot) {
// code to handle child removal.
});
48 / 105
@leggetter

Data Sync
// client
});
});
});
ref.push({ 'editor_id': 'leggetter', 'text': 'Nexmo Rocks!' });
48 / 105
@leggetter

Data Sync
// client
});
});
});
ref.push({ 'editor_id': 'leggetter', 'text': 'Nexmo Rocks!' });
Framework handles updates to other clients
48 / 105
@leggetter

RMI (aka RPC)
49 / 105
@leggetter

RMI
// client
var chat = $.connection.chatHub;
51 / 105
@leggetter

RMI
// client
chat.client.broadcastMessage = function (name, message) {
// handle message
};
51 / 105
@leggetter

RMI
// client
// handle message
};
chat.server.send( 'me', 'hello world' );
51 / 105
@leggetter

RMI
// client
// handle message
};
$.connection.hub.start(); // async
51 / 105
@leggetter

RMI
// client
// handle message
};
// server
public class ChatHub : Hub
{
51 / 105
@leggetter

RMI
// client
// handle message
};
// server
{
public void Send(string name, string message)
{
51 / 105
@leggetter

RMI
// client
// handle message
};
// server
{
public void Send(string name, string message)
{
// Call the broadcastMessage method to update clients.
Clients.All.broadcastMessage(name, message);
}
}
51 / 105
@leggetter

6. Deployment & Architecture
Considerations
57 / 105
@leggetter

Code
https://github.com/leggetter/realtime-dotnet-examples
Short link: http://j.mp/rt-dotnet-ex
58 / 105
@leggetter

Self Hosted (Tightly Coupled) 59 / 105
@leggetter

.NET Self-Hosted Real-Time options
SignalR
XSockets
60 / 105
@leggetter

Self-Hosted Demo 1: ASP.NET + SignalR (Tightly Coupled)
61 / 105
@leggetter

What we'll look at:
PM> Install-Package Microsoft.AspNet.SignalR
Scriptsjquery.signalR*.js
App_StartSignalRStartup.cs
ControllersHomeController.cs
HubsChatHub.cs
ViewsHomeSignalR.cshtml
ScriptchatSignalRChat.js
62 / 105
@leggetter

Pros
.NET
Simple integration
MS Supported
jQuery Dependency
Cons
Tightly coupled
RMI only
Self-Scaling
Scaling (realtime + HTTP)
Self-Hosted Demo 1: Pro & Cons
63 / 105
@leggetter

Self-Hosted Demo 2: ASP.NET + XSockets (Tightly Coupled)
64 / 105
@leggetter

What we'll look at:
PM> Install-Package XSockets
App_StartXSocketsStartup.cs
ControllersHomeController.cs
XSocketsChatController.cs
ViewsHomeXSockets.cshtml
ScriptsXSockets.latest.js
ScriptchatXSocketsChat.cs
65 / 105
@leggetter

Pros
.NET
Simple integration
Communication patterns
PubSub/Evented
RMI
Licensed
Cons
Tightly coupled
Self-Scaling
Scaling (realtime + HTTP)
Licensed
Self-Hosted Demo 2: Pro & Cons
66 / 105
@leggetter

Self-Hosted: .NET + Message Queue (Loosely Coupled)
67 / 105
@leggetter

Pros
.NET
Maps well to PubSub
Loosely coupled
Could use another runtime
Cons
How does it fit with RMI/SignalR?
Multiple components
Self-scaling
Queue routing questions
In: HTTP. Out: WebSocket
Self-Hosted: .NET + Message Queue - Pro &
Cons
69 / 105
@leggetter

If SignalR or XSockets aren't a good fit
you may have to look at a non-.NET solution
70 / 105
@leggetter

.NET Hosted Real-Time options
Ably
Firebase
Fanout
PubNub
Pusher
Realtime.co
Syncano
71 / 105
@leggetter

Hosted Demo: PubNub
72 / 105
@leggetter

What we'll look at:
PM> Install-Package Pubnub
ControllersChatController.cs
ViewsHomePubNub.cshtml
ScriptchatPubNub.js
PubNub Real-Time Analytics
73 / 105
@leggetter

Pros
Simple & powerful
Instantly scalable
Managed & dedicated
Direct integration. No overhead.
Cons
3rd party reliance
Diﬀicult to influence functionality
Hosted - Pros & Cons
74 / 105
@leggetter

Why use a hosted service?
Scenario
75 / 105
@leggetter

Scenario
2. Over 1 Hour, no polling
75 / 105
@leggetter

Scenario
75 / 105
@leggetter

Scenario
4. That's it! Total: 50,000
75 / 105
@leggetter

Scenario
4. That's it! Total: 50,000
Your servers handle 50k requests per hour instead of 3.6M
You oﬀload the polling or persistent connections to the service
75 / 105
@leggetter

7. Self-Hosted v Hosted
"Build vs. Buy"
76 / 105
@leggetter

Build vs. Buy - Costs
baremetrics.com/calculator
77 / 105
@leggetter

How do you choose?
7 Realtime Framework Considerations
1. Should you keep on polling?
2. Use an Existing Solution
3. Use a language you're comfortable with
4. Do you need multiple client device support?
5. Simple Messaging, PubSub/Evented, RMI or DataSync
6. Architectural considerations
7. Hosted v Self-Hosted (Build vs. Buy)
78 / 105
@leggetter

You need Real-Time!
There are lots of options.
Make the choice that's right for you.
I hope this helps!
79 / 105
@leggetter

Resources
Real-time Tech Guide
github.com/leggetter/realtime-dotnet-examples
Tools, Tips and Techniques for Developing Real-
time Apps
Nexmo
80 / 105
@leggetter

Real-time Web Apps & .NET
What are your options?
Questions?
PHIL @LEGGETTER
Head of Developer Relations
81 / 105
@leggetter

Future (If Time)
82 / 105
@leggetter

Network Infrastructure & Protocols
Reliability
Speed
Beyond HTTP
HTTP2
83 / 105
@leggetter

Bayeux
DDP
dNode
EPCP
GRIP
gRPC
MQTT
Pusher Protocol
STOMP
SignalR Protocol
WAMP (Web App Messaging Protocol)
XMPP (various)
Communication Pattern Protocol
Standardisation
84 / 105
@leggetter

Firebase
GitHub
Iron.io
MailChimp
MailJet
PagerDuty
Nexmo
SendGrid
Real-Time APIs
86 / 105
@leggetter

More "Things"!
88 / 105
@leggetter

The Physical Web
89 / 105
@leggetter

IoT, Apps & Developers
90 / 105
@leggetter

A thing can be anything
91 / 105
@leggetter

Sensors
Appliances
Vehicles
Smart Phones
Devices (Arduino, Electric Imp, Raspberry Pi etc.)
91 / 105
@leggetter

Sensors
Appliances
Vehicles
Smart Phones
Devices (Arduino, Electric Imp, Raspberry Pi etc.)
Servers
Browsers
Apps: Native, Web, running anywhere
91 / 105
@leggetter

The Majority of code we'll write will still be
for "Apps"
Configuring
Monitoring
Interacting
App Logic
92 / 105
@leggetter

Real-Time Use Case Evolution
Notifications & Signalling
Activity Streams
Data Viz & Polls
Chat
Collaboration
Multiplayer Games
93 / 105
@leggetter

Notifications/Activity Streams -> Actions
94 / 105
@leggetter
The end of apps as we know it - Intercom

Subscriptions
95 / 105
@leggetter

Personalised Event Streams
96 / 105
@leggetter

Unified UIs
97 / 105
@leggetter

Chat & Bots for Everything and the rise of the .ai domain 98 / 105
@leggetter

600M MAUs
10M integrations
app-within-an-app model
taxi, order food, tickets, games etc.
WeChat
99 / 105
@leggetter

Chat Integrations
100 / 105
@leggetter

Siri
Google Now
Microso Cortana
Facebook M
Chat "Virtual Assistants"
101 / 105
@leggetter

Chat has evolved. Chat is now a platform!
103 / 105
@leggetter

Multi-Device Experiences
104 / 105
@leggetter

Ben Foxall - A conceptual future for the multi-device web (FutureJS 2014)
105 / 105
@leggetter

Real-Time Web Apps & .NET. What Are Your Options? NDC Oslo 2016

More Related Content

Viewers also liked (11)

Similar to Real-Time Web Apps & .NET. What Are Your Options? NDC Oslo 2016 (20)

More from Phil Leggetter (20)

Recently uploaded (20)

Real-Time Web Apps & .NET. What Are Your Options? NDC Oslo 2016