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
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
260
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
190
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
120
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
450
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
PicoRuby on Rails
makicamel
2
130
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
120
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
530
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
360
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
120
Featured
See All Featured
BBQ
matthewcrist
89
9.7k
Documentation Writing (for coders)
carmenintech
72
4.9k
Six Lessons from altMBA
skipperchong
28
3.9k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
Visualization
eitanlees
146
16k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
The Pragmatic Product Professional
lauravandoore
35
6.7k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
4 Signs Your Business is Dying
shpigford
184
22k
Gamification - CAS2011
davidbonilla
81
5.4k
Building an army of robots
kneath
306
45k
Designing Experiences People Love
moore
142
24k
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