Server-Sent Events with NestJS
Vložit
- čas přidán 29. 05. 2022
- In this super quick tutorial we are going to look at how to allow a server to send data to a client at any time using server-sent events. We'll also take a quick look at the EventSource API which is the interface that we're use to connect the client to the server.
Just realized I misspelled “server” within the first 5 seconds of the video… woops 😅 🤦♂️
Well an engineer he is 😅. Good video!
Another lovely video Marius, being follow your nest tutorials and you have really been helpful.
Hello @Marius can you explain deployment of NestJs app with TypeORM-MySql database from scratch because I'm stuck at the production. Please provide one video from scratch which basically includes NestJs MySQL and TypeORM deployment.
My all time NestJS guy thank you so much for this and for all of your content
love your videos, you hooked me on nestjs. coming from angular this is a bliss on the server side
As always, nice job! I learnt about SSE 2 weeks ago with Mercure but looks like a promising alternative to web sockets.
Thank you for this useful video! Never heard about this technique before.
always good to see another banger video
Amazing Tutorial, please do the video about observables :)
Wow, I didn’t know about this. Thank you! 🤩🙏🏻
Thank you so much for this wonderful video!
thanks for the video! a quick question, if I use the sse in the same controller with a rest API would both work seperately?
I think so, I don’t see any problems with that. You’re really just defining separate routes, and if one happens to be for SSE I think it should be fine
the best NestJS lessons, everything is clear and with simple examples! can you please tell which font for VS Code you use?
Thanks! I think just the standard font? I don’t remember changing it
Learnt Something new. Keep it up.
Really helpful
Thank you Marius.
just what I was looking for
Hey, Marius, great lesson, thank you.
I have a question: we are building a CRM using nestJS and basically we want to automatiically refresh the users screen whenever an opportunity is created or a funnel step is changed, deleted or created... So the backend should know every client so that it can fire the events to the right person. Do you think server-sent events would be the way to go? Or websockets?
I just don't know how the server side events will differentiate each client. Is there any way the client can identify yourself? THanks
There’s definitely ways you can identify the client, like some ideas here:
stackoverflow.com/questions/34992442/how-server-sent-event-send-response-to-a-specific-client
If you’re authenticating users you can set a cookie that determines their session id, that should come along with the request.
If you’d like to make a comparison with the setup for nest specifically, I do have a websockets video with Nest in the channel
@@mariusespejo Thank you so much for your time and link, i'll take a look
More videos please, thanks!!!
nice tutorial, thanks
Appreciate the content!
Thank you! Glad you like it
Great content on youtube when compare to others.
It would be great if you also make videos on deployments :)
Thank you!! Deployment is a large topic but definitely thinking of ways to incorporate it in the channel
@@mariusespejo Thanks, it would be really helpful to many us with deployment video. Please make incorporate to this channel :)
wow!! nice video !! please make observable and rx video
How would you send a message from a queue like SQS to the client through SSE? The code you are showing is very basic and is already available on the nestjs offlcial doc.
Yes… it’s a beginner tutorial. You can take a look at this package as one way to consume sqs www.npmjs.com/package/@ssut/nestjs-sqs
Hi 👋👋👋 thanks for your content
👋👋👋
hey Marius, really nice videos - thanks a lot! How could we close this event now using rxjs ?
ok it seems the @sse decorator is taking care of that when returning an observable...
Please do make a video about RXJS and Observables!
Can I ask why EventMessage has the type of "string | Object"? I looked at the docs and it states that the return value can only be a string or an event stream? Is the type of the object just to be sure to cover the event-stream?
Yeah pretty much to match the spec, if you read about it under the hood what’s really being sent by NestJS is something that looks like this:
developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events#examples
Which you’ll notice pretty much it makes you assume the payload of the event is generally either a basic string or an object.
@@mariusespejo Thanks mate.
So far I have been following along with your tutorials and I really love NestJS, for the most :)
But I have to create an API with is going to handle a large amount of data, sometimes I will have to recieve a lot of data, transform it and inserting between 1K-10K rows in a database. Do you think NestJS with TypeORM could handle that? Or woulda .NET Core API with React on top of it be a better solution for this?
nestjs and typeorm are just frameworks/libraries. On their own they don’t determine what can or can’t be handled based on load, that sounds like a question more for your infrastructure… e.g. are you thinking about scalability… does your infrastructure allow spinning up additional instances of the server when one can’t handle all the requests… does your database handle multiple concurrent writes, etc. etc.
In general what is “better” can be very subjective. There’s a lot of variables at play including ecosystems… if you can’t decide I suggest doing a proof of concept with your top options and go from there
@@mariusespejo Thanks once again for the thorouw reply Marius!
I guess what I was thinking about the most is that I would be afraid that Node/Nestjs would be blocking incommin requests to while the application was inserting ~10K rows in the database and at some point it would fail.
The whole infrastructure and scalability taken care of and it should be fairly easy to scale horizontally, however I would love if I didn't have to do so in order to keep the cost low.
But I will probably end up trying to make two small demos with a lot of inserts to test the performance.
Thanks
I highly recommend reading about the event loop and how it works. I think a lot of people assume “oh it’s single thread so long tasks are blocking” it’s not really that simple. E.g. from my understanding database IO is an asynchronous event and should be non-blocking. If you’re having to transform that data synchronously before or after inserting to the database, that probably is blocking however how much that becomes a problem depends on your underlying algorithm. Also you can setup your API to not necessarily wait for the entire thing to be done before responding… you could take an event-driven approach. In general I think that NodeJS scales fairly well if used properly, even on a single server.
nodejs.org/en/docs/guides/blocking-vs-non-blocking/
(Also, I’d love a video about RxJs in a Nest context.)
So if I wanted to return this with modern javascript libraries, how could I do it?
How can I listen to this with Angular or React?
Using the EventSource API as mentioned and shown in the video.
Thumbs up Marius. Can I use this logic to implement in-app notifications?
Totally! As long as the 6 tab limitation isn’t a problem for you
@@mariusespejo thank you, you are the best
i have scenario regarding caching a request,if 200 concurrent users hitting an api ,how should I queue 199 requests,n execute single request api and cache it,once caching is done all the 199 requests need to be processed n data need to be fetched from cached value
I would imagine it’s not really about queueing at all, … I imagine you have some kind of store for the cache? Then your store just needs to be updated to cache the response of the first request… then any requests made after that simply needs to first check if the value is in the store and if not then it must be the first request. If you really want to try some kind of waiting/queue behavior I imagine you can use locks to pull that off. E.g. if data not in cache, acquire lock and fetch data, store data in cache. If data not in cache and unable to acquire lock, just wait (it means another request already initiated)
@@mariusespejo the main purpose is caching n storing ,but when concurrent requests are made ,node is async so all will try to contact db,though I write any check to get the value from cache. How could I avoid load at db. First request to that api need to contact db and other requests need to be queued until I get response from first request then i will cache the value ,later i will pass requests in the queue which can get the values from cache as we are writing a check logic in the beginning
@@mariusespejo i know my question is not related to the video,but i thought u have that exposure to resolve the issues,as your nestjs videos are so informative n precise n smooth to follow up
For me it does not works, What the error is, I got the error like evetsource.onmessage is not a function, If anyone know that answer please answer
is there this limitation when we connecting from for example mobile application?
Depends on the mobile browser itself if it supports the client api or not
Thank you very much for making such a good video. Can you making a video about GraphQL pagination for NestJS? I search on google for a whole week and cant find a tutorial (sorry im new to node and nestjs). Anyway thanks for greate video.
Good topic idea, I’ll see if I can cover it at another time, thanks!
Hi! Thank you for the great content, can you explain how i can use SSE for nuxt3 please?
The consumings side should be the same, it’s the same api for client. The server/publishing side I’m not sure for nuxt specifically, I suggest looking at docs
Can you use react with this as client side?
Yes, should work in any framework
How can we avoid interval, I just want to run when for examplen when some user login?
You’ll need to add some kind of event emitter and make your sse method be subscribed to those login events. You might get some ideas here: docs.nestjs.com/techniques/events
@@mariusespejo thanks brother, I will check it out and testing it 🫡
Can i get a specific event for authenticated users ?!
It’s up to you what event you trigger so yes
Yo, Marius, u ok? Haven’t posted in a while… hope all is well.
Hi Milena! Thanks for checking in, all is good just been busy. Will be posting more soon 🙂
Please make a notification feature with sse
I mean pretty much if you take what I did here, and added something on the client side which pops up a notification… that’s pretty much it
@@mariusespejo I am trying but I am facing some issues with observables, i guess I need to brush up observables concept a little bit
Hey Man,
Please keep posting my videos 😁
Thanks a lot for your effort and time
how about saga NestJS ♥
But how to send SSE, for example, at the time of creating a new post, and not just in an endless loop?
To be clear the loop is just an example. You need to basically subscribe or listen to some kind of event, which then triggers your SSE. You can accomplish this with a couple different ways using observables or event emitters
@@mariusespejo that is, if i run the this.sendEvent(anyData) function from the neighboring endpoint, all clients will receive the message?
The point is not to directly call this.sendEvent, but that sendEvent itself should be subscribed to something, and it will automatically broadcast to clients when what it is subscribed to gets a new event
Couple examples here using an observable stream that you can add events to, or using event emitter
stackoverflow.com/questions/67202527/can-we-use-server-sent-events-in-nestjs-without-using-interval
@@mariusespejo this is actually a very complex topic and the simple looping example never covers the topic
Looks like a deepfake of SignalR.. that too had issues and this one is also has... nothing beats the sockets.
Well this is a standard API not an ASP.NET library like SignalR. Every solution has tradeoffs, even websockets
@@mariusespejo Agreed, can we use SSE to handle graphql subscriptions , any thoughts on that?
Traditionally most graphql implementations, e.g. apollo, have used websockets to implement subscriptions. Wundergraph wrote about using SSE instead but I don’t know much about it yet
wundergraph.com/blog/deprecate_graphql_subscriptions_over_websockets
Not helpful.
😂