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
WebSockets (jsday)
Search
Igor Wiedler
May 17, 2012
Programming
8
650
WebSockets (jsday)
Igor Wiedler
May 17, 2012
Tweet
Share
More Decks by Igor Wiedler
See All by Igor Wiedler
Redis Bedtime Stories
igorw
1
290
Wide Event Analytics (LISA19)
igorw
4
910
a day in the life of a request
igorw
0
130
production: an owner's manual
igorw
0
150
The Power of 2
igorw
0
280
LISP 1.5 Programmer's Manual: A Dramatic Reading
igorw
0
400
The Moral Character of Software
igorw
1
260
interdisciplinary computing (domcode)
igorw
0
270
miniKanren (clojure berlin)
igorw
1
280
Other Decks in Programming
See All in Programming
Hack Claude Code with Claude Code
choplin
4
2.1k
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
87
29k
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
160
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
820
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
5つのアンチパターンから学ぶLT設計
narihara
1
170
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
650
A2A プロトコルを試してみる
azukiazusa1
2
1.4k
NPOでのDevinの活用
codeforeveryone
0
840
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
Is Xcode slowly dying out in 2025?
uetyo
1
270
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Automating Front-end Workflow
addyosmani
1370
200k
Into the Great Unknown - MozCon
thekraken
40
1.9k
How to train your dragon (web standard)
notwaldorf
95
6.1k
Raft: Consensus for Rubyists
vanstee
140
7k
Six Lessons from altMBA
skipperchong
28
3.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Speed Design
sergeychernyshev
32
1k
Balancing Empowerment & Direction
lara
1
430
Transcript
WEBSOCKETS
• phpBB • Symfony2 • Silex • Composer igorw @igorwesome
None
WEBSOCKETS
WEB
Application HTTP Presentation TCP Session TCP Transport TCP Network IP
Data Link Physical
Application HTTP Presentation TCP Session TCP Transport TCP Network IP
Data Link Physical
HTTP
client
request client
reponse client request
GET / HTTP/1.1 Host: igor.io >
HTTP/1.1 200 OK Server: nginx Content-Type: text/html; charset=UTF-8 Transfer-Encoding: chunked
Connection: keep-alive cache-control: no-cache date: Mon, 14 May 2012 10:08:23 GMT Hello World! GET / HTTP/1.1 Host: igor.io > <
THIS IS A GOOD THING
BUT
NOT FOR EVERYTHING
UNIDIRECTIONAL
None
LATENCY
LATENCY KEEP-ALIVE PIPELINING SPDY
STATELESS
Application HTTP Presentation TCP Session TCP Transport TCP Network IP
Data Link Physical
Application HTTP Presentation TCP Session TCP Transport TCP Network IP
Data Link Physical
WEBSOCKETS
SOCKETS
WEBSOCKETS
PROTOCOL API
THE WEBSOCKET PROTOCOL
browser
None
GET /foo HTTP/1.1 Host: localhost Connection: Upgrade Upgrade: websocket Sec-WebSocket-Key:
ZQqy3/N7NzBwMak/2+aFIQ== Sec-WebSocket-Origin: ws://localhost:8080/foo Sec-WebSocket-Version: 13 >
GET /foo HTTP/1.1 Host: localhost Connection: Upgrade Upgrade: websocket Sec-WebSocket-Key:
ZQqy3/N7NzBwMak/2+aFIQ== Sec-WebSocket-Origin: ws://localhost:8080/foo Sec-WebSocket-Version: 13 HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: p5XeX6xlMI7WflwlN4B8OFqdWPA= > <
• Handshake / Upgrade • TCP + framing • Proxies
• Supports TLS (SSL)
None
RFC 6455
COMET
THE WEBSOCKET API
browser
None
var ws = new WebSocket('ws://example.org:8080/updates'); ws.onopen = function () {
ws.send('hello'); }; ws.onmessage = function (event) { console.log(event.data); };
JS INTERFACE • WebSocket • onopen • onmessage • onerror
• onclose • binaryType • MessageEvent • data
browser API PROTOCOL
USE CASES •Games •Notifications •Collaboration •Statistics •Chat
4.0+ (2009) 6.0+ (2011) 10.70+ (2012) 5.0+ (2010) 10+ (2012)
• transport abstraction (fallbacks) • broadcasting, reconnection, serialization, other stuff
• monolithic! (and almost trying to fix it)
SOCKJS
TRANSPORTS • Native WebSocket • Streaming • Polling
TRANSPORTS • Native WebSocket (RFC6455, hixie-76, hybi-10) • Streaming (xhr-streaming,
xdr-streaming, iframe-eventsource, iframe-htmlfile) • Polling (xhr-polling, xdr-polling, iframe-xhr-polling, jsonp- polling)
None
ASYNC STACK Connect (fix it, sencha) Express SockJS
ASYNC STACK ? ? SockJS
ASYNC STACK EventMachine ? ? SockJS
ASYNC STACK ? ? SockJS
Y U NO PHP?
SYNC STACK Application
SYNC STACK Application
ASYNC Connect (fix it, sencha) Express SockJS SYNC Application
None
None
*MQ
*MQ Sync Async
DEMO
•Pub/Sub •RPC MESSAGING PATTERNS
None
None
NULLMQ
DEBUGGING •printf •chrome inspector •wssh •ngrep •zmqc
RECAP • Use SockJS • Polyglot is the future •
Learn from the MQs
LINKS • tools.ietf.org/html/rfc6455 • dev.w3.org/html5/websockets • developer.mozilla.org/en/WebSockets (fix it) •
sockjs.org • github.com/igorw/websockets-talk
github.com/igorw/websockets-talk
CREDITS • thenounproject.com • stopwatch
Questions? @igorwesome speakerdeck.com /u/igorw joind.in/6421