Bootcamp backendontwikkeling met Node.js · Les

Gatewayconfiguratie

Configureer WebSocket-gateways in NestJS en handel verbindingsgebeurtenissen, berichten en roombeheer af.

Les 4 van 611 stappen

Gatewayconfiguratie is een gratis Bootcamp backendontwikkeling met Node.js-les op CoddyKit. Dit is les 4 van 6. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Bootcamp backendontwikkeling met Node.js. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Bootcamp backendontwikkeling met Node.js bevat in totaal 6 lessen.

Realtime ontsluiten met Gateways

Welkom terug! In de vorige les hebben we geleerd over WebSockets. Nu bekijken we hoe NestJS realtimecommunicatie eenvoudig maakt met Gateways.

Zie een Gateway als een speciale controller voor WebSocket-verbindingen. Deze luistert naar berichten van clients en stuurt antwoorden terug, waardoor dynamische communicatie in twee richtingen mogelijk wordt.

Je eerste Gateway maken

Om een Gateway te maken gebruiken we de annotatie @WebSocketGateway(). Deze annotatie markeert een klasse als WebSocket-gateway.

Standaard gebruikt NestJS Socket.IO. Je kunt een poort, naamruimte of andere opties opgeven. We beginnen met een eenvoudige gateway:

import { WebSocketGateway,
         WebSocketServer } from '@nestjs/websockets';
import { Server } from 'socket.io';

// src/events.gateway.ts
@WebSocketGateway(3001) // Listens on port 3001 for WS
export class EventsGateway {
  @WebSocketServer() server: Server;
}

// src/app.module.ts (minimal)
import { Module } from '@nestjs/common';
import { EventsGateway } from './events.gateway';

@Module({
  providers: [EventsGateway],
})
export class AppModule {}

// src/main.ts (minimal)
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000); // HTTP app, WS runs alongside
}
bootstrap();

Configuratieopties voor Gateways

De annotatie @WebSocketGateway() accepteert een optioneel configuratieobject. Daarmee kun je aanpassen hoe je WebSocket-server zich gedraagt:

port: de poort waarop de WebSocket-server luistert (bijvoorbeeld 3001).
namespace: groepeer verbindingen onder een specifiek pad (bijvoorbeeld '/chat').
cors: configureer Cross-Origin Resource Sharing voor browserclients.
adapter: geef een aangepaste WebSocket-adapter op (bijvoorbeeld voor `ws` in plaats van `socket.io`).

Verbindingen verbreken en maken

Gateways kunnen reageren op verbindingen en verbroken verbindingen van clients met levenscycluskoppelingen. Dit zijn interfaces die je gateway kan implementeren:

OnGatewayInit: wordt eenmaal aangeroepen wanneer de gateway is geïnitialiseerd.
OnGatewayConnection: wordt aangeroepen wanneer een client verbinding maakt.
OnGatewayDisconnect: wordt aangeroepen wanneer een client de verbinding verbreekt.

Gebruik deze om instel- of opruimtaken uit te voeren.

import { WebSocketGateway,
         OnGatewayConnection,
         OnGatewayDisconnect,
         WebSocketServer } from '@nestjs/websockets';
import { Server, Socket } from 'socket.io';

// src/events.gateway.ts
@WebSocketGateway(3001)
export class EventsGateway
  implements OnGatewayConnection, OnGatewayDisconnect {
  @WebSocketServer() server: Server;

  handleConnection(client: Socket, ...args: any[]) {
    console.log(`Client connected: ${client.id}`);
  }

  handleDisconnect(client: Socket) {
    console.log(`Client disconnected: ${client.id}`);
  }
}

// src/app.module.ts (minimal)
import { Module } from '@nestjs/common';
import { EventsGateway } from './events.gateway';

@Module({
  providers: [EventsGateway],
})
export class AppModule {}

// src/main.ts (minimal)
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);
}
bootstrap();

Abonneren op clientberichten

Clients versturen berichten met een 'gebeurtenisnaam'. Je gateway luistert naar deze specifieke gebeurtenissen met de annotatie @SubscribeMessage().

De methode met deze annotatie ontvangt de client (socketinstantie) en de payload (gegevens die door de client zijn verstuurd).

import { WebSocketGateway,
         SubscribeMessage,
         WebSocketServer } from '@nestjs/websockets';
import { Server, Socket } from 'socket.io';

// src/events.gateway.ts
@WebSocketGateway(3001)
export class EventsGateway {
  @WebSocketServer() server: Server;

  @SubscribeMessage('sendMessage')
  handleMessage(client: Socket, payload: string): void {
    console.log(`Message from ${client.id}: ${payload}`);
    // Process payload, then send response
  }
}

// src/app.module.ts (minimal)
import { Module } from '@nestjs/common';
import { EventsGateway } from './events.gateway';

@Module({
  providers: [EventsGateway],
})
export class AppModule {}

// src/main.ts (minimal)
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);
}
bootstrap();

Berichten terugsturen naar clients

Zodra je gateway een bericht ontvangt, wil je vaak een antwoord sturen. Je kunt de WebSocketServer-instantie injecteren met @WebSocketServer().

Gebruik client.emit('eventName', data) om een bericht naar een specifieke client te sturen. Gebruik this.server.emit('eventName', data) om het naar alle clients te zenden.

import { WebSocketGateway,
         SubscribeMessage,
         WebSocketServer } from '@nestjs/websockets';
import { Server, Socket } from 'socket.io';

// src/events.gateway.ts
@WebSocketGateway(3001)
export class EventsGateway {
  @WebSocketServer() server: Server;

  @SubscribeMessage('echo')
  handleEcho(client: Socket, payload: string): void {
    console.log(`Received: ${payload} from ${client.id}`);
    client.emit('echoResponse', `You said: ${payload}`);
  }

  @SubscribeMessage('broadcast')
  handleBroadcast(client: Socket, payload: string): void {
    this.server.emit(
      'broadcastMessage', 
      `${client.id} broadcasted: ${payload}`
    );
  }
}

// src/app.module.ts (minimal)
import { Module } from '@nestjs/common';
import { EventsGateway } from './events.gateway';

@Module({
  providers: [EventsGateway],
})
export class AppModule {}

// src/main.ts (minimal)
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);
}
bootstrap();

Clients organiseren met rooms

Bij complexere applicaties wil je misschien niet elk bericht naar elke client zenden. Dan komen rooms goed van pas!

Met rooms kun je specifieke clients groeperen. Berichten kunnen vervolgens alleen naar clients in een bepaalde room worden gestuurd. Dit is ideaal voor chatkanalen, spellobby's of meldingen voor specifieke gebruikers.

Rooms betreden en verlaten

Socket.IO-clients kunnen rooms dynamisch betreden of verlaten. Je kunt dit vanuit je gatewaymethoden beheren met de client-instantie:

client.join(roomName): voegt de client toe aan de opgegeven room.
client.leave(roomName): verwijdert de client uit de opgegeven room.

Een client kan tegelijkertijd in meerdere rooms zitten.

import { WebSocketGateway,
         SubscribeMessage,
         WebSocketServer } from '@nestjs/websockets';
import { Server, Socket } from 'socket.io';

// src/events.gateway.ts
@WebSocketGateway(3001)
export class EventsGateway {
  @WebSocketServer() server: Server;

  @SubscribeMessage('joinRoom')
  handleJoinRoom(client: Socket, room: string): void {
    client.join(room);
    client.emit('joinedRoom', `You joined ${room}`);
    console.log(`${client.id} joined room: ${room}`);
  }

  @SubscribeMessage('leaveRoom')
  handleLeaveRoom(client: Socket, room: string): void {
    client.leave(room);
    client.emit('leftRoom', `You left ${room}`);
    console.log(`${client.id} left room: ${room}`);
  }
}

// src/app.module.ts (minimal)
import { Module } from '@nestjs/common';
import { EventsGateway } from './events.gateway';

@Module({
  providers: [EventsGateway],
})
export class AppModule {}

// src/main.ts (minimal)
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);
}
bootstrap();

Berichten naar specifieke rooms sturen

Zodra clients zich in rooms bevinden, kun je gerichte berichten versturen. Gebruik de methode server.to(roomName).emit('eventName', data).

Zo ontvangen alleen clients die op die specifieke room zijn geabonneerd het bericht, waardoor je realtime-updates efficiënt en relevant blijven.

import { WebSocketGateway,
         SubscribeMessage,
         WebSocketServer } from '@nestjs/websockets';
import { Server, Socket } from 'socket.io';

// src/events.gateway.ts
@WebSocketGateway(3001)
export class EventsGateway {
  @WebSocketServer() server: Server;

  @SubscribeMessage('roomMessage')
  handleRoomMessage(
    client: Socket,
    payload: { room: string; message: string },
  ): void {
    const { room, message } = payload;
    this.server
      .to(room)
      .emit('roomUpdate',
            `[${room}] ${client.id}: ${message}`);
    console.log(
      `Message in ${room} from ${client.id}: ${message}`
    );
  }
}

// src/app.module.ts (minimal)
import { Module } from '@nestjs/common';
import { EventsGateway } from './events.gateway';

@Module({
  providers: [EventsGateway],
})
export class AppModule {}

// src/main.ts (minimal)
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);
}
bootstrap();

Quiz over Gateway-configuratie

Welke van de volgende uitspraken over NestJS WebSocket Gateways en rooms zijn WAAR?

Beantwoord dit in de interactieve les

Samenvatting: beheers je Gateway

Goed gedaan! Je hebt geleerd hoe je NestJS Gateways configureert voor krachtige realtimecommunicatie.

We definieerden gateways met @WebSocketGateway().
We verkenden configuratieopties zoals poort en naamruimte.
We implementeerden levenscycluskoppelingen voor verbindingen en verbroken verbindingen.
We verwerkten clientberichten met @SubscribeMessage().
We gebruikten @WebSocketServer() om berichten te zenden en gerichte berichten te versturen.
Tot slot leerden we rooms te beheersen voor efficiënte clientgroepering en gerichte berichtgeving.

Vervolgens bouwen we een volledige realtime-chatapplicatie!

Gratis beginnen

Leer JavaScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 22
Lessen: 92

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Gatewayconfiguratie” gratis?

Ja — de volledige tekst van “Gatewayconfiguratie” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Bootcamp backendontwikkeling met Node.js wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Bootcamp backendontwikkeling met Node.js bevat in totaal 6 lessen.

Wat leer ik in “Gatewayconfiguratie”?

Configureer WebSocket-gateways in NestJS en handel verbindingsgebeurtenissen, berichten en roombeheer af. Je oefent met Bootcamp backendontwikkeling met Node.js door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Bootcamp backendontwikkeling met Node.js te beginnen?

Ervaring vooraf is niet nodig. Bootcamp backendontwikkeling met Node.js op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 6.

Hoe lang duurt de les “Gatewayconfiguratie”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Bootcamp backendontwikkeling met Node.js?

Ja. Elke les over Bootcamp backendontwikkeling met Node.js bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Bootcamp backendontwikkeling met Node.js