Realtime Web Apps
↓s/Web/Internet
↓Realtime Internet Apps
Internet Usage (per day)
†200 billion emails7 million blog posts written500 million tweets55 million Facebook status updates5 billion Google+ +1's60 million Instagram photos posted33 million hours of Netflix watched200 million hours of YouTube watched2 billion minutes spent on Skype
The Internet...1. is the communications platform
2. is becoming the entertainment platform
When do we need Realtime?
DataIs there a timely nature to the data?
User ExperienceIs there a timely nature to the experience?
Realtime is required when there's aNeed or Demand for:
Up to date informationInteraction to maintain engagement
These aren't new Needs orDemands
HTTP, Browsers & Servers made
it Difficult
What made it difficult?HTTP - request/response paradigmKeeping persistent HTTP connections aliveNo cross-browser XMLHttpRequest2 connection limitNo browser cross origin supportGeneral cross browser incompatibilities
Hacks & TricksJava AppletsFlashHTTP Hacks
Driving Forces behind the Hacks?
Realtime Going Mainstream
A Realisation & Demonstration of
Value
Accessible Realtime Technology
Improved Server PowerProcessors and Memory are cheaper & fasterMore data can be processesConnections can be dealt withScaling is easier
Web Browser Capabilities andConsistency
Cross browser XMLHTTPRequest supportCORSServer Sent Events / EventSourceWebSocketWebRTC
Software ChoiceLots of language & runtime optionsMore open source solutionsHosted services
Any Client Technology
Realtime Apps in 2014
Notifications & Signalling
Internet ^5 Machine
0:48
talky.io
Receive message
var sock = new SockJS( 'http://localhost:9999/sockjs' );
sock.onmessage = function( e ) {
console.log( 'message', e.data );
};
Send Message
var http = require('http');
sockjs = require('sockjs');
var hello = sockjs.createServer();
hello.on( 'connection' , function( conn ) {
conn.write( 'hello SockJS' );
} );
var server = http.createServer();
hello.installHandlers( server, { prefix:'/sockjs' } );
server.listen( 9999, '0.0.0.0' );
Simple Messaging SolutionsServer/Server
WebHooksClient/Server
WebSocket-only or HTTP-only solutions
Peer-to-Peer
SockJSEngine.IOPrimus
simpleWebRTCPeerJS
Lots of Data
0:55
Subscribe
var pusher = new Pusher( APP_KEY );
var channel = pusher.subscribe( 'game-overview' );
channel.bind( 'goal_scored', function( data ) {
// Handle Update
} );
channel.bind( 'time_updated', function( data ) {
} );
Publish
var pusher = new Pusher( APP_KEY );
var data = { team_id = 'manchester_city',
goals_scored: 2,
goal_scorer: 'Sergio Agüero' };
pusher.trigger( 'game-overview', 'goal_scored', data );
PubSub SolutionsSelf Hosted
Hosted
Socket.IOFayeXSockets
GoInstantHydnaPubNubPusherRealtime.co
Complex Client/Server
Interactions
Server
public class GameHub : Hub {
public void Move(Player p, int x, int y) {
// Check if move is allowed
// Call the broadcastMessage method to update clients.
Clients.All.playerMoved(p, x, y);
}
}
Client
$.connection.hub.start(); // async
var game = $.connection.gameHub;
game.client.playerMoved = function (player, x, y) {
// update game
};
game.server.move( me, x, y );
RMI SolutionsSelf Hosted:
Hosted:SignalR on Windows Azure?
dNodeSignalRJava.rmi
Collaborating on Data
Physical Collaborative Mapping
1:10
DataSync
var myDataRef = new Firebase('https://my-app.firebaseio.com/');
myDataRef.push( {creator: '@leggetter', text: 'Not a Test!'} );
myDataRef.on( 'child_added', function(snapshot) {
// Add the data
});
myDataRef.on( 'child_changed', function(snapshot) {
// Update the data
});
myDataRef.on( 'child_removed', function(snapshot) {
// Remove the data
});
Data Sync SolutionsSelf Hosted:
+ Hosted:
DerbyJSMeteorCouchDB pouchdb
FirebaseGoogle Drive Realtime APIGoInstantRealtime.coSimperium
Choosing a Solution
Beyond
Network InfrastructureReliablitySpeedBeyond HTTP
More "Things"!
0:32
And APIs...
Use RealtimeTwilioSendGridMailChimpIron.ioGitHubTrello...
APIs for APIsFanout.io
IoT PlatformsSmartThingsNinjaBlocksEvryThingSKYNET.im
MQTT
MQTT is a machine-to-machine(M2M)/"Internet of Things"connectivity protocol.
MQTTHiveMQEclipse Paho
Multi-Device Experiences
Watch_Dogs
1:07
Realtime Internet Apps =
Internet of Things =
Web Browsers +Web Servers +Native Apps +
Devices +
Thanks!
Questions?
Phil @leggetterBladeRunnerJS
j.mp/realtime-sotr14j.mp/realtime-tech-guide
Recommended
