Hier is een basisvoorbeeld van een JavaScript-functie die een WebSocket-verbinding opzet, inkomende gegevens verwerkt en de gebruikersinterface bijwerkt: ```javascript function initRealtimeUpdates() { // Maak een nieuwe WebSocket-verbinding const socket = new WebSocket('wss://voorbeeld.com/socket'); // Event handler voor succesvolle verbinding socket.onopen = function() { console.log('Verbinding met de gegevensbron is tot stand gebracht.'); // Optioneel: stuur een bericht om gegevens op te vragen of te abonneren // socket.send(JSON.stringify({ actie: 'subscribe', kanaal: 'gegevens' })); }; // Event handler voor ontvangen gegevens socket.onmessage = function(event) { const data = JSON.parse(event.data); // Verwerk de inkomende gegevens updateUI(data); }; // Event handler voor fouten socket.onerror = function(error) { console.error('WebSocket-fout:', error); }; // Event handler voor verbinding verbroken socket.onclose = function() { console.log('Verbinding met de gegevensbron is gesloten.'); }; // Functie om de gebruikersinterface bij te werken function updateUI(data) { // Voorbeeld: stel dat data een lijst met items bevat const container = document.getElementById('gegevensContainer'); container.innerHTML = ''; // Leeg maken data.items.forEach(item => { const element = document.createElement('div'); element.textContent = item naam; // Pas aan op basis van je gegevens container.appendChild(element); }); } } // Roep de functie aan om te starten initRealtimeUpdates(); ``` **Samenvatting:** - Maak een WebSocket-verbinding met `wss://voorbeeld.com/socket`. - Gebruik `onmessage` om inkomende gegevens te ontvangen en te verwerken. - Verwerk de gegevens en werk je gebruikersinterface bij via DOM-manipulatie. - Voeg eventueel error- en close-handlers toe voor robuustheid. Pas de `updateUI`-functie aan op basis van de structuur van jouw gegevens en de elementen in je interface.

Natuurlijk! Hier is een uitgebreide uitleg over het maken van een JavaScript-functie voor realtime gegevensupdates met WebSockets: ## Basis WebSocket Implementatie ```javascript class RealtimeDataHandler { constructor(url) { this.url = url; this.socket = null; this.isConnected = false; this.reconnectAttempts = 0; this.maxReconnectAttempts = 5; } // Maak verbinding met de WebSocket server connect() { try { this.socket = new WebSocket(this.url); this.socket.onopen = (event) => { console.log('WebSocket verbinding geopend'); this.isConnected = true; this.reconnectAttempts = 0; this.onConnectionChange(true); }; this.socket.onmessage = (event) => { this.processIncomingData(event.data); }; this.socket.onclose = (event) => { console.log('WebSocket verbinding gesloten'); this.isConnected = false; this.onConnectionChange(false); this.handleReconnection(); }; this.socket.onerror = (error) => { console.error('WebSocket fout:', error); this.onError(error); }; } catch (error) { console.error('Fout bij maken van WebSocket:', error); this.onError(error); } } // Verwerk inkomende gegevens processIncomingData(data) { try { // Parse JSON data (aanpassen aan jouw dataformaat) const parsedData = JSON.parse(data); // Update de gebruikersinterface this.updateUI(parsedData); } catch (error) { console.error('Fout bij verwerken data:', error); this.onError(error); } } // Update de gebruikersinterface updateUI(data) { // Voorbeeld: update een specifiek HTML element const dataContainer = document.getElementById('data-container'); if (dataContainer) { // Maak een leesbare weergave van de data dataContainer.innerHTML = ` <div class="data-item"> <h3>Nieuwe Data Ontvangen</h3> <pre>${JSON.stringify(data, null, 2)}</pre> <small>${new Date().toLocaleTimeString()}</small> </div> `; } // Roep eventuele callback functies aan if (this.onDataUpdate) { this.onDataUpdate(data); } } // Verstuur data naar de server sendData(data) { if (this.isConnected && this.socket) { try { const jsonData = JSON.stringify(data); this.socket.send(jsonData); } catch (error) { console.error('Fout bij verzenden data:', error); this.onError(error); } } else { console.warn('Niet verbonden met WebSocket server'); } } // Herverbindingslogica handleReconnection() { if (this.reconnectAttempts < this.maxReconnectAttempts) { this.reconnectAttempts++; const delay = Math.min(1000 * Math.pow(2, this.reconnectAttempts), 30000); console.log(`Opnieuw verbinden over ${delay}ms (poging ${this.reconnectAttempts})`); setTimeout(() => { this.connect(); }, delay); } } // Sluit de verbinding disconnect() { if (this.socket) { this.socket.close(); this.isConnected = false; } } // Callback functies (overschrijf deze in je applicatie) onConnectionChange(connected) { console.log(`Verbinding status: ${connected ? 'Verbonden' : 'Verbroken'}`); } onError(error) { console.error('Er is een fout opgetreden:', error); } } ``` ## Gebruik in je Applicatie ```javascript // Initialiseer de realtime data handler const dataHandler = new RealtimeDataHandler('wss://voorbeeld.com/socket'); // Optioneel: custom callback functies instellen dataHandler.onDataUpdate = (data) => { console.log('Nieuwe data ontvangen:', data); // Voer hier aanvullende acties uit }; dataHandler.onConnectionChange = (connected) => { const statusElement = document.getElementById('connection-status'); if (statusElement) { statusElement.textContent = connected ? '🟢 Verbonden' : '🔴 Verbinding verbroken'; statusElement.className = connected ? 'connected' : 'disconnected'; } }; // Start de verbinding dataHandler.connect(); // Voorbeeld: data verzenden naar server function sendCustomData() { dataHandler.sendData({ type: 'user_action', action: 'button_clicked', timestamp: Date.now() }); } // Verbinding sluiten wanneer nodig (bijv. bij pagina verlaten) window.addEventListener('beforeunload', () => { dataHandler.disconnect(); }); ``` ## HTML Voorbeeld ```html <!DOCTYPE html> <html> <head> <title>Realtime Data App</title> <style> .connected { color: green; } .disconnected { color: red; } .data-item { border: 1px solid #ddd; padding: 10px; margin: 10px 0; border-radius: 5px; } </style> </head> <body> <div id="app"> <h1>Realtime Data Dashboard</h1> <div id="connection-status" class="disconnected">🔴 Verbinding verbroken</div> <div id="data-container"> <!-- Hier komen de realtime updates --> </div> <button onclick="sendCustomData()">Verstuur Test Data</button> </div> <script src="realtime-handler.js"></script> </body> </html> ``` ## Belangrijke Punten: 1. **WebSocket Verbinding**: De `connect()` methode maakt verbinding met je server 2. **Data Verwerking**: `processIncomingData()` behandelt binnenkomende berichten 3. **UI Updates**: `updateUI()` zorgt voor het bijwerken van de interface 4. **Foutafhandeling**: Robuuste error handling en automatisch opnieuw verbinden 5. **Flexibiliteit**: Makkelijk aan te passen voor jouw specifieke use case Pas de `updateUI()` methode aan om je specifieke UI-componenten bij te werken op basis van de ontvangen data!