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
640
WebSockets (jsday)
Igor Wiedler
May 17, 2012
Tweet
Share
More Decks by Igor Wiedler
See All by Igor Wiedler
Redis Bedtime Stories
igorw
1
240
Wide Event Analytics (LISA19)
igorw
4
890
a day in the life of a request
igorw
0
100
production: an owner's manual
igorw
0
130
The Power of 2
igorw
0
230
LISP 1.5 Programmer's Manual: A Dramatic Reading
igorw
0
350
The Moral Character of Software
igorw
1
240
interdisciplinary computing (domcode)
igorw
0
250
miniKanren (clojure berlin)
igorw
1
240
Other Decks in Programming
See All in Programming
Modern Angular with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
170
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
440
画像でわかる北島直樹
naoki0917
0
110
文化が生産性を作る
jimpei
3
620
DevFest Android in Korea 2024 - 안드로이드의 문단속 : 앱을 지키는 암호화 이야기
mdb1217
1
180
ActiveRecordの力でDBのメタデータを迅速に解析する
lnit
5
2k
Повторное использование кода в ML: почему ML-пайплайны могут помочь?
lamodatech
0
380
Vaporモードを大規模サービスに最速導入して学びを共有する
kazukishimamoto
3
1.1k
NEWTにおけるiOS18対応の進め方
ryu1sazae
0
330
急速に利用拡大を続ける飲食店向けサービスで 店内端末同士のローカル通信を追加設定なしで実現した話
whatasoda
0
140
CSC509 Lecture 06
javiergs
PRO
0
130
CSC509 Lecture 07
javiergs
PRO
0
130
Featured
See All Featured
Happy Clients
brianwarren
97
6.7k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Into the Great Unknown - MozCon
thekraken
31
1.4k
The World Runs on Bad Software
bkeepers
PRO
65
11k
How to train your dragon (web standard)
notwaldorf
87
5.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
9
630
Unsuck your backbone
ammeep
668
57k
The Cost Of JavaScript in 2023
addyosmani
43
5.9k
Why Our Code Smells
bkeepers
PRO
334
57k
Rails Girls Zürich Keynote
gr2m
93
13k
Automating Front-end Workflow
addyosmani
1365
200k
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