Streamdata.io logo Human Talks

WebSockets & Server-Sent Events

Pourquoi ? Comment ?

@ctranxuan

WebSockets

Push techno
W3C
2008

Server-Sent Events

Push techno
W3C
2006

WebSockets

bi-directional / full-duplex protocol

Server-Sent Events

Server push to client protocol

WebSockets

TCP
low-level protocol
HTTP upgrade handshake

								
GET /chat HTTP/1.1
Host: example.com:8000
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13

Server-Sent Events

								
GET /stream HTTP/1.1 1
Host: example.com
Accept: text/event-stream

WebSockets

proxies and load balancers reconfiguration

proxies reconfiguration

be kind with the ops for the reconfiguration

Server-Sent Events

No need to reconfigure!
(it's HTTP)

WebSockets

Server-Sent Events

reconnection mechanism + retry

WebSockets

binary + text

native support browsers

Server-Sent Events

text

API
SSE	6.0	6.0	not supported	5.0	11.5

… but polyfills

https://goo.gl/cCMIGf Edge needs you: vote for SSE support!

https://goo.gl/HjJDIv

Maximum browser connections per server/proxy

WebSockets


3237	200	128	2970	900

beware of DOS!

Server-Sent Events


HTTP SSE	6	6	8	6	6

a solution is coming: multiplexing HTTP connections with HTTP/2

WebSockets

Server-Sent Events

custom headers not supported

=> use query params

WebSockets

var websocket =
  new WebSocket('ws://mywebsocketserver/echo');
websocket.onopen = function () {
	...
};

websocket.onmessage = function (e) {
	...
};

websocket.onerror = function (error) {
	...
};

Server-Sent Events

var eventSource =
  new EventSource('http://mysseserver/echo');
eventSource.onopen = function () {
	...
};

eventSource.onmessage = function (e) {
	...
};

eventSource.onerror = function (error) {
	...
};
source.addEventListener('foo', function(e) {
  ...
}, false);