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
660
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
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
140
PipeCDのプラグイン化で目指すところ
warashi
1
300
AIともっと楽するE2Eテスト
myohei
8
3k
効率的な開発手段として VRTを活用する
ishkawa
0
160
ニーリーにおけるプロダクトエンジニア
nealle
0
930
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
610
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
260
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
580
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
230
ふつうの技術スタックでアート作品を作ってみる
akira888
1
1.3k
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
200
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Six Lessons from altMBA
skipperchong
28
3.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
750
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
GraphQLとの向き合い方2022年版
quramy
49
14k
The Pragmatic Product Professional
lauravandoore
35
6.7k
GitHub's CSS Performance
jonrohan
1031
460k
Designing for Performance
lara
610
69k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Thoughts on Productivity
jonyablonski
69
4.7k
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