Dude, I cancelled my netflix and I'm loving watching your videos. I learn a lot and still get entertained

@latifawarrelmann4798

Жыл бұрын

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.

@sebastiansosa3072

Ай бұрын

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! 👏

One use case for instance I find for Server Sent Events could be to display a Plane arrivals and departures timetable for an Airport.

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.

@luichyluichy

2 жыл бұрын

Hi Hisham! Awesome information. Do you mind sharing how is SSE used in your application? I'm always eager to see different use cases.

@hishammubarak3421

2 жыл бұрын

@@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

@luichyluichy

2 жыл бұрын

@@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!

@alejandrombc

6 ай бұрын

How do you save and use the “state” in redis?

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

I'm trying to implement a Firebase rtdb client on micropython, and this has helped me a lot. Thanks for this!

Damn you pumping out videos like crazy

thanks a lot Hussein ❤️❤️🙏 I'll use SSE for a lightweight Push Notifications service for my backend API server

@8nasir7

3 жыл бұрын

That's what I am thinking to use it for. Its one directional so why not.

@aj-editssz

3 жыл бұрын

@@8nasir7 How will you achieve this when each user gets different set of notifications based on their account?

@8nasir7

3 жыл бұрын

@@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.

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!

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

Thank you for these awesome videos/crash courses. Can you show the implementation of service mesh/aws app mesh in microservice architecture.

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.

@hnasr

4 жыл бұрын

Nice use cases, websockets work for those too.. just little more overhead compared to SSE

Excellent intro on this topic - thank you!

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.

@mrluismartinezzz

3 жыл бұрын

Did you ever publish that app that notifies a react app? @Hadi Abedi

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!

Salam alaikum brother, keep going awesome work, your brother from Lebanon 🔥❤️

Awesome! Thank you brother, machaallah With love and respect from Algeria

@hnasr

4 жыл бұрын

Thank you!! all love to my subs from Algeria

Thank you soooo much for posting a link to your repo w/ your tutorial code. So many KZreadrs overlook this. Smh

@hnasr

Жыл бұрын

I sometimes forget myself. Thanks for your comment!

Hi Hussein , just subscribed and I'm loving it so far . Can this be used for notification?

Very nice Explanation, Thanks for sharing :)

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.

@_dinesh

2 жыл бұрын

I agree. SSE only support 6 parallel connection per client. So its a big problem. Its easy to implement but not great..

@dyto2287

2 жыл бұрын

@@_dinesh HTTP2 solves this issue. Since multiple SSE connections can be kept in parallel under one. There is no limit to SSE connections then.

@_dinesh

2 жыл бұрын

@@dyto2287 True true 🙌. My bad for not stipulating the limitation on HTTP/1. It does support 100 parallel connections on HTTP2.

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

@hnasr

3 жыл бұрын

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.

@theartist8835

3 жыл бұрын

@@hnasr Thanks for the clarification. keep up the great work.

Great video thank you so much for you teaching

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.

helped me lot to understand *SSE* .

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.

@GreenMarkoulis13

2 жыл бұрын

You have to manually cache the connections of each client and send to whomever you want each time

@chris1232123

2 жыл бұрын

@@GreenMarkoulis13 what do you mean? Do you have an example?

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!

very informative as always

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?

that's very good video thanks so much !!!

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?

What about sending initial data(like credentials) to server with GET parameters and receive user feed form there ?

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

For a chat app is it better to use ws or sse, we can say messages are not sent often, but are received often.

Hussein the backend king;❤️

We have a case where a schedule is running on server and we want to send messages to web clients. Server sent events work?

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?

@hnasr

4 жыл бұрын

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..)

@tekfreaks

4 жыл бұрын

@@hnasr Thanks for the reply hussein. Thanks for the video as well. Good content as always

i used SSE with on of BMW projects, where the server needed to send push notification to the cars in a one way communication-

SEE API ref says it can detect server changes... does it means you have do detect the changes explicitly on the server?

If I wanna load test an api with sse response. How can I do it

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 ?

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

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.

@commondev2595

2 жыл бұрын

Hey I have a very similar use case. Good to see such an informed comment here….

Can we use SSE for pushing notification ?

I used websocket for creating multiplayer game based on javascript canvas & java spring websocket server

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.

Thanks a lot brother!

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.

@chihabahmed5207

3 жыл бұрын

did you find any?

Seems like ChatGPT responding word by word to the client due to the slow LLM pipeline is a great use case for SSE?

Good tutorial and also so funny😆

Hi Hussein, why don't you start a discord sever for backend community?

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 ?

@hnasr

3 жыл бұрын

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

@mylaptop4582

3 жыл бұрын

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

@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

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

@IrfanAli-jl7vb

3 жыл бұрын

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.

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!

@cvconover

2 жыл бұрын

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.

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 )

@adityaghadge2067

Ай бұрын

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

I was about comment to make a video on SSEs. It's like you can read mind

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!

@adarshnair9846

3 жыл бұрын

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.

very great content bro, may Allah bless you

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 👍😀

@hnasr

4 жыл бұрын

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

@ritwickdey97

4 жыл бұрын

@@hnasr Yes... this cons is only for http/1.1

@anagnaikgaunekar9081

Жыл бұрын

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?

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.)

@hnasr

4 жыл бұрын

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!

@CharlieArehart1

4 жыл бұрын

@@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. :-)

@hnasr

4 жыл бұрын

@@CharlieArehart1 Thanks! the timestamp really helps! I went to the VPN hack video and put the the link in 4:13 to TLS hello ..

@CharlieArehart1

4 жыл бұрын

@@hnasr perfect. :) thx

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!

@hnasr

3 жыл бұрын

Farhan Yousaf correct SSE is stateful so you need stickiness. Layer 4 proxying should do the trick.

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.

@vadimkovrizhkin7412

Жыл бұрын

This is valid for http1 only

I'm lucky I found this

Why sse can't use as notification system?

@hnasr

2 жыл бұрын

You should be able to use it as a notification system

Thank you

How to add auth to a SSE ?

thank you.

They don't seem to work using Azure App Service for some reason...

@hnasr

3 жыл бұрын

Adam Smith interesting. need to check what the reverse proxy is doing,

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?

@hnasr

3 жыл бұрын

Yes SSE is perfect for notifications

@surflaweb

3 жыл бұрын

@@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.

@PevenFactory

3 жыл бұрын

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.

thank youuuuuu

❤

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.

Use case : www.infoq.com/presentations/linkedin-play-akka-distributed-systems/

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?

@hnasr

3 жыл бұрын

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

@blessyjulie4989

3 жыл бұрын

@@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.

@hnasr

3 жыл бұрын

The code in the video Explains how to do so. github.com/hnasr/javascript_playground/blob/master/server-sent-events/index.js

epic moment 8:33 bbaaadduuuuudduuu

How old is SSE?

Is SSE only limited to the browsers?

@hnasr

3 жыл бұрын

No it can work with any HTTP client, as long proper timeouts are set

Sir please do video on Clean architecture.

@firasdarwish

4 жыл бұрын

+1

@8Trails50

4 жыл бұрын

No one actually uses clean architecture in the real world. Save your time.

@MaximilianBerkmann

3 жыл бұрын

@@8Trails50 Not true, it seems rare indeed.

put your garbage here, you just made me laugh out loud

Can SSE handle multiple clients?

To skip "first the earth cooled" history lessons, jump forward 4 minutes or more.

Good

Missing these coding days

***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