Downloaded 25 times
![Receive message
var socket = new eio.Socket('ws://localhost/');
socket.on('open', function(){
socket.on('message', function(data){
console.log(data);
});
});
Send Message
var engine = require('engine.io');
var server = engine.listen(80);
server.on('connection', function(socket){
socket.send('utf 8 string');
socket.send(new Buffer([0, 1, 2, 3, 4, 5])); // binary data
})
55 / 114](https://image.slidesharecdn.com/real-timewebappsin2015beyond-150718161546-lva1-app6891/75/Real-Time-Web-Apps-in-2015-Beyond-55-2048.jpg)
Uploaded byPhil Leggetter
Real-Time Web Apps in 2015 & Beyond
1) Real-time capabilities on the web have improved due to factors like increased internet usage, better server infrastructure, and more consistent browser capabilities. 2) Many applications now effectively require real-time functionality to provide up-to-date information and engage users. Real-time is becoming an expected part of the user experience. 3) Emerging technologies like the Internet of Things and event streaming APIs will further drive real-time experiences across more domains in the future. Real-time capabilities will continue integrating into more areas of applications and systems.
More Related Content
Similar to Real-Time Web Apps in 2015 & Beyond
Real-Time Web Apps in 2015 & Beyond
- 1. Real-Time Web Appsin 2015 & Beyond PHIL @LEGGETTER Head of Evangelism pusher.com 1 / 114 @leggetter
- 2. A bit aboutme Working with Real-Time Tech since 2001 Software Engineer APIs, SDKs, Docs, Developer Experience Blogger & Author Roles: Caplin Systems ESRI Caplin Systems Pusher Caplin Systems/BladeRunnerJS Pusher 2 / 114
- 3.
- 4.
- 5. Realtime Web Apps 5/ 114
- 6.
- 7. Realtime Web Apps ↓ s/Web/Internet ↓ RealtimeInternet Apps 7 / 114
- 8.
- 9.
- 10.
- 11.
- 12. When do weneed Realtime? 12 / 114
- 13. Data Is there atimely nature to the data? 13 / 114
- 14. You Have Real-TimeData Events === Real-Time Data Data Changes System Interactions User Interactions 14 / 114
- 15.
- 16. User Experience Is therea timely nature to the experience? 16 / 114
- 17. Realtime is requiredwhen there's a Need or Demand for: Up to date information Interaction to maintain engagement (UX) 17 / 114
- 18. These aren't newNeeds or Demands But... 18 / 114
- 19.
- 20.
- 21.
- 22. HTTP was better.But many wanted more. 22 / 114
- 23.
- 24.
- 25.
- 26.
- 27. HTTP wasn't enough! HTTP- request/response paradigm Keeping persistent HTTP connections alive No cross-browser XMLHttpRequest 2 connection limit No browser cross origin support General cross browser incompatibilities 27 / 114
- 28. Hacks & Tricks JavaApplets Flash HTTP Hacks 28 / 114
- 29. 5 Things thathave made Real-Time Mainstream? 29 / 114
- 30.
- 31. 2. Improved ServerPower Processors and Memory are cheaper & faster More data can be processes Connections can be dealt with (C10k problem) Scaling is easier 31 / 114
- 32. 3. Web BrowserCapabilities and Consistency Cross browser XMLHTTPRequest support CORS Server Sent Events / EventSource WebSocket WebRTC 32 / 114
- 33.
- 34.
- 35. 4. Software Choice Lotsof language & runtime options More open source solutions Hosted services 35 / 114
- 36. 5. MASSIVE Increasein Internet Usage 36 / 114
- 37.
- 38. Internet Usage (perday) 200 billion emails 38 / 114
- 39. Internet Usage (perday) 200 billion emails 7 million blog posts written† 500 million tweets 39 / 114
- 40. Internet Usage (perday) 200 billion emails 7 million blog posts written† 500 million tweets 55 million Facebook status updates 5 billion Google+ +1's 60 million Instagram photos posted 2 billion minutes spent on Skype 33 million hours of Netflix watched 200 million hours of YouTube watched 40 / 114
- 41.
- 42.
- 43. Max Williams (@maxthelion)- CEO, Pusher “I'm not sure I believe that there is such a thing as "realtime apps" any more. Apps either update instantly and smoothly, or they appear broken. I feel that "realtime" as a feature has moved down the Kano graph. It is much more of an expectation, than an "exciter". 43 / 114
- 44.
- 45. Real-Time is Essentialbecause... 45 / 114
- 46.
- 47. The Internet... 1. isthe communications platform 47 / 114
- 48. The Internet... 1. isthe communications platform 2. is becoming the entertainment platform 48 / 114
- 49. Realtime Apps in2015 49 / 114
- 50. Realtime Apps in2015 Communication Patterns Use Cases 50 / 114
- 51. Simple Messaging Notifications &Signalling 51 / 114
- 52.
- 53. 0:00 53 /114 Internet ^5 Machine
- 54.
- 55. Receive message var socket= new eio.Socket('ws://localhost/'); socket.on('open', function(){ socket.on('message', function(data){ console.log(data); }); }); Send Message var engine = require('engine.io'); var server = engine.listen(80); server.on('connection', function(socket){ socket.send('utf 8 string'); socket.send(new Buffer([0, 1, 2, 3, 4, 5])); // binary data }) 55 / 114
- 56.
- 57.
- 58. PubSub (Complex Data) ActivityStreams Live Polls/Surveys Data Visualizations Chat 58 / 114
- 59.
- 60.
- 61.
- 62. PubSub Subscribe var client =new Faye.Client('http://localhost:8000/'); client.subscribe('/messages', function(message) { alert('Got a message: ' + message.text); }); Publish client.publish('/messages', {text: 'Hello world'}); 62 / 114
- 63. Evented PubSub Subscribe var pusher= new Pusher( APP_KEY ); var channel = pusher.subscribe( 'messages' ); channel.bind( 'new_message', function( data ) { // Handle Update } ); channel.bind( 'message_updated', function( data ) { } ); Publish var data = {text: 'Hello world'}; pusher.trigger( 'messages', 'new_message', data ); 63 / 114
- 64. Self Hosted Socket.IO † Faye SocketStream XSockets† Hosted Hydna PubNub Pusher † Realtime.co PubSub Solutions † Evented PubSub solutions 64 / 114
- 65.
- 66. RPC/RMI Complex Client/Server Interactions UseCases? 66 / 114
- 67.
- 68.
- 69. 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 ); 69 / 114
- 70. Self Hosted: dNode (Node,PHP, Java, Ruby, Perl) eureca.io (Node) Java.rmi Meteor (Node) SignalR (.NET) SocketStream (Node.js) XSockets (.NET) Hosted: SignalR/Windows Azure? RPC/RMI Solutions 70 / 114
- 71.
- 72.
- 73.
- 74.
- 75. 0:00 75 /114 Physical Collaborative Mapping
- 76. 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 }); 76 / 114
- 77. Self Hosted: CouchDB +pouchdb DerbyJS LowlaDB Meteor ShareJS Hosted: Firebase Flybase Google Drive Realtime API Realtime.co Simperium Syncano Data Sync Solutions 77 / 114
- 78.
- 79. How do youchoose a solution? 79 / 114
- 80. Technology Considerations Team Skillset(language, infrastructure) Business Focus Native Mobile Support Stage of Development 80 / 114
- 81.
- 82.
- 83.
- 84. Watch my videos:) ForwardJS Feb 2015 FOWA London 2013 84 / 114
- 85.
- 86.
- 87. Standardized Communication Patterns & Protocols SocketIOprotocol DDP (Distributed Data Protocol) PubSub: MQTT? Evented PubSub? Other possible standards? 87 / 114
- 88.
- 89.
- 90. 0:00 90 /114
- 91. The Physical Web 91/ 114
- 92. IoT Platforms SmartThings NinjaBlocks -announcement EvryThing SKYNET.im -> Octoblu And many existing real-time services... 92 / 114
- 93.
- 94.
- 95.
- 96.
- 97.
- 98. Real-Time Experiences EvenMore Essential Data Audio & Video 98 / 114
- 99. Real-Time Use CaseEvolution Notifications & Signalling Activity Streams Data Viz & Polls Chat Collaboration Multiplayer Games 99 / 114
- 100. Notifications/Activity Streams ->Actions 100 / 114 The end of apps as we know it - Intercom
- 101.
- 102.
- 103.
- 104.
- 105.
- 106. 0:00 106 /114
- 107.
- 108. Summary Internet === Communicationsplatform 108 / 114
- 109. Summary Internet === Communicationsplatform Easier to innovate 109 / 114
- 110. Summary Internet === Communicationsplatform Easier to innovate Everybody has real-time data Use it to build expected experiences If not, your apps will feel broken 110 / 114
- 111. Summary Internet === Communicationsplatform Easier to innovate Everybody has real-time data Use it to build expected experiences If not, your apps will feel broken Future Improvements: Infrastructure & Standards IoT APIs Event Streams 111 / 114
- 112. Realtime Internet Apps=== Internet of Things === Web Browsers + Web Servers + Native Apps + Devices + ... 112 / 114
- 113. Real-Time Web Appsin 2015 & Beyond Thanks! Feedback & Questions! PHIL @LEGGETTER Head of Evangelism pusher.com 113 / 114
- 114. References Pusher These slides -leggetter.github.io/realtime-internet-apps/ Mary Meeker's internet trend report Kano model DDP Protocol Socket.IO protocol MQTT Real-Time Web Tech Guide The end of apps as we know them - Intercom 114 / 114