better websockets - server-sent events, a carefree alternative · a brief tour. generic server...
TRANSCRIPT
![Page 1: Better WebSockets - Server-Sent Events, a carefree alternative · A brief tour. Generic server implementation Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecd6d2db4aa2f226f0d078e/html5/thumbnails/1.jpg)
Better WebSockets - Server-Sent Events, a carefree alternative🐍 EuroPython - 12/07/2019 - Andrei Neagu @weetHK
![Page 2: Better WebSockets - Server-Sent Events, a carefree alternative · A brief tour. Generic server implementation Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecd6d2db4aa2f226f0d078e/html5/thumbnails/2.jpg)
About me (can you guess the city?)Work as an IT Technical Consultant
I like to travel and exploreAlso known as “typo master” at work
![Page 3: Better WebSockets - Server-Sent Events, a carefree alternative · A brief tour. Generic server implementation Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecd6d2db4aa2f226f0d078e/html5/thumbnails/3.jpg)
![Page 4: Better WebSockets - Server-Sent Events, a carefree alternative · A brief tour. Generic server implementation Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecd6d2db4aa2f226f0d078e/html5/thumbnails/4.jpg)
Schedule
SSE introduction
Inner workings
Differences from WebSockets
Implementation explanation for a generic HTTP server in Python
Some use cases
![Page 5: Better WebSockets - Server-Sent Events, a carefree alternative · A brief tour. Generic server implementation Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecd6d2db4aa2f226f0d078e/html5/thumbnails/5.jpg)
Raise hands time ✋ 👀
![Page 6: Better WebSockets - Server-Sent Events, a carefree alternative · A brief tour. Generic server implementation Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecd6d2db4aa2f226f0d078e/html5/thumbnails/6.jpg)
Server to client data delivery techniques
Polling
LongPolling
WebSockets
Server Sent Events
![Page 7: Better WebSockets - Server-Sent Events, a carefree alternative · A brief tour. Generic server implementation Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecd6d2db4aa2f226f0d078e/html5/thumbnails/7.jpg)
PollingThe dark ages
![Page 8: Better WebSockets - Server-Sent Events, a carefree alternative · A brief tour. Generic server implementation Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecd6d2db4aa2f226f0d078e/html5/thumbnails/8.jpg)
LongPollingSlightly less darker
![Page 9: Better WebSockets - Server-Sent Events, a carefree alternative · A brief tour. Generic server implementation Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecd6d2db4aa2f226f0d078e/html5/thumbnails/9.jpg)
WebSocketsThe cool kid, tend to stand out
![Page 10: Better WebSockets - Server-Sent Events, a carefree alternative · A brief tour. Generic server implementation Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecd6d2db4aa2f226f0d078e/html5/thumbnails/10.jpg)
Server Sent EventsNot that well known
(did you know that a Lavazza museum exist? And that I do not drink coffe?)
![Page 11: Better WebSockets - Server-Sent Events, a carefree alternative · A brief tour. Generic server implementation Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecd6d2db4aa2f226f0d078e/html5/thumbnails/11.jpg)
Connection wiseImage source: https://codeburst.io/polling-vs-sse-vs-websocket-how-to-choose-the-right-one-1859e4e13bd9
![Page 12: Better WebSockets - Server-Sent Events, a carefree alternative · A brief tour. Generic server implementation Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecd6d2db4aa2f226f0d078e/html5/thumbnails/12.jpg)
The simplest example
Javascript
Python
![Page 13: Better WebSockets - Server-Sent Events, a carefree alternative · A brief tour. Generic server implementation Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecd6d2db4aa2f226f0d078e/html5/thumbnails/13.jpg)
More on EventSource
Available handlers Usage in JS
![Page 14: Better WebSockets - Server-Sent Events, a carefree alternative · A brief tour. Generic server implementation Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecd6d2db4aa2f226f0d078e/html5/thumbnails/14.jpg)
More Python frameworks
There are some libraries for django
![Page 15: Better WebSockets - Server-Sent Events, a carefree alternative · A brief tour. Generic server implementation Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecd6d2db4aa2f226f0d078e/html5/thumbnails/15.jpg)
The internalsA brief tour
![Page 16: Better WebSockets - Server-Sent Events, a carefree alternative · A brief tour. Generic server implementation Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecd6d2db4aa2f226f0d078e/html5/thumbnails/16.jpg)
Generic server implementation
Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive
Server response headers
Body encoding in UTF-8 in the following format[field]: value\n
Field can have the following values- data- event- id- retry
: This is a comment ignored by browsers
![Page 17: Better WebSockets - Server-Sent Events, a carefree alternative · A brief tour. Generic server implementation Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecd6d2db4aa2f226f0d078e/html5/thumbnails/17.jpg)
Response data format
data: 1° message\n\n
data: 2° begin message\ndata: 2° continue message\n\n
data: {\n data: "foo": "bar",\n data: "baz", 555\n data: }\n\n
event: connected\ndata: User1 just got online\n\n
data: generic unnamed event\n\n
event: disconnected\ndata: User7 abbandona us\n\n
id: 1\ndata: message1\n\n
id: 2\ndata: message2\n\n
id: X\ndata: messageX\n\n
retry: 10000\n
data
id
even
tre
try
![Page 18: Better WebSockets - Server-Sent Events, a carefree alternative · A brief tour. Generic server implementation Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecd6d2db4aa2f226f0d078e/html5/thumbnails/18.jpg)
Custom event listeners example/ client server
Javascript
Python
![Page 19: Better WebSockets - Server-Sent Events, a carefree alternative · A brief tour. Generic server implementation Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecd6d2db4aa2f226f0d078e/html5/thumbnails/19.jpg)
More on SSE
Requests can be redirected HTTP 301(permanent) & 307(temporary)
Only UTF-8 decoding is supported, no binary data
Protocol supports multiple type of events, default is message
Clients always reconnect (no need to handle)
Server sends HTTP 204 No Content to stop reconnection
Limited amount of global connections per site
![Page 20: Better WebSockets - Server-Sent Events, a carefree alternative · A brief tour. Generic server implementation Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecd6d2db4aa2f226f0d078e/html5/thumbnails/20.jpg)
Native browser supportSource: https://caniuse.com/#feat=eventsource 09/07/2019
Other browsers, via polyfill https://github.com/Yaffle/EventSource
![Page 21: Better WebSockets - Server-Sent Events, a carefree alternative · A brief tour. Generic server implementation Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecd6d2db4aa2f226f0d078e/html5/thumbnails/21.jpg)
Can I use it without a browser?
![Page 22: Better WebSockets - Server-Sent Events, a carefree alternative · A brief tour. Generic server implementation Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecd6d2db4aa2f226f0d078e/html5/thumbnails/22.jpg)
Yes, there are libraries
Python: sseclient, sseclient-py, aiosseclient
Android: sse-android, RxSSE
iOS: EventSource(Swift), ios-eventsource(Objective-C)
react-native: react-native-event-source (based on a polyfill)
![Page 23: Better WebSockets - Server-Sent Events, a carefree alternative · A brief tour. Generic server implementation Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecd6d2db4aa2f226f0d078e/html5/thumbnails/23.jpg)
SSE vs WebSockets
Only UTF-8 encoding
Uses HTTP
Proxy friendly
Builtin support for reconnection and synchronization
Detects disconnection server side when trying to send out data
Only Server -> Client data channel
Clients automatically handle disconnections by reconnecting
Also supports binary data
Has a custom protocol
May have to reconfigure some proxies
Heartbeat, does not always work
Can detect disconnections server side
Can send data in both directions
Client disconnections must be explicitly handled
![Page 24: Better WebSockets - Server-Sent Events, a carefree alternative · A brief tour. Generic server implementation Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecd6d2db4aa2f226f0d078e/html5/thumbnails/24.jpg)
Use cases
Dashboards
News feeds
Notifications to browser
Games (depends on the game)
![Page 25: Better WebSockets - Server-Sent Events, a carefree alternative · A brief tour. Generic server implementation Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecd6d2db4aa2f226f0d078e/html5/thumbnails/25.jpg)
Some possibly useful links
https://www.w3.org/TR/eventsource/
https://stackoverflow.com/questions/7636165/how-do-server-sent-events-actually-work
http://html5doctor.com/server-sent-events/
https://pythonpedia.com/en/tutorial/9100/python-server-sent-events
https://streamdata.io/blog/push-sse-vs-websockets/
https://www.tutorialdocs.com/article/server-sent-events-tutorial.html
![Page 26: Better WebSockets - Server-Sent Events, a carefree alternative · A brief tour. Generic server implementation Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecd6d2db4aa2f226f0d078e/html5/thumbnails/26.jpg)
Takeaways
- Consider SSE for your next project- Choose between SSE and WebSockets as it
makes sense for your application
![Page 27: Better WebSockets - Server-Sent Events, a carefree alternative · A brief tour. Generic server implementation Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecd6d2db4aa2f226f0d078e/html5/thumbnails/27.jpg)
Thank you!Questions?
Contact me on Twitter @weetHK
All the pictures used in this presentation are places from or near Turin