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
1k
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
380
KRTConf: WebSockets & Sub-Protocols
miksago
1
730
Reject.js: The Future is Realtime
miksago
3
550
Cognac.js - Testing on the Rocks
miksago
2
170
London Ajax: The Future Is Realtime
miksago
3
170
LDNJS 05 - Node
miksago
6
280
Other Decks in Programming
See All in Programming
NPOでのDevinの活用
codeforeveryone
0
730
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
6.1k
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
260
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
670
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
GraphRAGの仕組みまるわかり
tosuri13
8
520
Team operations that are not burdened by SRE
kazatohiei
1
300
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
130
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
3
3.3k
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
160
CursorはMCPを使った方が良いぞ
taigakono
1
220
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
A designer walks into a library…
pauljervisheath
207
24k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Being A Developer After 40
akosma
90
590k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Code Review Best Practice
trishagee
69
18k
Producing Creativity
orderedlist
PRO
346
40k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
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