javascript / expert
Snippet
Reaktive WebSocket-Integration für Streaming-Daten
Die fachgerechte Verwaltung asynchroner Streams erfordert die Überbrückung imperativer Protokolle wie WebSockets mit reaktivem State. Die Verwendung von $state innerhalb einer Klasse ermöglicht eine saubere Kapselung und stellt sicher, dass die UI sofort auf eingehende Socket-Nachrichten reagiert.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
class SocketManager {data = $state([]);status = $state('disconnected');connect(url) {const ws = new WebSocket(url);ws.onmessage = (e) => {this.data.push(JSON.parse(e.data));};ws.onopen = () => this.status = 'connected';}}
svelte
Erklärung
1
data = $state([]);
Initialisiert ein reaktives Array, das Svelte auf Mutationen überwacht.
2
this.data.push(JSON.parse(e.data));
Die Mutation des Proxy-Arrays löst feingranulare Updates in der UI aus.
3
this.status = 'connected';
Aktualisiert den Verbindungsstatus reaktiv.