Workshop: Real-time communicatie met WebSockets en NPM

Doel: Studenten leren WebSockets te installeren en gebruiken met behulp van NPM om real-time communicatie in webapplicaties te implementeren.

<aside> ⚠️

Benodigdheden:

• Node.js en NPM geïnstalleerd
• Code-editor (bijv. VS Code)
• Basis kennis van JavaScript en Node.js </aside>

Stap 1: Project setup

1. Maak een nieuwe projectmap aan:
   • Open je terminal en navigeer naar de map waar je je project wilt maken.
   • Voer het commando mkdir websocket-workshop uit om een nieuwe map te maken.
   • Navigeer naar de nieuwe map met cd websocket-workshop.
2. Initialiseer een nieuw Node.js project:
   • Voer het commando npm init -y uit om een package.jsonbestand te maken met standaardinstellingen.

Stap 2: WebSocket library installeren

1. Installeer de ws library:
   • Voer het commando npm install ws uit om de ws library te installeren, die we zullen gebruiken voor WebSocket-functionaliteit.

Stap 3: Server-side code (Node.js)

1. Maak een server.js bestand:
   • Open je code-editor en maak een nieuw bestand genaamd server.js in de projectmap.
2. Voeg de volgende code toe aan server.js:

JavaScript

    const WebSocket = require('ws');
    const wss = new WebSocket.Server({ port: 8080 });

    wss.on('connection', ws => {
      console.log('Client connected');

      ws.on('message', message => {
        console.log(`Received: ${message}`);
        wss.clients.forEach(client => {
          if (client !== ws && client.readyState === WebSocket.OPEN) {
            client.send(`Server: ${message}`);
          }
        });
      });

      ws.on('close', () => {
        console.log('Client disconnected');
      });
    });

    console.log('WebSocket server started on port 8080');

Stap 4: Client-side code (HTML/JavaScript)

1. Maak een index.html bestand:
   • Maak een nieuw bestand genaamd index.html in de projectmap.
2. Voeg de volgende code toe aan index.html:

HTML

    <!DOCTYPE html>
    <html>
    <head>
      <title>WebSocket Client</title>
    </head>
    <body>
      <input type="text" id="messageInput">
      <button id="sendButton">Send</button>
      <ul id="messages"></ul>

      <script>
        const socket = new WebSocket('ws://localhost:8080');
        const messageInput = document.getElementById('messageInput');
        const sendButton = document.getElementById('sendButton');
        const messages = document.getElementById('messages');

        socket.addEventListener('open', () => {
          console.log('Connected to server');
        });

        socket.addEventListener('message', event => {
          const message = document.createElement('li');
          message.textContent = event.data;
          messages.appendChild(message);
        });

        socket.addEventListener('close', () => {
          console.log('Disconnected from server');
        });

        sendButton.addEventListener('click', () => {
          const message = messageInput.value;
          socket.send(message);
          messageInput.value = '';
        });
      </script>
    </body>
    </html>

Stap 5: De applicatie uitvoeren

1. Start de server:
   • Open je terminal en navigeer naar de projectmap.
   • Voer het commando node server.js uit om de server te starten.