Reactive WebSocket Integration for Streaming Data

Snippet

Reactive WebSocket Integration for Streaming Data

Expertly managing asynchronous streams requires bridging imperative protocols like WebSockets with reactive state. Using $state within a class allows for clean encapsulation while ensuring the UI reacts immediately to incoming socket messages.

snippet.js
javascript
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

Breakdown

data = $state([]);

Initializes a reactive array that Svelte will track for mutations.

this.data.push(JSON.parse(e.data));

Mutating the proxied array triggers fine-grained updates in the UI.

this.status = 'connected';

Updates the connection status reactively.

Previous snippet Next snippet

More Expert JavaScript exercises →

From your library

Reactive WebSocket Integration for Streaming Data

Related