Implementeer foutafhandeling en reconnectie voor mijn WebSocket-client
description
Met deze prompt kan de gebruiker een robuuste WebSocket-client ontwikkelen die automatisch verbinding herstelt bij netwerkonderbrekingen en fouten effectief afhandelt. Dit voorkomt dat de applicatie vastloopt of gegevens verliest, wat zorgt voor een betere gebruikerservaring en betrouwbaarheid. De prompt biedt concrete codevoorbeelden en strategieën, waardoor het makkelijker is om best practices te implementeren dan met algemene documentatie.
prompt
Help me een robuuste foutafhandeling en automatische reconnectie te implementeren in mijn WebSocket-client. Mijn WebSocket-URL is: <voer de WebSocket-URL in die ik gebruik>
Client Technologie: <voer de clienttechnologie in di ...
try_prompt
generate_helper
disclaimerOnPageApi
tags
ai_answers
provider: openai
model: gpt-4.1-nano
Natuurlijk! Hieronder vind je een voorbeeld van een robuuste WebSocket-client in JavaScript die automatische reconnectie implementeert en fouten afhandelt. Dit voorbeeld houdt rekening met netwerkverliezen en probeert automatisch opnieuw te verbinden indien de verbinding wegvalt.
```javascript
const url = "wss://echo.websocket.org";
let ws = null;
let reconnectInterval = 3000; // tijd in ms voordat geprobeerd wordt opnieuw te verbinden
let maxReconnectAttempts = 10; // maximum aantal reconnect pogingen
let reconnectAttempts = 0;
let shouldReconnect = true;
function connect() {
ws = new WebSocket(url);
ws.onopen = () => {
console.log("Verbonden met WebSocket");
reconnectAttempts = 0; // reset bij succesvolle connectie
};
ws.onmessage = (event) => {
console.log("Ontvangen bericht:", event.data);
};
ws.onerror = (error) => {
console.error("WebSocket fout:", error);
// Mogelijk wil je hier ook een disconnect forceren of andere acties
};
ws.onclose = (event) => {
console.log(`WebSocket gesloten (Code: ${event.code})`);
if (shouldReconnect && reconnectAttempts < maxReconnectAttempts) {
console.log(`Nieuwe poging tot verbinden in ${reconnectInterval} ms...`);
setTimeout(() => {
reconnectAttempts++;
connect();
}, reconnectInterval);
} else {
console.log("Max reconnect attempts bereikt of reconnect is uitgeschakeld.");
}
};
}
// Functie om berichten te versturen
function sendMessage(message) {
if (ws && ws.readyState === WebSocket.OPEN) {
ws.send(message);
} else {
console.warn("WebSocket is niet verbonden, bericht niet verzonden:", message);
}
}
// Verbinding starten
connect();
// Optioneel: een manier om de verbinding handmatig te verbreken en reconnect uit te schakelen
function disconnect() {
shouldReconnect = false;
if (ws) {
ws.close();
}
}
```
### Belangrijke strategieën:
1. **Automatische reconnectie**: Bij het afsluiten van de verbinding wordt na een korte wachttijd automatisch geprobeerd opnieuw te verbinden, met een maximum aantal pogingen.
2. **Foutafhandeling**: Gebruik van `onerror` en `onclose` events om fouten en afsluitingen te detecteren en hierop te reageren.
3. **Herstel bij netwerkwisselingen**: Netwerkproblemen worden automatisch opgevangen door de reconnectie-logica.
4. **Aanpasbare parameters**: Je kunt de wachttijd (reconnectInterval) en het maximum aantal pogingen aanpassen naar je behoeften.
### Extra tips:
- Overweeg een exponential backoff strategie voor de reconnect-tijden om overbelasting te voorkomen.
- Bewaar in je applicatie de status en wacht niet te lang met reconnecten.
- Voeg logging toe voor beter inzicht in verbindingsproblemen.
Mocht je dit in een andere programmeertaal nodig hebben of meer geavanceerde functies, laat het gerust weten!
provider: deepseek
model: deepseek-chat
Zeker, hier is een robuuste implementatie van een WebSocket-client met foutafhandeling en automatische reconnectie:
```javascript
class RobuusteWebSocketClient {
constructor(url) {
this.url = url;
this.ws = null;
this.reconnectInterval = 1000; // Start met 1 seconde
this.maxReconnectInterval = 30000; // Max 30 seconden
this.reconnectAttempts = 0;
this.maxReconnectAttempts = Infinity; // Oneindig pogingen
this.isExplicitlyClosed = false;
this.connect();
}
connect() {
if (this.isExplicitlyClosed) return;
try {
this.ws = new WebSocket(this.url);
this.ws.onopen = () => {
console.log('WebSocket verbinding geopend');
this.reconnectAttempts = 0;
this.reconnectInterval = 1000;
this.onOpen();
};
this.ws.onmessage = (event) => {
this.onMessage(event);
};
this.ws.onclose = (event) => {
console.log('WebSocket verbinding gesloten:', event.code, event.reason);
this.onClose(event);
if (!this.isExplicitlyClosed) {
this.attemptReconnect();
}
};
this.ws.onerror = (error) => {
console.error('WebSocket fout:', error);
this.onError(error);
};
} catch (error) {
console.error('Verbindingsfout:', error);
this.attemptReconnect();
}
}
attemptReconnect() {
if (this.isExplicitlyClosed || this.reconnectAttempts >= this.maxReconnectAttempts) {
return;
}
// Exponentiële backoff met jitter
const timeout = Math.min(
this.reconnectInterval * Math.pow(1.5, this.reconnectAttempts) +
Math.random() * 1000, // Jitter toevoegen
this.maxReconnectInterval
);
console.log(`Poging opnieuw verbinden over ${Math.round(timeout/1000)} seconden...`);
setTimeout(() => {
this.reconnectAttempts++;
this.connect();
}, timeout);
}
send(data) {
if (this.ws && this.ws.readyState === WebSocket.OPEN) {
try {
this.ws.send(data);
} catch (error) {
console.error('Verzendfout:', error);
this.onError(error);
}
} else {
console.warn('Kan niet verzenden - verbinding niet open');
// Optioneel: berichten in queue zetten voor later verzenden
}
}
close() {
this.isExplicitlyClosed = true;
if (this.ws) {
this.ws.close();
}
}
// Te overschrijven methods
onOpen() {}
onMessage(event) {}
onClose(event) {}
onError(error) {}
}
// Gebruiksvoorbeeld
const client = new RobuusteWebSocketClient('wss://echo.websocket.org');
client.onOpen = () => {
console.log('Verbonden! Verstuur testbericht...');
client.send('Hello WebSocket!');
};
client.onMessage = (event) => {
console.log('Bericht ontvangen:', event.data);
};
client.onError = (error) => {
console.error('Er trad een fout op:', error);
};
client.onClose = (event) => {
if (event.wasClean) {
console.log('Schone sluiting');
} else {
console.log('Onverwachte sluiting');
}
};
// Netwerk status monitoring (optioneel maar aanbevolen)
window.addEventListener('online', () => {
console.log('Netwerk verbonden - controleren op reconnectie');
if (!client.ws || client.ws.readyState !== WebSocket.OPEN) {
client.connect();
}
});
window.addEventListener('offline', () => {
console.log('Netwerk verbroken');
});
```
**Belangrijke strategieën in deze implementatie:**
1. **Exponentiële Backoff**: Verhoogt de wachttijd tussen reconnectiepogingen
2. **Jitter**: Voegt random variatie toe om serveroverbelasting te voorkomen
3. **Netwerk Event Listeners**: Herkent netwerkwisselingen automatisch
4. **Status Monitoring**: Houdt verbindingsstatus bij
5. **Foutboundaries**: Try-catch blocks rond kritieke operaties
**Aanvullende verbeteringen die je kunt toevoegen:**
```javascript
// Heartbeat mechanisme
setInterval(() => {
if (client.ws && client.ws.readyState === WebSocket.OPEN) {
client.send('ping');
}
}, 30000);
// Berichten queue voor wanneer verbinding verbroken is
class MessageQueue {
constructor() {
this.queue = [];
}
add(message) {
this.queue.push(message);
}
flush() {
while (this.queue.length > 0) {
const message = this.queue.shift();
client.send(message);
}
}
}
// Gebruik de queue
const messageQueue = new MessageQueue();
// In de onOpen method:
client.onOpen = () => {
messageQueue.flush();
};
```
Deze implementatie zorgt voor automatische reconnectie bij netwerkwisselingen en behandelt de meeste voorkomende WebSocket-fouten op een robuuste manier.