Server-Sent Events with NestJS

hey how's it going today we're going to talk about server sent events which is one of the techniques you can use to automatically push data to your client from your server in real time now in a previous video that i made i talked about websockets which is sort of the same thing but a key distinction with websockets and server sent events is that websockets is a bi-directional communication meaning that both the server can push data and the client can also push data back to the server whereas server send events as the name implies is unidirectional it's only for situations where you only want the data coming from the server but you never have data coming back from the client so in this video we're going to do a super quick tutorial on how to get up and running with servers and events using sjs and then we're also going to take a look at the event source api which is the interface that you're going to use on the client side to basically subscribe to events from the server all right so i have a terminal here open to my desktop and i'm just going to use the nesjs cli to create a new application so i'm going to do nest new ssc demo so this is the name of my project i'll hit enter here it'll install all right after that completes we'll open up the code in vs code and we'll go into app.controller.ts and this is where we're going to start adding some stuff right all right so what we're gonna do here first is we're gonna do let's create a new method let's call send event and then we're gonna add a decorator here using sse and then we have to provide a string in here which as you can see in the documentation here is the path so let's just call this event so structurally it's very similar to just like any other controller route right except that instead of you specifying the http method you specify the sse decorator with a path right like similarly this also takes in a path all right so let's delete this so that we can focus on the sse event here now one of the things that js requires for ssc events is that you're returning an observable and as you can see in sjs it will use rxjs observables which is already installed it's one of the dependencies that sjs uses and then we have to specify the shape of the data that we're going to return to the client so let's define real quick an interface and let's call this message event and let's just say that there's data in here that is a string or perhaps it could also be an object right so we'll take this message event and we'll put it in here which basically says that our ssc method here returns something of this shape right so we need to return something that has data in it and some string now there's a missing piece in here because it can't just be this event it needs to be unobservable so we're going to pull a couple of things from rxjs to pull this off and you don't need to really be that aware of what rxjs is or even what an observable is that's something that i can probably cover at another video let me know if you're interested in that but anyways let me write a few lines of code here and i'll explain what it does so i'm going to pull an interval from rxjs and i'm going to pass in 1000 in here now what this does is basically it's gonna on an interval return a number right and we're saying every second so this is a thousand milliseconds it's gonna return a number so you can imagine that at every second it's gonna go zero one two right and i'll go keep doing that forever every second and what we're going to do with that is we'll take each number we'll pipe it and then we'll we'll basically map the number to some kind of uh string or object right so we'll do map and again these are all coming from rxjs so make sure to import map from rxjs so again remember this is returning a number every second so so this is actually taking in a value let's call num which is a number and we're just going to map that to a string let's do hello plus nom right so what we expect to happen here is again every second it's gonna return a number and then we're mapping that to a string that just says hello and that number so you can imagine that every second it's gonna do hello zero hello 1 hello 2 and so on right like it just keeps going so basically we're just keep we're going to keep pinging whoever the client is that is connected to us and we're going to keep saying hello 0 1 2 and so on all right and actually that's the basics of what you need to know in terms of creating a server sent event you just need to create a method in a controller and you need to return an observable of some kind of shape right and now we're going to create a client that we're going to use to test this out so what i'm going to do is i'm going to create a new folder i'm going to call this client and within that folder i'm going to create an index.html right and within this index.html we're just going to create a script right and this is where we're gonna where we're gonna connect to our server in a little bit here but first before we do that what we're gonna do is we need a way to actually serve up this this index.html so an easy way to do that is using the server static module so we're going to do npm install save at nsgs serve static once you have that installed we're gonna go to app module and then we're just gonna add an import in here from serve static and we're gonna say that we're gonna serve up whatever is in our client folder which is just our index.html now the catch is it's gonna do this at the base route of our server so we need to change our app controller here to have its own you know api base path so that it doesn't conflict with that so we're just going to add api here and this will will make sense in in a little bit all right so now in our index.html what we're going to do is as i mentioned earlier there is the event source api which is the api that you can use to basically subscribe to server send events and it's actually pretty simple we're just going to do event source equals new event source and all you need to pass in here is the path to the thing that you're subscribing to right so we said that we have a base path of api and then if we go back to our app controller we see that we also have a path here of event so what we need is slash api event and then this pretty much makes a persistent connection to the server and we can just subscribe to the event of a message so we're going to do event source on message now there's a payload that comes in here and then and then within the method is where we actually you know handle it so this payload is actually the same shape as this interface that we had on the server side the message event so we can just destructure the data here and what we'll do with this is just that every time a message comes in we're going to create a new li html element and then we'll just add uh the data in there as the text of it so we'll do message dot inner text and then we'll just pass in data right so we expect data here to be what we're returning here which is gonna be you know hello and then the number every one second and then as we create these elements and we fill in the text of it we're just going to add that to the document body all right and then at this point we can probably run our application and see everything running let's do npm run start dev now when i go to local host 3000 what that's going to do is it's going to make that connection right it's going to do event source on slash api event and then as you can see we're automatically subscribed and we're adding a new message at each push right and let me refresh just so you can see again cool so we're basically done with the tutorial at this point so there's really not much more to learn there is one gotcha that you need to understand though so you'll see on the event source documentation and mdn they have a warning in here that says uh if you're not using http 2 one of the problems with sse is that there's a max of six connections so let me kind of show what the problem is so right now we have effectively one connection so i'm going to open up six tabs to local host 3000 so as you can see right now i have six tabs open on localhost 3000 and they're all subscribing to the events notice what happens when i open up another one you can see that here it just spins like it fails to to connect because once you reach the six connections it basically kind of stops from there so if you're trying to compare this with websockets that's probably one of your your major considerations is your can you use http 2 with your application now one of the benefits that i see comparing with web sockets is that it's just it's dead simple right it like it really didn't take us that much time to get up and running and you know it's very simple to connect and close there's a pretty good documentation here and again the only catch is really if you can't use http 2 then there's a very low number of connections that you can make all right guys that's it for me today super quick tutorial hopefully it was interesting to you let me know in the comments if you have any thoughts or feedback

Channel: Marius Espejo

Views: 28,004

Keywords: server-sent, server-sent events, sever-sent event, websocket, websockets, nestjs, nestjs websocket, nestjs sse, nesjt server-sent events, nestjs server sent events, socket.io, ws

Id: ylFrG4m7FjU

Length: 9min 53sec (593 seconds)

Published: Mon May 30 2022