Bridging Class-Based State Machines with Vue Reactivity for Real-Time Sockets

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 };
}