.svg)
.svg)
A typical Request Response cycle works such that client sends request to server and server responds to that request. But there are few use cases where we might need to send data from server without request or client is expecting a data that can arrive at anonymous time. There are few mechanisms available to solve this problem.
Broadly we can classify these as client pull and server push mechanisms. Websockets is a bi directional mechanism where data is transmitted via full duplex TCP protocol. Client Pull can be done using various mechanisms like -
Server sent events are a type of Server Push mechanism, where client subscribes to a stream of updates generated by a server and, whenever a new event occurs, a notification is sent to the client.
Why ServerSide events are better than polling:
SSEs cannot provide bidirectional client-server communication as opposed to WebSockets. Use cases that require such communication are real-time multiplayer games and messaging and chat apps. When there's no need for sending data from a client, SSEs might be a better option than WebSockets. Examples of such use cases are status updates, news feeds and other automated data push mechanisms. And backend implementation could be easy with SSE than with Websockets. Also number of open connections is limited for browser for SSE.
Also, learn about WS vs SSE here.
The server side code for this can be implemented in any of the high level language. Here is a sample code for Python Flask SSE. Flask SSE requires a broker such as Redis to store the message. Here we are also using Flask APScheduler, to schedule background processes with flask .
Here we need to install and import ‘flask_sse’ and ‘apscheduler.’
| from flask import Flask, render_template | |
| from flask_sse import sse | |
| from apscheduler.schedulers.background import BackgroundScheduler |
Now we need to initialize flask app and provide config for Redis and a route or an URL where the client would be listening to this event.
| app = Flask(__name__) | |
| app.config["REDIS_URL"] = "redis://localhost" | |
| app.register_blueprint(sse, url_prefix='/stream') |
To publish data to a stream we need to call publish method from SSE and provide a type of stream.
| sse.publish({"message": datetime.datetime.now()}, type='publish') |
In client, we need to add an event listener which would listen to our stream and read messages.
| var source = new EventSource("{{ url_for('sse.stream') }}"); | |
| source.addEventListener('publish', function(event) { | |
| var data = JSON.parse(event.data); | |
| console.log("The server says " + data.message); | |
| }, false); | |
| source.addEventListener('error', function(event) { | |
| console.log("Error"+ event) | |
| alert("Failed to connect to event stream. Is Redis running?"); | |
| }, false); |
Check out a sample Flask-React-Redis based application demo for server side events.
Here are some screenshots of client -
Server logs:
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 31, 0, 24564)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 31, 14, 30164)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 31, 28, 37840)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 31, 42, 58162)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 31, 56, 46456)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 32, 10, 56276)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 32, 24, 58445)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 32, 38, 57183)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 32, 52, 65886)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 33, 6, 49818)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 33, 20, 22731)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 33, 34, 59084)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 33, 48, 70346)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 34, 2, 58889)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 34, 16, 26020)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 34, 30, 44040)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 34, 44, 61620)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 34, 58, 38699)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 35, 12, 26067)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 35, 26, 71504)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 35, 40, 31429)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 35, 54, 74451)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 36, 8, 63001)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 36, 22, 47671)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 36, 36, 55458)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 36, 50, 68975)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 37, 4, 62491)) | |
| api_1 | ('Event SchedINFO:apscheduler.executors.default:Job "server_side_event (trigger: interval[0:00:14], next run at: 2019-05-01 07:37:31 UTC)" executed successfully | |
| api_1 | INFO:apscheduler.executors.default:Running job "server_side_event (trigger: interval[0:00:16], next run at: 2019-05-01 07:37:38 UTC)" (scheduled at 2019-05-01 07:37:22.362874+00:00) | |
| api_1 | INFO:apscheduler.executors.default:Job "server_side_event (trigger: interval[0:00:16], next run at: 2019-05-01 07:37:38 UTC)" executed successfully | |
| api_1 | INFO:apscheduler.executors.default:Running job "server_side_event (trigger: interval[0:00:14], next run at: 2019-05-01 07:37:31 UTC)" (scheduled at 2019-05-01 07:37:31.993944+00:00) | |
| api_1 | INFO:apscheduler.executors.default:Job "server_side_event (trigger: interval[0:00:14], next run at: 2019-05-01 07:37:45 UTC)" executed successfully | |
| api_1 | INFO:apscheduler.executors.default:Running job "server_side_event (trigger: interval[0:00:16], next run at: 2019-05-01 07:37:54 UTC)" (scheduled at 2019-05-01 07:37:38.362874+00:00) | |
| api_1 | INFO:apscheduler.executors.default:Job "server_side_event (trigger: interval[0:00:16], next run at: 2019-05-01 07:37:54 UTC)" executed successfully |
Let’s see the use case with an example - Consider we have a real time graph showing on our web app, one of the possible options is polling where continuously client will poll the server to get new data. Other option would be to use server sent events, which are asynchronous, here the server will send data when updates happen.
Other applications could be
In this blog, we have covered how we can implement server sent events using Python Flask and React and also how we can use background schedulers with that. This can be used to implement a data delivery from the server to the client using server push.
Did you like the blog? If yes, we're sure you'll also like to work with the people who write them - our best-in-class engineering team.
We're looking for talented developers who are passionate about new emerging technologies. If that's you, get in touch with us.
A typical Request Response cycle works such that client sends request to server and server responds to that request. But there are few use cases where we might need to send data from server without request or client is expecting a data that can arrive at anonymous time. There are few mechanisms available to solve this problem.
Broadly we can classify these as client pull and server push mechanisms. Websockets is a bi directional mechanism where data is transmitted via full duplex TCP protocol. Client Pull can be done using various mechanisms like -
Server sent events are a type of Server Push mechanism, where client subscribes to a stream of updates generated by a server and, whenever a new event occurs, a notification is sent to the client.
Why ServerSide events are better than polling:
SSEs cannot provide bidirectional client-server communication as opposed to WebSockets. Use cases that require such communication are real-time multiplayer games and messaging and chat apps. When there's no need for sending data from a client, SSEs might be a better option than WebSockets. Examples of such use cases are status updates, news feeds and other automated data push mechanisms. And backend implementation could be easy with SSE than with Websockets. Also number of open connections is limited for browser for SSE.
Also, learn about WS vs SSE here.
The server side code for this can be implemented in any of the high level language. Here is a sample code for Python Flask SSE. Flask SSE requires a broker such as Redis to store the message. Here we are also using Flask APScheduler, to schedule background processes with flask .
Here we need to install and import ‘flask_sse’ and ‘apscheduler.’
| from flask import Flask, render_template | |
| from flask_sse import sse | |
| from apscheduler.schedulers.background import BackgroundScheduler |
Now we need to initialize flask app and provide config for Redis and a route or an URL where the client would be listening to this event.
| app = Flask(__name__) | |
| app.config["REDIS_URL"] = "redis://localhost" | |
| app.register_blueprint(sse, url_prefix='/stream') |
To publish data to a stream we need to call publish method from SSE and provide a type of stream.
| sse.publish({"message": datetime.datetime.now()}, type='publish') |
In client, we need to add an event listener which would listen to our stream and read messages.
| var source = new EventSource("{{ url_for('sse.stream') }}"); | |
| source.addEventListener('publish', function(event) { | |
| var data = JSON.parse(event.data); | |
| console.log("The server says " + data.message); | |
| }, false); | |
| source.addEventListener('error', function(event) { | |
| console.log("Error"+ event) | |
| alert("Failed to connect to event stream. Is Redis running?"); | |
| }, false); |
Check out a sample Flask-React-Redis based application demo for server side events.
Here are some screenshots of client -
Server logs:
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 31, 0, 24564)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 31, 14, 30164)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 31, 28, 37840)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 31, 42, 58162)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 31, 56, 46456)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 32, 10, 56276)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 32, 24, 58445)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 32, 38, 57183)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 32, 52, 65886)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 33, 6, 49818)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 33, 20, 22731)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 33, 34, 59084)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 33, 48, 70346)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 34, 2, 58889)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 34, 16, 26020)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 34, 30, 44040)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 34, 44, 61620)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 34, 58, 38699)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 35, 12, 26067)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 35, 26, 71504)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 35, 40, 31429)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 35, 54, 74451)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 36, 8, 63001)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 36, 22, 47671)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 36, 36, 55458)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 36, 50, 68975)) | |
| api_1 | ('Event Scheduled at ', datetime.datetime(2019, 5, 1, 7, 37, 4, 62491)) | |
| api_1 | ('Event SchedINFO:apscheduler.executors.default:Job "server_side_event (trigger: interval[0:00:14], next run at: 2019-05-01 07:37:31 UTC)" executed successfully | |
| api_1 | INFO:apscheduler.executors.default:Running job "server_side_event (trigger: interval[0:00:16], next run at: 2019-05-01 07:37:38 UTC)" (scheduled at 2019-05-01 07:37:22.362874+00:00) | |
| api_1 | INFO:apscheduler.executors.default:Job "server_side_event (trigger: interval[0:00:16], next run at: 2019-05-01 07:37:38 UTC)" executed successfully | |
| api_1 | INFO:apscheduler.executors.default:Running job "server_side_event (trigger: interval[0:00:14], next run at: 2019-05-01 07:37:31 UTC)" (scheduled at 2019-05-01 07:37:31.993944+00:00) | |
| api_1 | INFO:apscheduler.executors.default:Job "server_side_event (trigger: interval[0:00:14], next run at: 2019-05-01 07:37:45 UTC)" executed successfully | |
| api_1 | INFO:apscheduler.executors.default:Running job "server_side_event (trigger: interval[0:00:16], next run at: 2019-05-01 07:37:54 UTC)" (scheduled at 2019-05-01 07:37:38.362874+00:00) | |
| api_1 | INFO:apscheduler.executors.default:Job "server_side_event (trigger: interval[0:00:16], next run at: 2019-05-01 07:37:54 UTC)" executed successfully |
Let’s see the use case with an example - Consider we have a real time graph showing on our web app, one of the possible options is polling where continuously client will poll the server to get new data. Other option would be to use server sent events, which are asynchronous, here the server will send data when updates happen.
Other applications could be
In this blog, we have covered how we can implement server sent events using Python Flask and React and also how we can use background schedulers with that. This can be used to implement a data delivery from the server to the client using server push.
.svg)
.svg)
