A clicker button, that streams!
Using Server Sent Events (SSE), vanilla javascript and an express server, I created a simple app, where a user clicks a button and streams it through SSE.
Basically every time you click the button on the main page (/
), its
value is incremented by 1. This event is then sent to the server for
eventual propagation. Using an EventEmitter
N listeners can subscribe
to this unique session and reacting to it. When opening a subscription
window, the button value should evolve together with the main page.
What's magical here (at least for me), is the use of basic HTTP
headers to create a keep-alive
session that allow SSEs. The same goes
for the clientside javascript, only using EventSource
it's possible
to create a reactive client-side app without all the burder of
websockets!
This project is born from multiple sources of inspiration. First a fantastic talk I saw at MiXiT Lyon in 2017 by Audrey Neuveu (in French). Then, my desire to learn more about raw HTTP and its brilliant headers. Thirdly, a great article explaining how to do SSEs in nodejs by Tom Kernsten. And finally, just the fun of making a "reactive" app out of nearly bare nodejs.
The main page, where a session is started, to register the click.
The "tv" page, where one can follow the activity of a precise session
Create a new session and returns it.
Retrieves the current state of the session
Increment the clicks
value of the session by one.
Open the SSE session.