Bootcamp backendontwikkeling met Node.js · Les

Een realtimechatapplicatie bouwen

Ontwikkel een volledig functionele realtimechatapplicatie om uw begrip van WebSockets en Socket.IO te verdiepen.

Les 5 van 611 stappen

Een realtimechatapplicatie bouwen is een gratis Bootcamp backendontwikkeling met Node.js-les op CoddyKit. Dit is les 5 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.

Een realtime chatapp bouwen

Welkom! In deze les brengen we je kennis van WebSockets en Socket.IO samen om een praktische realtime chattoepassing te bouwen.

Dit praktijkproject versterkt je begrip van hoe clients en servers direct met elkaar communiceren, waardoor live-interactie mogelijk wordt.

Server instellen: Express en Socket.IO

Laten we eerst onze Node.js-server instellen met Express en Socket.IO integreren. Deze basis handelt onze HTTP-aanvragen voor het aanbieden van de HTML-pagina af en brengt realtime WebSocket-verbindingen tot stand.

Vergeet niet de afhankelijkheden te installeren: npm install express socket.io

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server);

// Serve our HTML file
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

// Listen for new Socket.IO connections
io.on('connection', (socket) => {
  console.log('A user connected');
});

// Start the server
server.listen(3000, () => {
  console.log('Listening on *:3000');
});

Clientverbindingen afhandelen

Wanneer een client succesvol verbinding maakt met onze Socket.IO-server, wordt een gebeurtenis 'connection' verzonden. Op dezelfde manier treedt er een gebeurtenis 'disconnect' op wanneer een client de browser sluit of de verbinding verliest.

Met deze gebeurtenissen kunnen we bijhouden wie momenteel online is.

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server);

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  console.log('A user connected');

  // Listen for client disconnections
  socket.on('disconnect', () => {
    console.log('User disconnected');
  });
});

server.listen(3000, () => {
  console.log('Listening on *:3000');
});

Chatberichten uitzenden

In een chattoepassing moet een bericht van één gebruiker zichtbaar zijn voor alle andere verbonden gebruikers. We bereiken dit door te luisteren naar een gebeurtenis 'chat message' van een client en vervolgens io.emit() te gebruiken om het bericht naar iedereen uit te zenden.

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server);

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  console.log('A user connected');

  // Listen for 'chat message' from this client
  socket.on('chat message', (msg) => {
    console.log('message: ' + msg);
    io.emit('chat message', msg); // Broadcast to all connected clients
  });

  socket.on('disconnect', () => {
    console.log('User disconnected');
  });
});

server.listen(3000, () => {
  console.log('Listening on *:3000');
});

HTML-structuur aan de clientkant

Laten we nu een eenvoudig index.html-bestand maken. Dit wordt de gebruikersinterface voor onze chattoepassing. De interface heeft een invoerveld nodig om berichten te typen en een lijst (<ul>) om ze weer te geven.

Neem vooral het script van de Socket.IO-clientbibliotheek op via /socket.io/socket.io.js!

<!DOCTYPE html>
<html>
  <head>
    <title>CoddyKit Chat</title>
    <style>
      body { margin: 0; padding-bottom: 3rem; font-family: sans-serif; }
      #form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
      #input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
      #input:focus { outline: none; }
      #form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages > li { padding: 0.5rem 1rem; }
      #messages > li:nth-child(odd) { background: #eee; }
    </style>
  </head>
  <body>
    <ul id="messages"></ul>
    <form id="form">
      <input id="input" autocomplete="off" /><button>Send</button>
    </form>
    <script src="/socket.io/socket.io.js"></script>
    <!-- Client-side JavaScript will go here -->
  </body>
</html>

Client: berichten verzenden en ontvangen

Nu voegen we JavaScript toe aan onze index.html. Dit script zal:

Verbinding maken met de Socket.IO-server.
Een gebeurtenis 'chat message' verzenden wanneer het formulier wordt ingediend.
Inkomende gebeurtenissen 'chat message' opvangen en weergeven.

De functie io() maakt automatisch verbinding met de server waarop het script wordt aangeboden.

<!-- ... (inside index.html, before </body>) ... -->
    <script src="/socket.io/socket.io.js"></script>
    <script>
      const socket = io(); // Connect to the Socket.IO server

      const form = document.getElementById('form');
      const input = document.getElementById('input');
      const messages = document.getElementById('messages');

      // Send message when form is submitted
      form.addEventListener('submit', (e) => {
        e.preventDefault(); // Prevent page reload
        if (input.value) {
          socket.emit('chat message', input.value); // Emit event to server
          input.value = ''; // Clear input field
        }
      });

      // Listen for incoming messages and display them
      socket.on('chat message', (msg) => {
        const item = document.createElement('li');
        item.textContent = msg;
        messages.appendChild(item);
        window.scrollTo(0, document.body.scrollHeight);
      });
    </script>
  </body>
</html>

Bijnamen van gebruikers toevoegen (server)

Om de chat persoonlijker te maken, voegen we bijnamen van gebruikers toe. Op de server kunnen we voor elke verbonden socket een bijnaam opslaan. We introduceren een nieuwe gebeurtenis, 'set nickname', waarmee clients hun gekozen naam kunnen versturen.

Deze bijnaam wordt vervolgens samen met hun berichten opgenomen.

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server);

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  let nickname = 'Anonymous'; // Default nickname for new connections

  socket.on('set nickname', (name) => {
    nickname = name;
    console.log(`${nickname} connected`);
    io.emit('chat message', `${nickname} joined the chat`);
  });

  socket.on('chat message', (msg) => {
    io.emit('chat message', `${nickname}: ${msg}`); // Prepend nickname to message
  });

  socket.on('disconnect', () => {
    console.log(`${nickname} disconnected`);
    io.emit('chat message', `${nickname} left the chat`);
  });
});

server.listen(3000, () => {
  console.log('Listening on *:3000');
});

Client: bijnamen instellen en weergeven

Aan de clientkant moeten we de gebruiker bij de eerste verbinding om een bijnaam vragen en deze vervolgens via onze nieuwe gebeurtenis 'set nickname' naar de server sturen. We werken ook de weergave aan de clientkant bij, zodat berichten met de bijnaam van de afzender worden getoond.

<!-- ... (inside index.html, before </body>) ... -->
    <script src="/socket.io/socket.io.js"></script>
    <script>
      const socket = io();

      const form = document.getElementById('form');
      const input = document.getElementById('input');
      const messages = document.getElementById('messages');

      // Prompt for nickname on connection
      let nickname = prompt('Please enter your nickname:');
      if (!nickname) nickname = 'Guest' + Math.floor(Math.random() * 1000);
      socket.emit('set nickname', nickname); // Send nickname to server

      form.addEventListener('submit', (e) => {
        e.preventDefault();
        if (input.value) {
          socket.emit('chat message', input.value);
          input.value = '';
        }
      });

      socket.on('chat message', (msg) => {
        const item = document.createElement('li');
        item.textContent = msg;
        messages.appendChild(item);
        window.scrollTo(0, document.body.scrollHeight);
      });
    </script>
  </body>
</html>

Online gebruikers bijhouden (bonus)

Om onze chat uit te breiden, voegen we een functie toe die toont wie momenteel online is. De server kan een Set met actieve bijnamen bijhouden en deze lijst uitzenden telkens wanneer een gebruiker verbinding maakt of de verbinding verbreekt.

Clients luisteren naar een gebeurtenis 'online users' om hun gebruikersinterface bij te werken.

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server);

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

const onlineUsers = new Set(); // Store nicknames

io.on('connection', (socket) => {
  let nickname = 'Anonymous';

  socket.on('set nickname', (name) => {
    nickname = name;
    onlineUsers.add(nickname);
    io.emit('chat message', `${nickname} joined the chat`);
    io.emit('online users', Array.from(onlineUsers)); // Broadcast updated user list
  });

  socket.on('chat message', (msg) => {
    io.emit('chat message', `${nickname}: ${msg}`);
  });

  socket.on('disconnect', () => {
    onlineUsers.delete(nickname);
    io.emit('chat message', `${nickname} left the chat`);
    io.emit('online users', Array.from(onlineUsers)); // Broadcast updated user list
  });
});

server.listen(3000, () => {
  console.log('Listening on *:3000');
});

Controle van de chatwerkstroom

Bekijk de volledige stroom van een bericht in onze Socket.IO-chattoepassing, vanaf het moment waarop één client het verstuurt tot het moment waarop alle andere clients het ontvangen.

Welke van de volgende stappen zijn essentieel om deze realtimecommunicatie mogelijk te maken?

Beantwoord dit in de interactieve les

Samenvatting: een chatapp bouwen

Gefeliciteerd! Je hebt met Node.js, Express en Socket.IO met succes een functionele realtimechatapplicatie gebouwd.

We hebben de server ingesteld om WebSocket-verbindingen en HTTP-verzoeken af te handelen.
We hebben broadcasting geïmplementeerd om berichten direct naar alle verbonden gebruikers te sturen.
We hebben een interface aan de clientzijde gemaakt om dynamisch berichten te verzenden en ontvangen.
We hebben de chat uitgebreid met gebruikersbijnamen en realtime bijhouden van online gebruikers.

Dit project laat zien hoe krachtig WebSockets en Socket.IO zijn voor het maken van interactieve, live-ervaringen.

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 “Een realtimechatapplicatie bouwen” gratis?

Ja — de volledige tekst van “Een realtimechatapplicatie bouwen” 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 “Een realtimechatapplicatie bouwen”?

Ontwikkel een volledig functionele realtimechatapplicatie om uw begrip van WebSockets en Socket.IO te verdiepen. 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 5 van 6.

Hoe lang duurt de les “Een realtimechatapplicatie bouwen”?

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