The tutorial demonstrates setting up real-time WebSocket communication in a NestJS backend using Socket.io. The process covers installing necessary dependencies, creating a WebSocket gateway, configuring CORS, and injecting the gateway into a service to emit product-updated events to clients.
Length 6:27
Captions English (Generated), Spanish (Auto-translated), French (Auto-translated), Korean (Auto-translated), Portuguese (Auto-translated), Vietnamese (Auto-translated) #nestjs #websockets #socket.io #backend #programming #gateway #coding #tutorial #typescript #web development
0:00 So next up, we want the ability to get notified in 0:03 real time when our 0:04 products are sold or added, so that we're always representing the 0:08 user with the latest and most up-to-date version of our 0:11 products 0:12 listing. 0:14 So to accomplish this, we're going to look at implementing 0:16 WebSockets on 0:18 NestJS backend, and then connecting it to our Next.js UI. 0:22 WebSockets are a very popular way to implement two-way 0:26 communication in real time between a client and server. 0:30 We're gonna have a persistent TCP connection that gets established to our 0:34 back end, where we're gonna be able to send 0:36 and receive messages to the s- 0:38 to and from the server to get notified in real time whenever our 0:41 products update. So let's go ahead and get started in our 0:45 NestJS backend by setting up the dependencies we're gonna need 0:49 to support WebSockets. So open up a terminal in our 0:53 backend and he NPM install 0:57 NestJS/WebSockets 1:00 and then 1:00 NestJS/platform-socketio. 1:05 So we're gonna be using Socket.io to connect to our 1:09 backend as well as run our WebSocket implementation. 1:13 So Socket.io is a very popular open source WebSocket 1:16 implementation library. 1:19 Lastly, we're also gonna need to install Socket.io 1:22 directly since we're using it as an implementation here. 1:27 So with these dependencies initialized, we have everything we need to start 1:30 building a NestJS gateway. So a gateway is the 1:34 abstraction around WebSockets in NestJS. 1:37 It's how we set up a connection so that we can receive traffic from 1:41 UIs. Let's go ahead and create this gateway in products. 1:44 We'll have a new products.gateway.ts. 1:48 So we'll go ahead and export class ProductsGateway, 1:53 and this is gonna be decorated with 1:55 @WebsocketGateway from 1:58 NestJS/WebSockets. So this is tells NestJS that 2:02 this class is a gateway provider, and will receive 2:05 traffic for WebSocket connections. 2:08 We of course need to instantiate this as a provider in our
The rest of the transcript is for members.
Sign in 