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
260
Wide Event Analytics (LISA19)
igorw
4
900
a day in the life of a request
igorw
0
110
production: an owner's manual
igorw
0
140
The Power of 2
igorw
0
260
LISP 1.5 Programmer's Manual: A Dramatic Reading
igorw
0
380
The Moral Character of Software
igorw
1
250
interdisciplinary computing (domcode)
igorw
0
260
miniKanren (clojure berlin)
igorw
1
250
Other Decks in Programming
See All in Programming
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
210
2025.2.14_Developers Summit 2025_登壇資料
0101unite
0
200
Ruby on cygwin 2025-02
fd0
0
180
ABEMA iOS 大規模プロジェクトにおける段階的な技術刷新 / ABEMA iOS Technology Upgrade
akkyie
1
140
技術を改善し続ける
gumioji
0
120
たのしいSocketのしくみ / Socket Under a Microscope
coe401_
8
1.3k
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.2k
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
170
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
1
210
Kotlinの開発でも AIをいい感じに使いたい / Making the Most of AI in Kotlin Development
kohii00
5
1.3k
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
150
未経験でSRE、はじめました! 組織を支える役割と軌跡
curekoshimizu
1
160
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
How GitHub (no longer) Works
holman
314
140k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
RailsConf 2023
tenderlove
29
1k
Mobile First: as difficult as doing things right
swwweet
223
9.4k
It's Worth the Effort
3n
184
28k
GitHub's CSS Performance
jonrohan
1030
460k
Speed Design
sergeychernyshev
27
810
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