javascript / intermediate
Snippet
Verknüpfen klassenbasierter Zustandsautomaten mit Vue-Reaktivität für Echtzeit-Sockets
Die Kapselung von Netzwerk-Lebenszyklen und privaten WebSocket-Instanzen in einer ES6-Klasse trennt die Verbindungslogik sauber von UI-Belangen. Über eine Callback-Funktion, die eine Vue-`ref` aktualisiert, steuert die Klasseninstanz den Reaktivitätsstatus, während `onScopeDispose` den sauberen Verbindungsabbau beim Unmounten der Komponente sicherstellt.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import { ref, onScopeDispose } from 'vue';class SocketSessionController {#socket = null;#onStateChange;constructor(url, onStateChange) {this.url = url;this.#onStateChange = onStateChange;}connect() {this.#socket = new WebSocket(this.url);this.#socket.onopen = () => this.#onStateChange('CONNECTED');this.#socket.onclose = () => this.#onStateChange('DISCONNECTED');this.#socket.onerror = () => this.#onStateChange('ERROR');}disconnect() {if (this.#socket) {this.#socket.close();this.#socket = null;}}}export function useRealtimeConnection(endpoint) {const connectionState = ref('DISCONNECTED');const controller = new SocketSessionController(endpoint, (newState) => {connectionState.value = newState;});controller.connect();onScopeDispose(() => controller.disconnect());return { connectionState };}
vue
Erklärung
1
class SocketSessionController { #socket = null;
Definiert eine ES6-Klasse mit einem privaten Feld zum sicheren Kapseln der WebSocket-Instanz.
2
this.#socket.onopen = () => this.#onStateChange('CONNECTED');
Ruft den Statuswechsel-Callback auf, um Verbindungsübergänge an Listener zu melden.
3
const controller = new SocketSessionController(endpoint, (newState) => {
Erzeugt die Controller-Instanz in einem Vue-Composable und verknüpft Klassen-Events mit einer reaktiven Ref.
4
onScopeDispose(() => controller.disconnect());
Nutzt Vues Scope-Disposal-Hook, um Socket-Ressourcen beim Zerstören der Komponente aufzuräumen.