Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
LWPG: The Future Is Realtime
Search
miksago
October 20, 2011
Programming
4
990
LWPG: The Future Is Realtime
A slightly more technical version of the The Future Is Realtime talk I've been doing recently.
miksago
October 20, 2011
Tweet
Share
More Decks by miksago
See All by miksago
Introducing Realtime - Node.js Dublin
miksago
3
370
KRTConf: WebSockets & Sub-Protocols
miksago
1
680
Reject.js: The Future is Realtime
miksago
3
510
Cognac.js - Testing on the Rocks
miksago
2
170
London Ajax: The Future Is Realtime
miksago
3
160
LDNJS 05 - Node
miksago
6
280
Other Decks in Programming
See All in Programming
Git Lint
bkuhlmann
4
750
Tailwind CSSを本気でカスタマイズする方法
fsubal
14
5.3k
エンターテイメント業界で利用されるAWS
demuyan
0
210
Elm Form Validation
bkuhlmann
0
510
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
900
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
430
Ruby Pattern Matching
bkuhlmann
0
930
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
210
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
9
4.1k
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
130
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
860
Featured
See All Featured
Gamification - CAS2011
davidbonilla
76
4.6k
Bash Introduction
62gerente
604
210k
The Illustrated Children's Guide to Kubernetes
chrisshort
31
46k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.5k
How to name files
jennybc
65
93k
The Art of Programming - Codeland 2020
erikaheidi
42
12k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
Agile that works and the tools we love
rasmusluckow
325
20k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
17
1.4k
Art, The Web, and Tiny UX
lynnandtonic
289
19k
Transcript
Micheil Smith - @miksago The future is realtime
I work at Pusher BUILDING THE REALTIME WEB
• Part 1: Background & History • Part 2: Using
the Realtime Web
• Part 1: Background & History • Part 2: Using
the Realtime Web
• Part 1: Background & History • Overview of the
past • The Shift to Realtime • Realtime Web in Action
• Overview of the past • The Shift to Realtime
• Realtime Web in Action
• Early web • PHP / LAMP Stack • MVC
• Social Web Overview of the past
http://www.mikealrogers.com/posts/a-new- direction-for-web-applications-.html Overview of the past
• Overview of the past • The Shift to Realtime
• Realtime Web in Action
The Shift to Realtime • The web has become more
interactive • Users expect things to be “now” • And why should they have to wait?
• We researched page-load time • We used AJAX to
decrease wait-time on interactions • We then tried to simulate “realtime” with AJAX and related technologies The Shift to Realtime
The Simulations of Realtime • HTTP Polling • LiveConnect •
Forever iFrame • XHR Long-polling • XHR Streaming
A more complete history http://blog.pusher.com/2011/8/10/what- came-before-websockets
Going Properly Realtime • HTML5 Introduces many new API’s •
One of those is WebSockets
What are WebSockets? • Bi-directional socket connection between browser and
server • API is fairly low level • Low-latency/high-frequency messaging
The Uses of WebSockets • Progressively Realtime Applications • Entirely
Realtime Applications • Multiplayer HTML5 Gaming
• Overview of the past • The Shift to Realtime
• Realtime in Action
Progressively Realtime Apps CloudApp Tastebuds
Collaborative Editing Codr.cc Google Docs
Realtime Analytics Guag.es
Realtime HTML5 Gaming Rawkets Metris
There’s a lot more uses...
...and even more that we haven’t thought of yet.
• Part 1: Background & History • Part 2: Using
the Realtime Web
var socket = new WebSocket('ws://localhost:8080/') socket.onopen = function() { /*...*/
}; socket.onmessage = function(messageEvent) { /*...*/ }; socket.onclose = function(closeEvent) { /*...*/ }; socket.onerror = function() { /*...*/ }; socket.send('my data'); The WebSocket API
var socket = new WebSocket(url, protocol) var socket = new
WebSocket(url, [protocol1, protocol2]) socket.addEventListener('open', function() { /*...*/ }); socket.addEventListener('message', /*...*/ ); socket.addEventListener('close', /*...*/ ); socket.addEventListener('error', /*...*/ ); The WebSocket API (alt)
WebSocket Servers • worlize/WebSocket-node • miksago/node-websocket-server • oberstet/Autobahn (python) •
igrigorik/em-websocket (ruby) • Jetty/7.5.2 (java) • ostinelli/misultin (erlang)
Warning! There are currently multiple versions of WebSockets supported by
Browsers, not all of the previously listed Servers support all the versions.
Extra’s!
Portland, OR 7th & 8th November http://krtconf.com Keeping It Realtime
Conference
Questions?
Thanks for listening! @miksago on Twitter / Github / Geekli.st