Server-Sent Events Crash Course
Vložit
- čas přidán 30. 06. 2024
- Server-Sent Events or SSE is when the server sends events to the client in a unidirectional manner. In this video, I explain Server-Sent Events and compare them to WebSockets and HTTP and Long Polling.
Slides
payhip.com/b/1Kvk
(Members get all slides for all my videos for free)
Source Code
github.com/hnasr/javascript_p...
Resources
developer.mozilla.org/en-US/d...
0:00 Intro
1:50 HTTP 1.0/1.1
3:40 WebSockets
5:00 Server Sent Events
7:30 SSE Use Cases
9:00 SSE Code Example
18:00 SSE Pros & Cons
25:20 Do You Need SSE?
28:30 Summary
Support my work on PayPal
bit.ly/33ENps4
Become a Member on CZcams
/ @hnasr
🧑🏫 Courses I Teach
husseinnasser.com/courses
🏭 Backend Engineering Videos in Order
backend.husseinnasser.com
💾 Database Engineering Videos
• Database Engineering
🎙️Listen to the Backend Engineering Podcast
husseinnasser.com/podcast
Gears and tools used on the Channel (affiliates)
🖼️ Slides and Thumbnail Design
Canva
partner.canva.com/c/2766475/6...
🎙️ Mic Gear
Shure SM7B Cardioid Dynamic Microphone
amzn.to/3o1NiBi
Cloudlifter
amzn.to/2RAeyLo
XLR cables
amzn.to/3tvMJRu
Focusrite Audio Interface
amzn.to/3f2vjGY
📷 Camera Gear
Canon M50 Mark II
amzn.to/3o2ed0c
Micro HDMI to HDMI
amzn.to/3uwCxK3
Video capture card
amzn.to/3f34pyD
AC Wall for constant power
amzn.to/3eueoxP
Stay Awesome,
Hussein - Věda a technologie
Dude, I cancelled my netflix and I'm loving watching your videos. I learn a lot and still get entertained
Haha I can see! I go with you. :)
What a clear explanation ! Side note: ChatGPT uses SSE behind the scene to fetch words generated by the model.
yeah openai using it is all the validation i need
I stumbled on SSE this weekend and traveled down the rabbit hole of understanding what it is exactly. This video is by far the clearest example I've found. Thanks! 👏
Hi Hassan, thanks for the great video. I moved my server from Websockets to SSE, because Websocket was too hard to scale up and consument too many resources with it’s default configuration.
If it helps anyone in the future, I was able to scale up to 20K active SSE connections with a server with 1 CPU and 1GB of RAM. To reach that number, had to increase the limits like ulimit, nginx active connections limit etc. Also moved the state of the app to a redis instance making the SSE stateless. So once user count reaches the limit, it should be pretty easy to spin up one more server and continue serving.
Hi Hisham! Awesome information. Do you mind sharing how is SSE used in your application? I'm always eager to see different use cases.
@@luichyluichy My plan was to use for a live quiz module, with a few thousand people attending it at the same time. After switching to SSE, we found that the delay because of loops wasn’t working for us, so we had to switch back to websocket :| I don’t think SSE suits for time critical events
@@hishammubarak3421 I'm guessing you are talking about the iteration of each connection to send the SSE message. If that is correct, how big was the difference in delay between SSE vs WS? and what type of loop where you using, Imperative or Declarative? Thanks for the feedback!
How do you save and use the “state” in redis?
One use case for instance I find for Server Sent Events could be to display a Plane arrivals and departures timetable for an Airport.
Damn you pumping out videos like crazy
I'm trying to implement a Firebase rtdb client on micropython, and this has helped me a lot. Thanks for this!
Thank you so much! brilliant vid, exactly the info I needed! not another how to npm -i until your problem is solved. THANK YOU!!
Beautiful crash course - I learned alot! Thank you!
Excellent intro on this topic - thank you!
I followed along this tutorial and it was very insightful.
This is amezing! I was going to implement websocket in my current project. But instead I will use this!
thanks a lot Hussein ❤️❤️🙏
I'll use SSE for a lightweight Push Notifications service for my backend API server
That's what I am thinking to use it for. Its one directional so why not.
@@8nasir7 How will you achieve this when each user gets different set of notifications based on their account?
@@aj-editssz that is b/w application & DB. This service will simply receive data from 3rd party service like redis/rabbitmq queue & send notifications. or you can simply check if current user has this notifications turned-on then notify else pass.
Awesome!
Thank you brother, machaallah
With love and respect from Algeria
Thank you!! all love to my subs from Algeria
4:00 websocket handshake upgrade
5:30 SSE handshake
8:30 use cases
SSE is unidirectional allows server to send response in chunks and uses that to send events. Similar to long polling but long polling server only gets to send 1 response whereas with SSE server can send back many events. Limited because no bidirectional communication, better to just use websockets as they’re more powerful.
10:30 code nodejs examples
Salam alaikum brother, keep going awesome work, your brother from Lebanon 🔥❤️
Thank you for these awesome videos/crash courses.
Can you show the implementation of service mesh/aws app mesh in microservice architecture.
I am taking your course on Udemy. This is amazing. After this lecture I thought that chat GPT uses Context-Type: "text/event-stream" for gradually displaying the messages. I opened the browser to check - and I was right :) Thank you for such a great explanation of all concepts
Great video again, both theory and practical. I can think of a use which is very niche like logs, heroku build logs, kubernetes pods log to client, cause client need not to know anything, just blindly display data and server will kill it when needed.
Nice use cases, websockets work for those too.. just little more overhead compared to SSE
Very nice Explanation, Thanks for sharing :)
I am using SSE to show SFTP file upload in a progress bar in a React App. It works beautifully. Next I want to use it for an app that monitors a directory when a log file is added and notify it in the React App.
Did you ever publish that app that notifies a react app? @Hadi Abedi
Thank you soooo much for posting a link to your repo w/ your tutorial code. So many CZcamsrs overlook this. Smh
I sometimes forget myself. Thanks for your comment!
very informative as always
Great video thank you so much for you teaching
helped me lot to understand *SSE* .
Hi Hussein , just subscribed and I'm loving it so far . Can this be used for notification?
Thanks a lot brother!
that's very good video thanks so much !!!
26:30 big misconception that you need websockets for bidirectional communication. You can use HTTP REST requests to send commands to the server and use SSE to receive events about changes. SSE has way more use cases and is really easy to implement. WS is only a good pick if you are planning to send A LOT of events from the client side to the server.
I agree. SSE only support 6 parallel connection per client. So its a big problem. Its easy to implement but not great..
@@_dinesh HTTP2 solves this issue. Since multiple SSE connections can be kept in parallel under one. There is no limit to SSE connections then.
@@dyto2287 True true 🙌. My bad for not stipulating the limitation on HTTP/1. It does support 100 parallel connections on HTTP2.
Thanks Hussein. You explain everything so well. I wonder if there's a way for server to know if messages were delivered successfully? What if some messages are dropped?
Good tutorial and also so funny😆
26:25
A use-case for SSE (a bit complex, but still):
You have a frontend, you have a backend, you have a kafka server (with ZOOKEEPER! OH GOD!! THE HORROR!!!), and you also use some thrd party server.
On the FE, let's say you give the user the ability to upload many many pdf files at once! And then you send them one by one asyncronously to some endpoint on the backend. On that endpoint, you have a producer that connects to kafka and sends each of these pdf files to the broker. On the other end, the thrd party server consumes the pdf files, and let's say it performs some parsing on that pdf, to extract some data from it. It then needs to produce (connect a producer) that data as message back to kafka. So NOW! you need to have ANOTHER endpoint, or service, or whatever you wanna call it, that knows how to consume the parsed data. AND HERE COMES THE TRICKY PART! How do you move that consumed parsed data from your backend to your frontend?
2 options that I can think of:
1) Just store the parsed data into some kind of database (mysql, mongo, elastic, whatever...), and have the frontend do a long-polling to ask if the database has some new information for it.
2) OR!!! SSE for the rescue. right? The server will just give the new message to the frontend (and storing it in a database is still an option, it can do both).
Isn't that like a sufficient use case? (mind the complexity lol)
I would like to hear your thoughts on this. Is it doable?
P.s.
Love you man. love your content.
Hey I have a very similar use case. Good to see such an informed comment here….
Fantastic video, and thank you! I've begun using SSE to integrate the OpenAI API into my website (OpenAI → my backend → client). Initially, I was puzzled as the client attempted to connect to the backend indefinitely, only stopping when the connection was explicitly closed. I'm curious as to why this differs from the SSE connection between my backend and OpenAI servers, where the connection seems to close upon receiving the last message.
Hussein the backend king;❤️
in HTTP/1.1, besides a reused connection, there is also something called pipelining,this allows to send a second request before the answer for the first one is fully transmitted, lowering the latency of the communication
Pipelining unfortuently is not a good idea and it has been abonded. The main reason is you can send multiple requests in the same TCP connection with HTTP 1.1 pipelining however you must guarantee that the responses coming back must be in the same order. Those guarantees are very hard to achieve specially in proxied environment. Not to mention the head of line blocking problems in pipelining.
@@hnasr Thanks for the clarification. keep up the great work.
I was curious how does Spotify control browser music from iPhone app? Does it use server sent events or web sockets? I tried looking into the WS tab inside the network tab in Chrome but couldn't see anything. It would be great if you could make a video on that.
Thanks for all the amazing content!
Thank you
very great content bro, may Allah bless you
I used websocket for creating multiplayer game based on javascript canvas & java spring websocket server
This is an amazing video. Love your enthusiasm and style that you put into your work! I tried this code out and I noticed that if I have three clients all connected at the same time, the messages they receive are incremented by three.
i.e. Client 1 - Hello...1, Hello...4, Hello...7
Client 2 - Hello...2, Hello...5, Hello...8
Client 3 - Hello...3, Hello...6, Hello...9
Why is this? I assumed each connection would receive all of the messages.
You have to manually cache the connections of each client and send to whomever you want each time
@@GreenMarkoulis13 what do you mean? Do you have an example?
thank you.
Thank you very much!
We are building a CRM application where users need to see live changes in the funnels and opportunities, do you think SSE is the way to go?
ty
Thanks for the video.
How to manage session of user in form of JWT on server side and how does the server know by resuming the session to the exact user who has subscribed?
Do the subscriptions need to be managed?
How is performance evaluated for the server side when the clients are more and have to be responded to?
thank youuuuuu
Hi Hussein. Thanks for the lovely video. If I implement my own server, and need to push notifications to a mobile device. Should I go with Web sockets or SSE?
Waseem Pasha S I think you will have better luck with SSE since it appears to be stateless, lightweight and works out of the box without boiler plate (manage connections etc..)
@@hnasr Thanks for the reply hussein. Thanks for the video as well. Good content as always
I think SSE is a good option for here's this data and it's your problem now kind of situations.
For example in some physical store where they get a new order and they would like to inform the factory with the order-details in realtime.
I was about comment to make a video on SSEs. It's like you can read mind
Thank you Hussein for the excellent video. If I run the code with multiple browsers windows, say two browser windows, I see that each browser window gets half the message, i.e. browser window 1 gets messages 0, 2, 4, .. and browser window 2 gets messasge 1,3,5,.... I repeated this with three browser windows and similar results, window 1 gets 0,3,6,... Is this expected behavior? So is the expectation that for each stream there is only one listener? Should not all the browser clients get all the events? Thanks
Figured this out. The behavior is correct, as the index i is a global variable and if there are n clients, will get incremented n times within a second, as the send function will be called n times, once by each client. All clients were getting messages once a second, but with the index i incremented by n everytime. To fix this, need to make i as a local variable of app.get("stream"..) and then pass it as a variable to the send function.
I'm lucky I found this
Hello dear! excellent video, thanks for your input. I wonder how should I send a form via fetch api and then follow up on the process that is triggered in the backend when receiving said form? Because SSE does not allow sending data via POST and I must send a large .csv file so that it can be processed and my idea is to send a status of the process in a unidirectional way from the server to the client. Do you know of an example? Thanks a lot!
Just speculating on your use case, but wouldn't you just have two separate, but connected requests:
1) Form POSTs the data to your server
2) Server returns some identifier for that uploaded data (could be a record id, for example) on response, to the client.
3) Client does an SSE request to the Server with that record id as a query param.
4) Server uses record id to "do work with that data" and stream the results using SSE and closes when finished.
Let me know if that would work or what you did to solve this requirement.
❤
Another big cons of SSE is browser can only open max 6 TCP connection across all browser tab...
That means if you hijack 6 TCP connection for SSE. Your website will not work anymore even if you open in new browser tab.
Btw, I only watch your videos regularly. Great stuff 👍😀
Ritwick Dey thanks Ritwick! I assume this is only true in case of HTTP/1.1 . In HTTP/2 you can use up to the max number of streams agreed upon
@@hnasr Yes... this cons is only for http/1.1
Does max 6 active SSE connections mean max 6 active sse connection from a single client machine or does it mean max 6 client machines having 1 active connection each?
I am using HTTP/1.1and the backend framework flask does not support HTTP 2. Should i go for SSE or not?
Hi Hussein, why don't you start a discord sever for backend community?
For a chat app is it better to use ws or sse, we can say messages are not sent often, but are received often.
Hi Hussein, your explanation made me to subscribe your channel. But I have a question. In eventsource you are calling by GET request. Can I call any POST service ?
Welcome to the channel! yes you should be able to use any method as long as the server responds with the correct header type as I showed
Thanks ! I am trying a lot but not able to find how can you share any code or library so I can call post service
We have a case where a schedule is running on server and we want to send messages to web clients. Server sent events work?
I was building a GPS Tracking System and i used SSE in NodeJs to keep sending Location Data from the server to update the frontend map, on the localhost there was some bit of slow response but am hopping when i deploy to the server it will be faster
How can I use the SSE to send a message to a specific client probably by the clientID or username versus sending the same messages to every user?
What about sending initial data(like credentials) to server with GET parameters and receive user feed form there ?
i used SSE with on of BMW projects, where the server needed to send push notification to the cars in a one way communication-
So if you've got two servers, you probably need to stick to the server handling the SSE stream. Maybe this is causing me grief... Thanks for explaining it so well!
Farhan Yousaf correct SSE is stateful so you need stickiness. Layer 4 proxying should do the trick.
Good
which protocol we use in case I am streaming netflix video ? Can you please tell me if any of your videos refer to such technology in case i want to build video streaming platform.
did you find any?
SEE API ref says it can detect server changes... does it means you have do detect the changes explicitly on the server?
@Hussein Nasser can you do video about Webhooks, Am not able to understand how webhooks are different from making sync api call, how does retries work in webhook
This works well till I open the streams 6 times from different tabs of the browser, but as soon as i open the 7th tab, its not able to connect to the api. I know its a limitation, but how to overcome it ?
Hi Husein. Thanks for this informative video. It helped immensely to learn about server-sent events. I would like to know when to use server-sent events and when to use grpc streaming.
Hussein, I'm not seeing the links to other videos that you are mentioning. This is the second video in a row where this has happened. At 2:50 you say (and use your mouse to suggest) that you have added a link to a previous video, but none appears. This also happened today on the video about the vpn hack, but I didn't take note of the time. Hope that's helpful, and curious if anyone else IS seeing it somehow. (FWIW, this is on desktop, in Chrome, on Windows.)
Thanks Charlie! I apologize I sometimes think I link it and I forget or sometimes It doesn't commit. I fixed this video (2:50 now links to the video) Please let me know whenever you see any missing link I'll fix it right away .. appreciate it!
@@hnasr Thanks, so much. And of course, totally understandable. We all so greatly appreciate all you're doing, so not meaning to "look a gift horse in the mouth".
While you were so kindly replying, I was giving a listen to the other one again (sped up). I couldn't readily find where it was, but perhaps someone else will point out it out. In the meantime, it's certainly great to hear that you're open to and will respond to such observations. That should help encourage folks to point them out when we find them. :-)
@@CharlieArehart1 Thanks! the timestamp really helps! I went to the VPN hack video and put the the link in 4:13 to TLS hello ..
@@hnasr perfect. :) thx
If I wanna load test an api with sse response. How can I do it
Can we use SSE for pushing notification ?
Can we use SSE in case we have the same document opened in 2 devices (Eg- Google keep, Evernote)
Any update made on 1st device should be reflected in device 2 for data syncing across both the devices (1,2 second delay acceptable )
It's been 2 years so I hope you have got your answer. correct me - we will require a server to relay the data between those two devices, so we need to use WebSockets
epic moment 8:33 bbaaadduuuuudduuu
I have a clear use case to use SSE to catch events from asterisk ami events
Hi all, I'm trying to build a project site where a user could send e-card with (attached photos) along with custom message to another user. What protocol I need to use for it? Is it SMTP or Server sent events or websockets? I'm bit confused. Please help me out. Thanks!
You can use websockets here. The sender user will send the e-card to server and from the server through websocket connection the e-card will be sent to the receiver.
The major con with Server Sent Events is, the client can only have 6 parallel connections. Browsers don't support more than 6 connections. If you have more than 6 tabs open. SSE will not work on the 7th tab.
This is valid for http1 only
Can the Server-Sent Events send a notification to the client after stabilish the connection.. I mean I dont want send every second a notification, I only want send a notification when something change in the server like Firebase database..? or I should use whesockets?
Yes SSE is perfect for notifications
@@hnasr Thanks sir, where I can see more examples. I'm researching to integrate it inside of android apps. Firebase is expensive we need an alternative.
setTimeout with recursion or setInterval is just an example.
You have to monitore your changes in database in some way and then send the notification.
In mongo, you can create oplog and monitor it. And on change send the event.
Why sse can't use as notification system?
You should be able to use it as a notification system
Is SSE only limited to the browsers?
No it can work with any HTTP client, as long proper timeouts are set
How old is SSE?
Use case : www.infoq.com/presentations/linkedin-play-akka-distributed-systems/
Sir please do video on Clean architecture.
+1
No one actually uses clean architecture in the real world. Save your time.
@@8Trails50 Not true, it seems rare indeed.
How to add auth to a SSE ?
put your garbage here, you just made me laugh out loud
They don't seem to work using Azure App Service for some reason...
Adam Smith interesting. need to check what the reverse proxy is doing,
To skip "first the earth cooled" history lessons, jump forward 4 minutes or more.
I m unable to send data .... app.js wrote this code
const app = require("express")();
app.get('/', (req, res) => res.send("hello!"))
app.get('/stream', (req, res) => {
res.setHeader(
'Content-Type','text/event-stream'
);
res.write("data: "+"Hello!");
console.log("Sent")
})
app.listen(4003, () => console.log('SSE app listening on port 4003!'))
While running
let sse = new EventSource("localhost:4003/stream");
sse.onmessage = console.log
Not getting anything... What I have missed?
Can you add a timer on your backend that sends “hello” every second? My guess is the server did send hello but your client didn’t wire the onmessage event fast enough to receive it
@@hnasr Yes ... How to solve that issue? Tried sending data like this :
setInterval(()=>{
res.write("data: "+"Hellooooooooooooooo")
},1000);
But can't see anything in the client. How can this be solved please help me.
The code in the video Explains how to do so. github.com/hnasr/javascript_playground/blob/master/server-sent-events/index.js
Missing these coding days
Can SSE handle multiple clients?
***QUESTION*** How do I get a result from a PAYMENT process ( like STRIPE or PAYPAL ) to Trigger an Event or Function in MY website ?
I am building a Business Website where in steps ( 1 ) a Customer ( anyone this is not a Subscription nor membership site ) comes to my web site Fills out a Form for DATA SUBMISSION into the Database. ( 2 ) Once the DATA Form is filled out they press NEXT button ( 3 ) they are taken to a 3rd party PAYMENT page where they fill out a payment form and then press SUBMIT ( 4 ) once the SUBMIT button is pressed payment is process ( 5 ) ONLY AFTER PAYMENT IS APPROVED THEN I want the Data to be submitted into the data base.
**QUESTION** Is STEP # 5 completed with JS or some other language ? HOW do I complete the process where AFTER PAYMENT IS ACCEPTED from a 3rd party payment processor ( like STRIP or PAYPAL ) THEN the data from the Already filled out data form is submitted into the data base ??
IS A WEBHOOK required to make this possible or FETCH API or GETHUB or WHAT?
"I might need it in the future" means there's no system architecture in your project