2024/11/14 晚上11:42 Building a notifications system with Server-Sent Events (SSE) using FastAPI and Redis | by David Rodriguez
Rodriguez | Nov, 2024 |…
Open in app
47
Search
Get unlimited access to the best of Medium for less than $1/week. Become a member
Building a notifications system with Server-
Sent Events (SSE) using FastAPI and Redis
David Rodriguez · Follow
3 min read · 3 days ago
Listen Share More
Photo by Shubham Dhage on Unsplash
Last week I was talking to a colleague and discussed several ways of imlpementing a
simple notifications system in a web application. We discussed Web Push
Notifications, WebSockets and Server Sent Events.
I had already implemented a notifications system using WebSockets, although the
bi-directionality of the connection that WS offer is useless in a notifications system,
https://medium.com/@davidrp1996/bulding-a-notifications-system-wih-server-sent-events-sse-using-fastapi-and-redis-6eafdf7cf7fb 1/11
2024/11/14 晚上11:42 Building a notifications system with Server-Sent Events (SSE) using FastAPI and Redis | by David Rodriguez | Nov, 2024 |…
where the servers notifies the client about something, and the client NEVER sends
information back to the server. So the system I had implemented was correctly
implemented, but it wasn’t using the correct technology.
Therefore, I decided to refactor it and implement it using Server Sent Events. For
Javascript, there is this documentation, and for FastAPI I got some information from
this post, but had to fix some things to make it work in the browser.
Server side
To implement a server-sent request in FastAPI, we can just use a StreamingResponse,
which takes a generator (or async generator in this case) and streams the content.
Endpoint configuration
The “Content-Encoding”: “none” header is crucial to make it work in the frontend,
as we’ll se later.
And the _get_notifications method will be implemented as:
https://medium.com/@davidrp1996/bulding-a-notifications-system-wih-server-sent-events-sse-using-fastapi-and-redis-6eafdf7cf7fb 2/11
2024/11/14 晚上11:42 Building a notifications system with Server-Sent Events (SSE) using FastAPI and Redis | by David Rodriguez | Nov, 2024 |…
Generator method
Now, there are some lines in here that may be a little confusing. Notifications in this
system are managed using Redis, specifically its pub-sub module. In python, this is
implemented as follows:
Publisher in redis
This pieces of code, put all together, allow the system to publish notifications in a
given channel “notifications/<channel>”, and then read them using
await pubsub.subscribe(...)
while True:
https://medium.com/@davidrp1996/bulding-a-notifications-system-wih-server-sent-events-sse-using-fastapi-and-redis-6eafdf7cf7fb 3/11
2024/11/14 晚上11:42 Building a notifications system with Server-Sent Events (SSE) using FastAPI and Redis | by David Rodriguez | Nov, 2024 |…
message = await pubsub.get_message(...)
# Do something with the message
Using this, we can connect to localhost:8080/ and get notifications streamed to us.
This will work using curl or opening a tab with this URL, but we want to be able to
use these notifications in our web app.
Client side
For the client side we’ll create a new EventSource instance, and connect to the
endpoint to start receiving the notifications.
There are several advantages when using EventSources in javascript:
You can use cookies or headers to authorize the request by setting
{withCredentials: true} when defining the EventSource.
You can add custom EventListeners depending on the type of notification you
are getting. This type is defined in the backend, when building the string that
https://medium.com/@davidrp1996/bulding-a-notifications-system-wih-server-sent-events-sse-using-fastapi-and-redis-6eafdf7cf7fb 4/11
2024/11/14 晚上11:42 Building a notifications system with Server-Sent Events (SSE) using FastAPI and Redis | by David Rodriguez | Nov, 2024 |…
we’ll send back to the client.
With these small changes I successfully refactored the code to use the correct
technology, while learning how to implement it along the way!
I hope this post is useful for people trying to implement Server-sent Events with
FastAPI and whatever frontend framework (or even vanilla-js for the bold ones)
they’re using.
Let me know if you run into any problems while implementing this. Happy coding,
and may your sessions be smooth and bug-free! Keep building awesome things!
Fastapi Server Sent Events Notifications Backend Fullstack Development
Follow
Written by David Rodriguez
10 Followers · 17 Following
More from David Rodriguez
https://medium.com/@davidrp1996/bulding-a-notifications-system-wih-server-sent-events-sse-using-fastapi-and-redis-6eafdf7cf7fb 5/11
2024/11/14 晚上11:42 Building a notifications system with Server-Sent Events (SSE) using FastAPI and Redis | by David Rodriguez | Nov, 2024 |…
David Rodriguez
Understanding PostgreSQL recursive queries
Sometimes we may find that our data model has a tree-like structure (or graph structure),
where in the same table we have a column that…
Apr 17, 2022 109
David Rodriguez
How I created my own AI assistant — and how you can benefit from it.
The beginning
https://medium.com/@davidrp1996/bulding-a-notifications-system-wih-server-sent-events-sse-using-fastapi-and-redis-6eafdf7cf7fb 6/11
2024/11/14 晚上11:42 Building a notifications system with Server-Sent Events (SSE) using FastAPI and Redis | by David Rodriguez | Nov, 2024 |…
Jan 4 51
See all from David Rodriguez
Recommended from Medium
Ankit Agarwal
Polling, WebSockets and Server Sent Events : System Design
In this article we will explore Polling, WebSockets, and Server-Sent Events. These are crucial for
real time or near real time…
Jun 10 54 1
https://medium.com/@davidrp1996/bulding-a-notifications-system-wih-server-sent-events-sse-using-fastapi-and-redis-6eafdf7cf7fb 7/11
2024/11/14 晚上11:42 Building a notifications system with Server-Sent Events (SSE) using FastAPI and Redis | by David Rodriguez | Nov, 2024 |…
General Zod
Importing Massive CSV datasets in NestJS using TypeORM & Readable
Streams
When dealing with large-scale datasets, particularly CSV files, many traditional CSV parsers
can pose significant challenges. A common…
Sep 13 5
Lists
Coding & Development
11 stories · 897 saves
Stories to Help You Grow as a Software Developer
19 stories · 1467 saves
Natural Language Processing
1809 stories · 1422 saves
https://medium.com/@davidrp1996/bulding-a-notifications-system-wih-server-sent-events-sse-using-fastapi-and-redis-6eafdf7cf7fb 8/11
2024/11/14 晚上11:42 Building a notifications system with Server-Sent Events (SSE) using FastAPI and Redis | by David Rodriguez | Nov, 2024 |…
Kiran Chhablani
PostgreSQL 17: A Game-Changing Release Packed with Performance,
Replication, and Developer Joy
PostgreSQL has long been a powerhouse in the open-source database world, renowned for its
robustness, scalability, and active…
Oct 15 281 2
Fadi Shaar
Configuring NGINX Proxy for MinIO Server Using Docker-Compose
https://medium.com/@davidrp1996/bulding-a-notifications-system-wih-server-sent-events-sse-using-fastapi-and-redis-6eafdf7cf7fb 9/11
2024/11/14 晚上11:42 Building a notifications system with Server-Sent Events (SSE) using FastAPI and Redis | by David Rodriguez | Nov, 2024 |…
MinIO is a high-performance, S3-compatible object storage system. When deploying MinIO
with Docker Compose, you might want to use NGINX as…
Aug 8 11
Suganthi
Building a REST API with FastAPI and Redis Caching
When building web applications, optimizing performance is essential, especially for APIs that
serve multiple requests. One way to enhance…
Sep 25 5
https://medium.com/@davidrp1996/bulding-a-notifications-system-wih-server-sent-events-sse-using-fastapi-and-redis-6eafdf7cf7fb 10/11
2024/11/14 晚上11:42 Building a notifications system with Server-Sent Events (SSE) using FastAPI and Redis | by David Rodriguez | Nov, 2024 |…
In JavaScript in Plain English by Peter Kracik
Clean Architecture Demystified: Refactoring Your Nest.js App
Transform your Nest.js app with Clean Architecture for better structure and flexibility. A
practical guide to refactoring.
Oct 28 160 4
See more recommendations
https://medium.com/@davidrp1996/bulding-a-notifications-system-wih-server-sent-events-sse-using-fastapi-and-redis-6eafdf7cf7fb 11/11
