Web browsers & the realtime web
-
Upload
phil-leggetter -
Category
Technology
-
view
1.589 -
download
5
description
Transcript of Web browsers & the realtime web
Web Browsers &the Realtime Web
the past, present & future
Techmeetup Edinburgh 08/02/2012
Who is this guy?Phil Leggetter
www.leggetter.co.uk
@leggetter
Developer Evangelist at Pusher
OverviewWhat is Realtime & the Realtime web
History of browsers & the Realtime web*
What technology can we use now?
Future
Questions
* according to me
What is Realtime?
Source: Wikipedia: Realtime Computing
What is the Realtime web?
systems that are subject to a "real-time constraint"— e.g. operationaldeadlines from event to system response
The real-time web is a set of technologies and practices that enableusers to receive information as soon as it is published by its authors,rather than requiring that they or their software check a sourceperiodically for updates.
Source: Wikipedia: Realtime web
Publish & Subscribe
aliens
+Phil Search Images Videos Maps News Shopping Gmail More
Why the Realtime Webmatters
Opportunity
Convenience
Interaction
Engagement
History (according to me)My first Job = WOW!
Java Applets
<APPLET CODE="real_time_stuff.class" WIDTH=150 HEIGHT=15 MAYSCRIPT>
LiveConnect"Allows Java and JavaScript software tointercommunicate within a Web page"
Applets were a problem.Microsoft had to drop support their JVM (were sued).
Sun Microsystems releases kept breaking stuff.
Users/Sys adminsdidn't want toinstall plugins!
<frame> Polling
Source
<frame> LongPolling
Source
<frame> Streaming
Source
XMLHttpRequestIE5 in 1999 via ActiveX
Slowly but surely adopted by all web browser
AllowsPolling
LongPolling
Streaming
AJAX term coined in 2005The term Ajax was coined on 18 February 2005 byJesse James Garrett in an article entitled "Ajax: A NewApproach to Web Applications"
W3C working draft in 2006That's how fast technology used to move!
Crossdomain restrictionswww.example.com > www.example.com √subdomain.example.com > www.example.com√*www.example.com > www.leggetter.co.uk X**CORS (Cross Origin Resource Sharing)
Problem: Browser support (FF3.6+, IE8+ etc.)
* you need to set document.domain to be 'example.com'
** there are ways around this with JSONP
CometTerm 'coined' in 2006 by Alex Russell
Comet is a web application model inwhich a long-held HTTP request allows aweb server to push data to a browser,without the browser explicitly requestingit. Comet is an umbrella term,encompassing multiple techniques forachieving this interaction.
WebSocketsA protocol and an API
Single bidirectional connection
Supports cross domain communication
var ws = new WebSocket("ws://mywebsocketserver.com:80");ws.onopen = function() { // connection established};
ws.onmessage = function(data) { // receive a message ws.send("Yep, got: " + data); // send a message
ws.close();};
ws.onclose = function(ev) {};ws.onerror = function() {}; // ?
What can we use now?HTTP Polling ç
HTTP LongPolling ç
HTTP Streaming √HTML5 WebSockets √*
* See next slide
ß Boo!
Also checkout: http://html5please.us | http://caniuse.com | http://html5readiness.com
WebSocket Support
Can use on IE6, IE7, IE8, IE9 and other oldermainstream browsers with websocketjs Polyfil
Can use on Android with FlashLite or usingFirefox for Android and probably Chrome forAndroid.
Source: http://caniuse.com
How is thistechnology being
used now?
Realtime dataSports, Finance, betting, grids etc.
NotificationsAlerts or systemevents e.g. long runningprocess has completed (asyncweb).
Realtime comments
Activity streams
Live blogging
ChatProbably the No.1 use case
CollaborationDocument collaboration and synchronisation
Social TV2nd screen experiences, 2Screen, Sit forwardTV
Multiplayer GamesGame actions
Player/object moves, etc
Game state changes
WordSquared
WordSquared (Map)
Iso City
Built on Isogenic Engine
Free Civ
Not available anymore don't know why
Rawkets
Built by Rob Hawkes: Technology Evangelist at Mozilla.
Sierra Games
TechnologiesSelf Hosted:
socket.io node.js
SockJS Client library with multiple server options(node.js/erlang/lua/python)
FAYE node.js/ruby
XSockets .NET
PHP developer? No chance! Well, there are a few options.
Hosted (platform agnostic)Pusher
There might be others :o)
Full Guide here:http://www.leggetter.co.uk/realtimewebtechnologiesguide
The future of Realtime Webtechnology
WebSocketsFull native browser support
Not just web browsers
UX considerations
Performance considerations
WebHooksWe still live in a HTTP World
Realtime server to server communication
The Internet of Things
Arduino's taking over theWorld!
Questions?/ThanksI'm putting together a realtime web workshop. Ifyou are interested in attending please give me ashout.
Pusher (@pusher) are hiringhttp://pusher.com/jobs
Mobile Evangelist, Developer Evangelist, Engineer,Head of Ops
Phil Leggetter, @leggetter