Natuurlijk! Hier zijn concrete strategieën, architectuurtips en voorbeeldcode om WebSocket-communicatie te integreren met je bestaande Express REST API, inclusief authenticatie en best practices: **1. Authenticatie delen tussen REST en WebSocket** - **Gebruik JWT (JSON Web Tokens):** - Bij je REST API-authenticatie (bijvoorbeeld via login) genereer je een JWT-token. - Verstuur dit token naar de client en sla het op (bijvoorbeeld in localStorage). - **Verifiëren bij WebSocket-verbinding:** - Bij het opzetten van een WebSocket-verbinding stuur je het token mee via queryparameters of een aparte authenticatie-message. - Verifieer het token op de server bij het openen van de verbinding. **2. Architectuurtips** - **Initialisatie:** - Client initieert eerst een REST-verzoek voor authenticatie en ontvangt een JWT. - Client gebruikt dit token om zich te authenticeren bij WebSocket-verbinding. - **WebSocket-authenticatie:** - Bij het opzetten van de WebSocket-verbinding: - Voeg het JWT toe aan de querystring of stuur een authenticatiebericht na verbinding. - Server controleert het token en accepteert de verbinding indien geldig. - **Token vervaldatum:** - Controleer token-levensduur en vernieuw indien nodig via REST. - **Beveiliging:** - Gebruik HTTPS voor REST en WSS (WebSocket Secure). **3. Voorbeeldimplementatie** *Server-side (Express + ws):* ```javascript const express = require('express'); const http = require('http'); const WebSocket = require('ws'); const jwt = require('jsonwebtoken'); const app = express(); const server = http.createServer(app); const wss = new WebSocket.Server({ server }); // Secret voor JWT ondertekening const JWT_SECRET = 'je_geheime_sleutel'; app.use(express.json()); // REST API login endpoint app.post('/login', (req, res) => { const { username, password } = req.body; // Verifieer gebruiker (voorbeeld) if (username === 'admin' && password === 'password') { const token = jwt.sign({ username }, JWT_SECRET, { expiresIn: '1h' }); res.json({ token }); } else { res.status(401).json({ message: 'Ongeldige inloggegevens' }); } }); // WebSocket verbinding wss.on('connection', (ws, req) => { // Mogelijkheid 1: Token via querystring const params = new URLSearchParams(req.url.replace('/', '')); const token = params.get('token'); // Mogelijkheid 2: Eerst authenticeren via bericht // const messageListener = (message) => { ... } if (token) { jwt.verify(token, JWT_SECRET, (err, decoded) => { if (err) { ws.close(1008, 'Ongeldig token'); return; } ws.user = decoded; // Bewaar gebruikersinfo // Nu kunnen we data sturen ws.send(`Welkom ${decoded.username}`); }); } else { ws.close(1008, 'Geen token meegegeven'); } }); // Start server server.listen(3000, () => { console.log('Server draait op port 3000'); }); ``` *Client-side:* ```javascript // Na succesvolle login async function login() { const response = await fetch('/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username: 'admin', password: 'password' }), }); const data = await response.json(); return data.token; } async function initWebSocket(token) { const socket = new WebSocket(`wss://jouwdomein.com:3000/?token=${token}`); socket.onopen = () => { console.log('WebSocket verbonden'); }; socket.onmessage = (event) => { console.log('Ontvangen:', event.data); }; socket.onclose = () => { console.log('WebSocket gesloten'); }; } ``` **4. Extra tips** - **Gebruik een authenticatie-bericht na verbinding:** - Verzend een JSON-bericht met het token en verifieer het op de server. - **Herhaal verificatie:** - Bij elke belangrijke actie via WebSocket, controleer het token opnieuw. - **Foutafhandeling:** - Sluit WebSocket-verbindingen bij niet-verificatie en informeer de gebruiker. **5. Samenvatting** - Gebruik JWT voor authenticatie - Verstuur het token bij WebSocket-verbinding via query of initieel bericht - Verifieer het token op de server vóór verdere communicatie - Combineer REST en WebSocket voor een naadloze data- en real-time ervaring Met deze aanpak integreer je efficiënt en veilig WebSocket-communicatie met je bestaande REST API in Express.js.

Absoluut. Het integreren van WebSockets met een bestaande Express.js REST API is een uitstekende architecturale keuze voor een real-time dashboard. De grootste uitdaging, het delen van authenticatie, is perfect aan te pakken. Laten we dit stap voor stap opbouwen met concrete strategieën en voorbeeldcode. ### Hoofdstrategie & Architectuurtips 1. **Eén Geïntegreerde Server:** Bouw zowel de REST API als de WebSocket server in dezelfde Node.js applicatie. Dit vereenvoudigt het delen van status, logica en authenticatie enorm. 2. **Gedeelde Authenticatie Middleware:** Hergebruik dezelfde Express.js middleware om JWT-tokens te valideren voor zowel HTTP-verzoeken als WebSocket-verbindingen. 3. **State Management:** Houd bij welke gebruiker (user ID) is gekoppeld aan welke WebSocket-verbinding. Dit is cruciaal voor het sturen van real-time updates naar specifieke gebruikers. 4. **REST voor CRUD, WS voor Events:** Gebruik de REST API voor alles wat vraag-antwoord is (ophalen van initiële data, mutaties). Gebruik WebSockets uitsluitend voor server-gestuurde real-time events (bijv. "nieuw datapunt beschikbaar", "taak is voltooid"). --- ### Implementatie: Stap-voor-Stap met Code #### 1. Projectstructuur & Installatie ```bash npm init -y npm install express ws jsonwebtoken # jsonwebtoken voor JWT handling npm install -D @types/ws # Voor TypeScript gebruikers ``` #### 2. De Geïntegreerde Server (app.js of server.js) Dit is het hart van de integratie. ```javascript const express = require('express'); const http = require('http'); const WebSocket = require('ws'); const jwt = require('jsonwebtoken'); const app = express(); const server = http.createServer(app); // Maak een WebSocket server en koppel hem aan dezelfde HTTP server const wss = new WebSocket.Server({ server }); // Middleware voor het parsen van JSON bodies in REST requests app.use(express.json()); // JWT Secret (zet dit in environment variables in productie!) const JWT_SECRET = 'jouw_super_geheime_sleutel_hier'; // --- SIMULATIE: Een array om connected clients & users bij te houden --- // In een echte app gebruik je een Redis of een Map voor betere performance. const connectedClients = new Map(); // Key: user ID, Value: WebSocket instance // --- GEDEELDE AUTHENTICATIE MIDDLEWARE --- function authenticateToken(socket, next) { // Voor WebSockets zit de token vaak in de URL query parameters // Bijv.: ws://localhost:8080?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9... const token = socket.handshake.query.token; if (token == null) { socket.close(1008, 'Unauthorized: Geen token opgegeven'); // Policy Violation return; } jwt.verify(token, JWT_SECRET, (err, decodedToken) => { if (err) { socket.close(1008, 'Unauthorized: Token is ongeldig'); return; } // Voeg de gebruikersinfo toe aan het socket object voor later gebruik socket.user = decodedToken; next(); // Ga door naar de volgende handler }); } // --- WEBSOCKET CONNECTION HANDLING --- wss.on('connection', authenticateToken, (ws, req) => { // Op dit punt is de authenticatie geslaagd en zit `ws.user` vol met data (bijv. userId) console.log(`Nieuwe WebSocket-verbinding voor gebruiker: ${ws.user.userId}`); // Sla de verbinding op, gekoppeld aan de user ID connectedClients.set(ws.user.userId, ws); // Stuur een welkomstbericht naar deze client ws.send(JSON.stringify({ type: 'connection_established', message: 'Verbonden met real-time service' })); // Handle berichten van de client (bijv. voor subscriptions) ws.on('message', (message) => { try { const data = JSON.parse(message); console.log('Ontvangen van client:', data); // Hier kun je logica verwerken zoals "subscribe_to_channel" } catch (error) { console.error('Ongeldig JSON bericht:', error); } }); // Handle het sluiten van de verbinding ws.on('close', () => { console.log(`Verbinding verbroken voor gebruiker: ${ws.user.userId}`); connectedClients.delete(ws.user.userId); // Verwijder uit de lijst }); }); // --- REST API ROUTES --- // Mock gebruikersdata voor demo const users = [{ id: 1, username: 'testuser', password: 'wachtwoord' }]; // Gebruik bcrypt in productie! // REST Login Endpoint (geeft een JWT token terug) app.post('/api/login', (req, res) => { const { username, password } = req.body; const user = users.find(u => u.username === username && u.password === password); if (user) { // Maak een token aan. In de payload stoppen we het user ID. const token = jwt.sign({ userId: user.id }, JWT_SECRET, { expiresIn: '1h' }); res.json({ token }); } else { res.status(401).json({ error: 'Ongeldige inloggegevens' }); } }); // Een beveiligde REST endpoint (deelt dezelfde auth middleware) app.get('/api/dashboard-data', (req, res) => { // In een echte app haal je de token uit de Authorization header const authHeader = req.headers['authorization']; const token = authHeader && authHeader.split(' ')[1]; // Bearer TOKEN if (token == null) return res.sendStatus(401); jwt.verify(token, JWT_SECRET, (err, user) => { if (err) return res.sendStatus(403); // Authorisatie geslaagd! Geef de (gemockte) dashboard data terug. res.json({ monthlySales: 12543, newUsers: 23, pendingOrders: 5, // ... andere data }); }); }); // --- VOORBEELD: Hoe een REST endpoint een real-time update kan triggeren --- app.post('/api/update-settings', (req, res) => { // ... valideer request en verwerk de data in de database ... // Stel dat de update succesvol was en we willen de frontend van de gebruiker op de hoogte stellen. const userId = getUserIdFromRequest(req); // Je zou dit uit de JWT moeten halen // Haal de WebSocket van de specifieke gebruiker op const clientSocket = connectedClients.get(userId); if (clientSocket && clientSocket.readyState === WebSocket.OPEN) { // Stuur een real-time event naar het dashboard van die ene gebruiker clientSocket.send(JSON.stringify({ type: 'settings_updated', message: 'Je instellingen zijn succesvol bijgewerkt.', timestamp: new Date() })); } res.json({ success: true, message: 'Instellingen bijgewerkt' }); }); // Start de gecombineerde server const PORT = process.env.PORT || 8080; server.listen(PORT, () => { console.log(`Geïntegreerde server draait op poort ${PORT}`); }); ``` #### 3. Client-side Code (Vue.js/React/etc. voorbeeld) ```javascript // 1. Eerst inloggen via REST om een JWT token te krijgen const login = async () => { const response = await fetch('/api/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username: 'testuser', password: 'wachtwoord' }) }); const { token } = await response.json(); return token; }; // 2. Initialiseer de WebSocket verbinding MET het token const initializeWebSocket = (token) => { const ws = new WebSocket(`ws://localhost:8080?token=${token}`); // Gebruik wss:// in productie ws.onopen = () => { console.log('WebSocket verbonden'); }; ws.onmessage = (event) => { const data = JSON.parse(event.data); console.log('Real-time update ontvangen:', data); // Update je UI op basis van het 'type' bericht if (data.type === 'settings_updated') { showNotification(data.message); } if (data.type === 'new_data_available') { fetchDashboardData(); // Roep de REST API opnieuw aan om verse data op te halen } }; ws.onerror = (error) => { console.error('WebSocket error:', error); }; ws.onclose = () => { console.log('WebSocket verbinding gesloten'); }; return ws; }; // 3. Haal initiële data op via REST const fetchDashboardData = async () => { const token = await getTokenFromStorage(); // Haal JWT op uit local storage const response = await fetch('/api/dashboard-data', { headers: { 'Authorization': `Bearer ${token}` } }); const data = await response.json(); // Update je UI met de ontvangen data updateUI(data); }; // Gebruik: (async () => { const authToken = await login(); localStorage.setItem('authToken', authToken); // Sla token op // Start beide communicatiekanalen fetchDashboardData(); initializeWebSocket(authToken); })(); ``` ### Samenvatting van Oplossingen * **Authenticatie-uitdaging:** Opgelost door **Query Parameter Token** passing voor de WebSocket handshake en het hergebruiken van de `jsonwebtoken` library in een gedeelde `authenticateToken` functie. * **Architectuur:** Een **geïntegreerde server** houdt de codebase coherent en eenvoudig. * **State:** Een **`Map`** wordt gebruikt om gebruikers aan hun WebSocket-verbinding te koppelen, wat targeted messaging mogelijk maakt. * **Betrouwbaarheid:** De REST API blijft de **single source of truth** voor data. WebSockets zijn alleen voor notificaties, niet voor de data zelf. Als een WebSocket bericht verloren gaat, kan de client altijd een nieuwe REST-call doen. Deze aanhouding zorgt voor een soepele, efficiënte en betrouwbare integratie voor je dashboard. Succes met bouwen