Hier is een voorbeeld van hoe je een Vue.js component kunt bouwen die verbinding maakt met een WebSocket-server, inkomende data verwerkt en de status bijwerkt. Daarnaast bevat het een knop waarmee gebruikers handmatig nieuwe data kunnen opvragen. ```vue <template> <div> <p>Status: {{ status }}</p> <p>Ontvangen bericht: {{ bericht }}</p> <button @click="vraagNieuweData">Vraag nieuwe data op</button> </div> </template> <script> export default { data() { return { socket: null, status: 'Niet verbonden', // status van WebSocket bericht: '', // ontvangen data }; }, methods: { // Methode om WebSocket te initialiseren initWebSocket() { this.socket = new WebSocket('ws://voorbeeld.com/socket'); // WebSocket geopend this.socket.onopen = () => { this.status = 'Verbonden met WebSocket'; console.log('WebSocket verbinding geopend'); }; // Ontvangen van berichten this.socket.onmessage = (event) => { try { const data = JSON.parse(event.data); if (data.bericht) { this.bericht = data.bericht; } } catch (e) { console.error('Fout bij parseren van bericht:', e); } }; // Foutmelding this.socket.onerror = (error) => { this.status = 'Fout bij WebSocket'; console.error('WebSocket fout:', error); }; // Verbinding gesloten this.socket.onclose = () => { this.status = 'WebSocket gesloten'; console.log('WebSocket verbinding gesloten'); // eventueel automatische reconnectie }; }, // Gebruiker kan handmatig data opvragen vraagNieuweData() { if (this.socket && this.socket.readyState === WebSocket.OPEN) { // Afhankelijk van je server, stuur een commando of vraag // Bijvoorbeeld: stuur een speciale boodschap om nieuwe data te krijgen this.socket.send(JSON.stringify({ actie: 'vraagData' })); this.status = 'Verzoek verzonden...'; } else { this.status = 'WebSocket niet verbonden'; } } }, mounted() { this.initWebSocket(); }, beforeDestroy() { if (this.socket) { this.socket.close(); } } } </script> ``` **Uitleg:** - **WebSocket opzetten:** In de `initWebSocket()` methode wordt een nieuwe WebSocket-verbinding geopend met de opgegeven URL. Eventhandlers worden ingesteld voor `onopen`, `onmessage`, `onerror`, en `onclose`. - **Data verwerken:** Bij ontvangst van een bericht wordt geprobeerd de JSON te parsen en de `bericht` data bij te werken. - **Status bijwerken:** De `status` data geeft de actuele status van de verbinding weer. - **Gebruikersactie:** De knop roept `vraagNieuweData()` aan, die een bericht verstuurt naar de server om nieuwe data op te vragen, mits de verbinding open is. - **Levenscyclus:** De verbinding wordt geopend bij `mounted()` en gesloten bij `beforeDestroy()` om resource leaks te voorkomen. Met deze opzet heb je een Vue.js component dat real-time updates ontvangt via WebSocket en gebruikers in staat stelt handmatig data op te vragen.

Zeker! Ik help je een Vue.js component te bouwen voor WebSocket communicatie. Hier is een complete implementatie: ## Vue.js WebSocket Component ```vue <template> <div class="websocket-component"> <!-- Status indicator --> <div class="status" :class="verbindingStatus"> Status: {{ statusTekst }} </div> <!-- Ontvangen berichten --> <div class="berichten-lijst"> <h3>Real-time updates:</h3> <ul> <li v-for="(bericht, index) in berichten" :key="index"> {{ bericht }} </li> </ul> </div> <!-- Handmatige update knop --> <button @click="vraagDataOp" :disabled="!isVerbonden" class="update-knop" > Vraag verse data op </button> </div> </template> <script> export default { name: 'WebSocketComponent', data() { return { websocket: null, verbindingStatus: 'verbinden', // verbinden, verbonden, verbroken, fout berichten: [], reconnectPogingen: 0, maxReconnectPogingen: 5 } }, computed: { statusTekst() { const statusMap = { verbinden: 'Verbinden...', verbonden: 'Verbonden', verbroken: 'Verbinding verbroken', fout: 'Fout opgetreden' } return statusMap[this.verbindingStatus] }, isVerbonden() { return this.verbindingStatus === 'verbonden' } }, mounted() { this.initialiseerWebSocket() }, beforeUnmount() { this.sluitWebSocket() }, methods: { // WebSocket initialisatie initialiseerWebSocket() { try { this.verbindingStatus = 'verbinden' this.websocket = new WebSocket('ws://voorbeeld.com/socket') // Event handlers this.websocket.onopen = this.onWebSocketOpen this.websocket.onmessage = this.onWebSocketMessage this.websocket.onclose = this.onWebSocketClose this.websocket.onerror = this.onWebSocketError } catch (error) { console.error('WebSocket initialisatie fout:', error) this.verbindingStatus = 'fout' } }, // Verbinding succesvol geopend onWebSocketOpen(event) { console.log('WebSocket verbinding geopend') this.verbindingStatus = 'verbonden' this.reconnectPogingen = 0 // Stuur een initieel bericht naar de server (optioneel) this.websocket.send(JSON.stringify({ type: 'subscribe', kanaal: 'updates' })) }, // Bericht ontvangen van server onWebSocketMessage(event) { try { const data = JSON.parse(event.data) // Verwerk het bericht volgens de gespecificeerde structuur if (data.bericht) { this.berichten.unshift(data.bericht) // Beperk de lijst tot laatste 50 berichten if (this.berichten.length > 50) { this.berichten = this.berichten.slice(0, 50) } } console.log('Bericht ontvangen:', data) } catch (error) { console.error('Fout bij verwerken bericht:', error, event.data) } }, // Verbinding gesloten onWebSocketClose(event) { console.log('WebSocket verbinding gesloten:', event.code, event.reason) this.verbindingStatus = 'verbroken' // Probeer opnieuw verbinding te maken (met backoff) if (this.reconnectPogingen < this.maxReconnectPogingen) { setTimeout(() => { this.reconnectPogingen++ console.log(`Reconnect poging ${this.reconnectPogingen}`) this.initialiseerWebSocket() }, Math.min(1000 * Math.pow(2, this.reconnectPogingen), 30000)) } }, // Fout opgetreden onWebSocketError(error) { console.error('WebSocket fout:', error) this.verbindingStatus = 'fout' }, // Handmatige data aanvraag vraagDataOp() { if (this.websocket && this.websocket.readyState === WebSocket.OPEN) { this.websocket.send(JSON.stringify({ type: 'request', actie: 'refresh' })) } else { console.warn('WebSocket niet verbonden') } }, // WebSocket netjes sluiten sluitWebSocket() { if (this.websocket) { this.websocket.close(1000, 'Component unmount') this.websocket = null } } } } </script> <style scoped> .websocket-component { padding: 20px; border: 1px solid #ddd; border-radius: 8px; max-width: 600px; margin: 20px auto; } .status { padding: 10px; border-radius: 4px; margin-bottom: 20px; font-weight: bold; } .status.verbinden { background-color: #fff3cd; color: #856404; } .status.verbonden { background-color: #d1edff; color: #004085; } .status.verbroken { background-color: #f8d7da; color: #721c24; } .status.fout { background-color: #f8d7da; color: #721c24; } .berichten-lijst { max-height: 300px; overflow-y: auto; border: 1px solid #eee; padding: 15px; margin-bottom: 20px; } .berichten-lijst ul { list-style: none; padding: 0; margin: 0; } .berichten-lijst li { padding: 8px; border-bottom: 1px solid #f0f0f0; } .berichten-lijst li:last-child { border-bottom: none; } .update-knop { padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; } .update-knop:disabled { background-color: #6c757d; cursor: not-allowed; } .update-knop:hover:not(:disabled) { background-color: #0056b3; } </style> ``` ## Belangrijke functionaliteiten uitgelegd: ### 1. **WebSocket Opzet** - Verbinding wordt opgezet in `mounted()` lifecycle hook - Event handlers voor `onopen`, `onmessage`, `onclose`, `onerror` - Automatische reconnect met exponentiële backoff ### 2. **Data Verwerking** - JSON parsing van binnenkomende berichten - Specifieke structuur: `{ "bericht": "Update ontvangen" }` - Berichten worden toegevoegd aan een array met limiet ### 3. **Status Management** - Visuele status indicator (verbinden/verbonden/verbroken/fout) - Knop wordt gedisabled wanneer niet verbonden - Automatische status updates bij verbindingswijzigingen ### 4. **Gebruikersinteractie** - Knop om handmatig data op te vragen - Berichten worden real-time weergegeven - Cleanup bij component vernietiging ### 5. **Error Handling** - Try-catch voor JSON parsing - Foutafhandeling voor verbindingsproblemen - Console logging voor debugging Dit component biedt een robuuste basis voor real-time communicatie via WebSockets in Vue.js!