Bootcamp backendontwikkeling met Node.js · Les

Realtime-chatapplicatie

Bouw een eenvoudige realtime-chatapplicatie die het broadcasten van berichten en privéberichten demonstreert.

Les 6 van 611 stappen

Realtime-chatapplicatie is een gratis Bootcamp backendontwikkeling met Node.js-les op CoddyKit. Dit is les 6 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.

Wat maakt een chatapp realtime?

Met realtime-chatapplicaties kunnen gebruikers direct berichten versturen en ontvangen, zonder hun browser te vernieuwen.

Dit wordt mogelijk gemaakt door WebSockets, die een persistent, bidirectioneel communicatiekanaal tussen de client en server bieden.

In deze les bouwen we een eenvoudige chatapp met NestJS, waarin we het uitzenden van berichten en privéberichten demonstreren.

Onze chatgateway instellen

In NestJS is een Gateway een klasse met de annotatie @WebSocketGateway() die WebSocket-verbindingen en -berichten verwerkt.

Deze fungeert als toegangspunt voor realtimecommunicatie. We geven een poort op voor onze WebSocket-server.

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

@WebSocketGateway(3001, { cors: true }) // Port 3001, enable CORS
export class ChatGateway {
  @WebSocketServer() server: Server; // socket.io server instance

  // More logic will go here
}

Clientverbindingen beheren

Onze gateway moet weten wanneer clients verbinding maken en de verbinding verbreken. We implementeren de interfaces OnGatewayConnection en OnGatewayDisconnect.

Zo kunnen we logica uitvoeren wanneer een nieuwe gebruiker de chat betreedt of verlaat.

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

@WebSocketGateway(3001, { cors: true })
export class ChatGateway implements OnGatewayConnection, OnGatewayDisconnect {
  @WebSocketServer() server: Server;

  handleConnection(client: Socket, ...args: any[]) {
    console.log(`Client connected: ${client.id}`);
    // You might add client to a list here
  }

  handleDisconnect(client: Socket) {
    console.log(`Client disconnected: ${client.id}`);
    // Remove client from any lists
  }
}

Berichten naar iedereen sturen

Om een bericht te zenden luisteren we naar een gebeurtenis (bijvoorbeeld 'sendMessage') van een client. Zodra die is ontvangen, gebruiken we this.server.emit() om het bericht naar ALLE verbonden clients te sturen.

De annotatie @SubscribeMessage() koppelt binnenkomende WebSocket-berichten aan verwerkingsmethoden.

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

@WebSocketGateway(3001, { cors: true })
export class ChatGateway implements OnGatewayConnection, OnGatewayDisconnect {
  @WebSocketServer() server: Server;

  handleConnection(client: Socket) { /* ... */ }
  handleDisconnect(client: Socket) { /* ... */ }

  @SubscribeMessage('sendMessage')
  handleMessage(@MessageBody() data: { message: string, senderId: string }): void {
    console.log(`Message from ${data.senderId}: ${data.message}`);
    this.server.emit('receiveMessage', data); // Broadcast to all
  }
}

Clientzijde: eenvoudige chatinteractie

Aan de clientzijde gebruiken we een bibliotheek zoals socket.io-client om verbinding te maken met onze NestJS-gateway.

Vervolgens kunnen we berichten emitten en met on naar gebeurtenissen luisteren om uitzendingen te ontvangen.

// index.html (conceptual client-side script)
const socket = io('http://localhost:3001');

socket.on('connect', () => {
  console.log('Connected to chat server!');
  socket.emit('sendMessage', {
    message: 'Hello everyone!',
    senderId: 'user123'
  });
});

socket.on('receiveMessage', (data) => {
  console.log(`New message: ${data.message} from ${data.senderId}`);
  // Update chat UI
});

Specifieke gebruikers aanspreken (privéchat)

Berichten zenden is ideaal voor algemene aankondigingen, maar hoe zit het met privégesprekken tussen twee gebruikers?

Voor privéberichten hebben we een manier nodig om afzonderlijke clients te identificeren en alleen naar hen, of naar een specifieke groep (een 'room'), berichten te sturen.

Afzonderlijke clients identificeren

Om privéberichten te versturen moeten we de unieke ID van een gebruiker (bijvoorbeeld uit diens aanmelding) koppelen aan de specifieke WebSocket-verbindings-ID (client.id).

We kunnen deze koppeling opslaan in een eenvoudig object of een Map binnen onze gateway.

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

@WebSocketGateway(3001, { cors: true })
export class ChatGateway implements OnGatewayConnection, OnGatewayDisconnect {
  @WebSocketServer() server: Server;
  private connectedUsers: Map<string, string> = new Map(); // userId -> socketId

  handleConnection(@ConnectedSocket() client: Socket) {
    const userId = client.handshake.query.userId as string; // Get user ID from query
    if (userId) {
      this.connectedUsers.set(userId, client.id);
      console.log(`User ${userId} connected with socket ID: ${client.id}`);
    } else {
      console.log(`Client connected without userId: ${client.id}`);
    }
  }

  handleDisconnect(@ConnectedSocket() client: Socket) {
    const userId = [...this.connectedUsers.entries()]
                    .find(([key, val]) => val === client.id)?.[0];
    if (userId) {
      this.connectedUsers.delete(userId);
      console.log(`User ${userId} disconnected.`);
    } else {
      console.log(`Client disconnected: ${client.id}`);
    }
  }
  // ... handleMessage for broadcasting ...
}

Directe berichten naar een gebruiker sturen

Met onze koppeling tussen gebruiker en socket kunnen we nu rechtstreeks berichten naar de socket van een doelgebruiker sturen.

We luisteren naar een gebeurtenis 'privateMessage', zoeken de socket-ID van de ontvanger op en gebruiken this.server.to(socketId).emit().

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

@WebSocketGateway(3001, { cors: true })
export class ChatGateway implements OnGatewayConnection, OnGatewayDisconnect {
  @WebSocketServer() server: Server;
  private connectedUsers: Map<string, string> = new Map(); // userId -> socketId

  handleConnection(client: Socket) { /* ... */ }
  handleDisconnect(client: Socket) { /* ... */ }
  @SubscribeMessage('sendMessage')
  handleMessage(data: { message: string, senderId: string }): void { /* ... */ }

  @SubscribeMessage('privateMessage')
  handlePrivateMessage(
    @MessageBody() data: { recipientId: string, message: string, senderId: string }
  ): void {
    const recipientSocketId = this.connectedUsers.get(data.recipientId);

    if (recipientSocketId) {
      this.server.to(recipientSocketId).emit('receivePrivateMessage', {
        message: data.message,
        senderId: data.senderId
      });
      console.log(`Private message from ${data.senderId} to ${data.recipientId}`);
    } else {
      console.log(`Recipient ${data.recipientId} not found or offline.`);
    }
  }
}

Rooms gebruiken voor groepsgesprekken

Voor groepsgesprekken, of zelfs gesprekken tussen twee personen, zijn Socket.IO-rooms een krachtige functie. Clients kunnen een room 'joinen', waarna je berichten naar die specifieke room kunt zenden.

client.join('roomName'): voegt een client toe aan een room.
this.server.to('roomName').emit(): verstuurt een bericht naar alle clients in die room.

Dit vereenvoudigt het beheer van de berichtdistributie voor meerdere deelnemers.

Berichttypen onderscheiden

Stel je een NestJS-chatapplicatie voor. Een gebruiker verstuurt een bericht. Je wilt ervoor zorgen dat alleen een specifieke groep van vijf gebruikers (die allemaal online zijn) dit bericht ontvangt, en niet iedereen die verbonden is.

Beantwoord dit in de interactieve les

Realtimechat: openbaar en privé

In deze les heb je geleerd een eenvoudige realtime-chatapplicatie te bouwen met NestJS WebSockets.

We hebben een Gateway ingesteld om verbindingen te verwerken.
We hebben berichten naar alle verbonden clients gezonden.
We hebben privéberichten verkend door gebruikers-ID's aan socket-ID's te koppelen.
We hebben kort gekeken naar het gebruik van Socket.IO-rooms voor efficiënte groepscommunicatie.

Deze concepten vormen de basis voor het maken van interactieve realtimefuncties in je applicaties!

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 “Realtime-chatapplicatie” gratis?

Ja — de volledige tekst van “Realtime-chatapplicatie” 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 “Realtime-chatapplicatie”?

Bouw een eenvoudige realtime-chatapplicatie die het broadcasten van berichten en privéberichten demonstreert. 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 6 van 6.

Hoe lang duurt de les “Realtime-chatapplicatie”?

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