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
Real-Time with Flowdock
Search
lautis
March 28, 2012
Programming
2
190
Real-Time with Flowdock
lautis
March 28, 2012
Tweet
Share
More Decks by lautis
See All by lautis
Architecture with NoSQL: Experiences of a SaaS startup
lautis
4
730
Other Decks in Programming
See All in Programming
NPOでのDevinの活用
codeforeveryone
0
870
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
1k
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
8.2k
AIともっと楽するE2Eテスト
myohei
8
2.9k
効率的な開発手段として VRTを活用する
ishkawa
0
150
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1.1k
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
160
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
6.7k
生成AI時代のコンポーネントライブラリの作り方
touyou
1
260
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
5
650
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
580
すべてのコンテキストを、 ユーザー価値に変える
applism118
4
1.4k
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Making Projects Easy
brettharned
116
6.3k
Raft: Consensus for Rubyists
vanstee
140
7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Agile that works and the tools we love
rasmusluckow
329
21k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Designing for Performance
lara
610
69k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
We Have a Design System, Now What?
morganepeng
53
7.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Practical Orchestrator
shlominoach
189
11k
Transcript
Real-Time with Thursday, March 15, 12
@lautis Thursday, March 15, 12
“There’s no time like real-time” Thursday, March 15, 12
Demo Thursday, March 15, 12
Stream changes from backend And send messages Thursday, March 15,
12
Thursday, March 15, 12
Long-polling XHR-streaming HTMLFile WebSocket Server-Sent Events JSONP streaming XHR multipart
Thursday, March 15, 12
3 implementations with 7 transports Thursday, March 15, 12
Long-polling Thursday, March 15, 12
Long-polling HTTP/1.1 200 OK Content-Type: application/json; Thursday, March 15, 12
Long-polling HTTP/1.1 200 OK Content-Type: application/json; [{'content': 'json'}] Thursday, March
15, 12
XHR-streaming Thursday, March 15, 12
XHR-streaming HTTP/1.1 200 OK Thursday, March 15, 12
XHR-streaming HTTP/1.1 200 OK {'content': 'json'} Thursday, March 15, 12
XHR-streaming HTTP/1.1 200 OK {'content': 'json'} {'content': 'json'} Thursday, March
15, 12
XHR-streaming HTTP/1.1 200 OK {'content': 'json'} {'content': 'json'} {'content': 'json'}
Thursday, March 15, 12
Server-Sent Events Thursday, March 15, 12
Server-Sent Events HTTP/1.1 200 OK Content-Type: text/event-stream Thursday, March 15,
12
Server-Sent Events HTTP/1.1 200 OK Content-Type: text/event-stream data: {'content': 'json'}
Thursday, March 15, 12
Server-Sent Events HTTP/1.1 200 OK Content-Type: text/event-stream data: {'content': 'json'}
id: 2 data: {'content': 'json'} Thursday, March 15, 12
Server-Sent Events HTTP/1.1 200 OK Content-Type: text/event-stream data: {'content': 'json'}
id: 2 data: {'content': 'json'} Sent to server on reconnect Thursday, March 15, 12
In JavaScript var es = new EventSource('/events'); es.onmessage = function
(e) { console.log(JSON.parse(e.data)); }; Thursday, March 15, 12
Built-in in modern browsers Thursday, March 15, 12
No IE Thursday, March 15, 12
No Android Thursday, March 15, 12
Use shim instead https://github.com/Yaffle/EventSource Thursday, March 15, 12
Streams are unidirectional Thursday, March 15, 12
Sockets are bidirectional Thursday, March 15, 12
WebSockets var socket = new WebSocket('/socket'); socket.onmessage = function (e)
{ console.log(JSON.parse(e.data)); }; Thursday, March 15, 12
WebSockets var socket = new WebSocket('/socket'); socket.onmessage = function (e)
{ console.log(JSON.parse(e.data)); }; socket.onopen = function() { var m = {'content': 'json'}; socket.send(JSON.stringify(m)); } Thursday, March 15, 12
Caveats Thursday, March 15, 12
Caveats •Limited browser support Thursday, March 15, 12
Caveats •Limited browser support •Proxy problems Thursday, March 15, 12
Caveats •Limited browser support •Proxy problems •Safari crashes when used
with Proxy Auto-Configuration Thursday, March 15, 12
Socket.IO “It's care-free realtime 100% in JavaScript.” Thursday, March 15,
12
Bugs Thursday, March 15, 12
•Reconnection race-conditions Bugs Thursday, March 15, 12
•Reconnection race-conditions •Infinite loops with XHR-polling Bugs Thursday, March 15,
12
•Reconnection race-conditions •Infinite loops with XHR-polling •DOM Exception 11 Bugs
Thursday, March 15, 12
Socket.IO “It's care-free realtime 100% in JavaScript.” care-free Thursday, March
15, 12
Socket.IO “It's care-free realtime 100% in JavaScript.” Thursday, March 15,
12
Why bother? Thursday, March 15, 12
Science! It Works, Bitches. Thursday, March 15, 12
Latency matters Thursday, March 15, 12
Round-trip latency Thursday, March 15, 12
Round-trip latency Ping XHR-streaming WebSocket 0 75 150 225 300
Thursday, March 15, 12
Round-trip latency Ping XHR-streaming WebSocket 0 75 150 225 300
Thursday, March 15, 12
Round-trip latency Ping XHR-streaming WebSocket 0 75 150 225 300
Thursday, March 15, 12
Round-trip latency Ping XHR-streaming WebSocket 0 75 150 225 300
Thursday, March 15, 12
Real-world metrics from Flowdock Thursday, March 15, 12
96% use WebSockets Thursday, March 15, 12
96% use WebSockets No Flash fallback Thursday, March 15, 12
3% have obsolete browsers Thursday, March 15, 12
1% have network issues Thursday, March 15, 12
1% have network issues (or have disabled WebSockets) Thursday, March
15, 12
Network still sucks Thursday, March 15, 12
Render optimistically Thursday, March 15, 12
Basic operations in Flowdock Thursday, March 15, 12
1.Post new stuff Basic operations in Flowdock Thursday, March 15,
12
1.Post new stuff 2.Receive new stuff Basic operations in Flowdock
Thursday, March 15, 12
1.Post new stuff 2.Receive new stuff 3.Modify existing stuff Basic
operations in Flowdock Thursday, March 15, 12
Posting messages Thursday, March 15, 12
•Clients process messages as much as possible Posting messages Thursday,
March 15, 12
•Clients process messages as much as possible •Server adds unique
ID and timestamp to data Posting messages Thursday, March 15, 12
•Clients process messages as much as possible •Server adds unique
ID and timestamp to data •Message echoed to client Posting messages Thursday, March 15, 12
SUP LOL Order sync Thursday, March 15, 12
SUP LOL FOO Order sync Thursday, March 15, 12
SUP LOL FOO BAR Order sync Thursday, March 15, 12
SUP LOL FOO BAR Order sync Thursday, March 15, 12
SUP LOL FOO BAR FOO Order sync Thursday, March 15,
12
SUP LOL FOO BAR FOO Order sync Thursday, March 15,
12
Modifying stuff •Add/remove tag to message •Mark message as deleted
Thursday, March 15, 12
"Operation, which can be applied multiple times without changing the
result beyond the initial application." Idempotent changes Thursday, March 15, 12
Error handling is tricky Thursday, March 15, 12
Protips •Socket.IO will bite you •SSE is safe choice for
streaming •Design for broken internet Thursday, March 15, 12
Thanks! Thursday, March 15, 12