In this lecture we learn how to implement server-sent events from a NestJS backend in order to stream real time data to a Next.js cryptocurrency dashboard.
Length 23:56
Captions English (Generated), Spanish (Auto-translated), French (Auto-translated), Korean (Auto-translated), Portuguese (Auto-translated), Vietnamese (Auto-translated) #nestjs #nextjs #sse #typescript #web-development #dashboard #cryptocurrency #coding-tutorial #axios #rxjs
0:01 Hey everyone. Today we're gonna take a look at using 0:04 server side 0:04 events in a NestJS application. We're going to emit 0:08 server side events from a NestJS server and consume them 0:12 from a NextJS UI to build a crypto dashboard 0:16 and display real-time prices for cryptocurrencies. 0:21 Now, server side events are persistent long-lived connections 0:24 between 0:24 the server and the client that allow us to push data from the 0:28 server to the client at regular intervals or whenever we want to 0:32 emit data to the client. It's quite similar to 0:35 WebSockets, however, it's still occurring over the HTTP 0:39 protocol, 0:40 so we can easily get set up with it inside of a NestJS 0:43 application connected to a NextJS application. 0:47 Let's go ahead and see how we can utilize this pattern so you can add it to your 0:50 toolkit. 0:52 So as always, we'll use the Nest CLI to generate a new 0:55 project. 0:56 You can get the latest Nest CLI with npm install 0:59 -g 1:01 @nestjs/cli. 1:04 Once we have the NestJS CLI installed, I'll run nest 1:09 new 1:10 nestjs-sse. I'll go ahead and choose pnpm as 1:14 my package manager and allow the package to finish 1:17 bootstrapping. 1:18 All right, so with our project initialized, 1:20 we can CD inside of it, 1:22 and now I want to go ahead and install some dependencies we're gonna 1:25 use inside of 1:26 our application. 1:28 Now, we don't need any dependencies for server 1:30 side events. 1:30 NestJS handles them with the out-of-the-box packages. 1:34 However, we're gonna want to install NestJS Axios, 1:38 which is 1:38 the HTTP client we're gonna use to reach out to a 1:42 cryptocurrency API. 1:44 So let's pnpm install save 1:48 @nestjs/ axios. 1:50 So this is a Nest wrapper around Axios, and now we can 1:54 go ahead and open up our project in a code editor so 1:58 we can see our default Nest application. 2:01 In our main TS, we're listening on port 3000.
The rest of the transcript is for members.
Sign in 