@motiadev/stream-client-browser 0.2.1-beta.55 → 0.2.1-beta.56

package/dist/src/stream-group.d.ts

@@ -1,28 +1,8 @@
 import { StreamSubscription } from './stream-subscription';
-import { GroupJoinMessage, Listener } from './stream.types';
+import { GroupEventMessage, JoinMessage } from './stream.types';
 export declare class StreamGroupSubscription<TData extends {
     id: string;
-}> extends StreamSubscription {
-    private readonly ws;
-    private readonly sub;
-    private onChangeListeners;
-    private listeners;
-    private state;
-    constructor(ws: WebSocket, sub: GroupJoinMessage);
-    /**
-     * Close the subscription.
-     */
-    close(): void;
-    /**
-     * Add a change listener. This listener will be called whenever the state of the group changes.
-     */
-    addChangeListener(listener: Listener<TData[]>): void;
-    /**
-     * Remove a change listener.
-     */
-    removeChangeListener(listener: Listener<TData[]>): void;
-    /**
-     * Get the current state of the group.
-     */
-    getState(): TData[];
+}> extends StreamSubscription<TData[], GroupEventMessage<TData>> {
+    constructor(sub: JoinMessage);
+    listener(message: GroupEventMessage<TData>): void;
 }

package/dist/src/stream-group.js

@@ -1,70 +1,32 @@
 import { StreamSubscription } from './stream-subscription';
 export class StreamGroupSubscription extends StreamSubscription {
-    constructor(ws, sub) {
-        super();
-        this.ws = ws;
-        this.sub = sub;
-        this.onChangeListeners = new Set();
-        this.listeners = new Set();
-        this.state = [];
-        const message = { type: 'join', data: sub };
-        const listenerWrapper = (event) => {
-            const message = JSON.parse(event.data);
-            const isStreamName = message.streamName === this.sub.streamName;
-            const isGroupId = 'groupId' in message && message.groupId === this.sub.groupId;
-            if (isStreamName && isGroupId) {
-                if (message.event.type === 'sync') {
-                    this.state = message.event.data;
-                }
-                else if (message.event.type === 'create') {
-                    const id = message.event.data.id;
-                    if (!this.state.find((item) => item.id === id)) {
-                        this.state = [...this.state, message.event.data];
-                    }
-                }
-                else if (message.event.type === 'update') {
-                    const messageData = message.event.data;
-                    const messageDataId = messageData.id;
-                    this.state = this.state.map((item) => (item.id === messageDataId ? messageData : item));
-                }
-                else if (message.event.type === 'delete') {
-                    const messageDataId = message.event.data.id;
-                    this.state = this.state.filter((item) => item.id !== messageDataId);
-                }
-                else if (message.event.type === 'event') {
-                    this.onEventReceived(message.event.event);
-                }
-                this.onChangeListeners.forEach((listener) => listener(this.state));
-            }
-        };
-        this.ws.addEventListener('message', listenerWrapper);
-        this.listeners.add(listenerWrapper);
-        ws.send(JSON.stringify(message));
-    }
-    /**
-     * Close the subscription.
-     */
-    close() {
-        const message = { type: 'leave', data: this.sub };
-        this.ws.send(JSON.stringify(message));
-        this.listeners.forEach((listener) => this.ws.removeEventListener('message', listener));
-    }
-    /**
-     * Add a change listener. This listener will be called whenever the state of the group changes.
-     */
-    addChangeListener(listener) {
-        this.onChangeListeners.add(listener);
+    constructor(sub) {
+        super(sub, []);
     }
-    /**
-     * Remove a change listener.
-     */
-    removeChangeListener(listener) {
-        this.onChangeListeners.delete(listener);
-    }
-    /**
-     * Get the current state of the group.
-     */
-    getState() {
-        return this.state;
+    listener(message) {
+        if (message.event.type === 'sync') {
+            this.setState(message.event.data);
+        }
+        else if (message.event.type === 'create') {
+            const id = message.event.data.id;
+            const state = this.getState();
+            if (!state.find((item) => item.id === id)) {
+                this.setState([...state, message.event.data]);
+            }
+        }
+        else if (message.event.type === 'update') {
+            const messageData = message.event.data;
+            const messageDataId = messageData.id;
+            const state = this.getState();
+            this.setState(state.map((item) => (item.id === messageDataId ? messageData : item)));
+        }
+        else if (message.event.type === 'delete') {
+            const messageDataId = message.event.data.id;
+            const state = this.getState();
+            this.setState(state.filter((item) => item.id !== messageDataId));
+        }
+        else if (message.event.type === 'event') {
+            this.onEventReceived(message.event.event);
+        }
     }
 }

package/dist/src/stream-item.d.ts

@@ -1,28 +1,8 @@
 import { StreamSubscription } from './stream-subscription';
-import { ItemJoinMessage, Listener } from './stream.types';
+import { ItemEventMessage, JoinMessage } from './stream.types';
 export declare class StreamItemSubscription<TData extends {
     id: string;
-}> extends StreamSubscription {
-    private readonly ws;
-    private readonly sub;
-    private onChangeListeners;
-    private listeners;
-    private state;
-    constructor(ws: WebSocket, sub: ItemJoinMessage);
-    /**
-     * Close the subscription.
-     */
-    close(): void;
-    /**
-     * Add a change listener. This listener will be called whenever the state of the item changes.
-     */
-    addChangeListener(listener: Listener<TData>): void;
-    /**
-     * Remove a change listener.
-     */
-    removeChangeListener(listener: Listener<TData>): void;
-    /**
-     * Get the current state of the item.
-     */
-    getState(): TData | null;
+}> extends StreamSubscription<TData | null, ItemEventMessage<TData>> {
+    constructor(sub: JoinMessage);
+    listener(message: ItemEventMessage<TData>): void;
 }

package/dist/src/stream-item.js

@@ -1,58 +1,17 @@
 import { StreamSubscription } from './stream-subscription';
 export class StreamItemSubscription extends StreamSubscription {
-    constructor(ws, sub) {
-        super();
-        this.ws = ws;
-        this.sub = sub;
-        this.onChangeListeners = new Set();
-        this.listeners = new Set();
-        this.state = null;
-        const message = { type: 'join', data: sub };
-        const listenerWrapper = (event) => {
-            const message = JSON.parse(event.data);
-            const isStreamName = message.streamName === this.sub.streamName;
-            const isId = 'id' in message && message.id === this.sub.id;
-            if (isStreamName && isId) {
-                if (message.event.type === 'sync' || message.event.type === 'create' || message.event.type === 'update') {
-                    this.state = message.event.data;
-                }
-                else if (message.event.type === 'delete') {
-                    this.state = null;
-                }
-                else if (message.event.type === 'event') {
-                    this.onEventReceived(message.event.event);
-                }
-                this.onChangeListeners.forEach((listener) => listener(this.state));
-            }
-        };
-        this.ws.addEventListener('message', listenerWrapper);
-        this.listeners.add(listenerWrapper);
-        ws.send(JSON.stringify(message));
+    constructor(sub) {
+        super(sub, null);
     }
-    /**
-     * Close the subscription.
-     */
-    close() {
-        const message = { type: 'leave', data: this.sub };
-        this.ws.send(JSON.stringify(message));
-        this.listeners.forEach((listener) => this.ws.removeEventListener('message', listener));
-    }
-    /**
-     * Add a change listener. This listener will be called whenever the state of the item changes.
-     */
-    addChangeListener(listener) {
-        this.onChangeListeners.add(listener);
-    }
-    /**
-     * Remove a change listener.
-     */
-    removeChangeListener(listener) {
-        this.onChangeListeners.delete(listener);
-    }
-    /**
-     * Get the current state of the item.
-     */
-    getState() {
-        return this.state;
+    listener(message) {
+        if (message.event.type === 'sync' || message.event.type === 'create' || message.event.type === 'update') {
+            this.setState(message.event.data);
+        }
+        else if (message.event.type === 'delete') {
+            this.setState(null);
+        }
+        else if (message.event.type === 'event') {
+            this.onEventReceived(message.event.event);
+        }
     }
 }

package/dist/src/stream-subscription.d.ts

@@ -1,7 +1,13 @@
-import { CustomEvent } from './stream.types';
+import { CustomEvent, JoinMessage, Listener } from './stream.types';
 type CustomEventListener = (event: any) => void;
-export declare abstract class StreamSubscription {
+export declare abstract class StreamSubscription<TData = unknown, TEventData = unknown> {
     private customEventListeners;
+    private closeListeners;
+    private onChangeListeners;
+    private state;
+    readonly sub: JoinMessage;
+    constructor(sub: JoinMessage, state: TData);
+    abstract listener(message: TEventData): void;
     protected onEventReceived(event: CustomEvent): void;
     /**
      * Add a custom event listener. This listener will be called whenever the custom event is received.
@@ -11,5 +17,20 @@ export declare abstract class StreamSubscription {
      * Remove a custom event listener.
      */
     offEvent(type: string, listener: CustomEventListener): void;
+    onClose(listener: () => void): void;
+    close(): void;
+    /**
+     * Add a change listener. This listener will be called whenever the state of the group changes.
+     */
+    addChangeListener(listener: Listener<TData>): void;
+    /**
+     * Remove a change listener.
+     */
+    removeChangeListener(listener: Listener<TData>): void;
+    /**
+     * Get the current state of the group.
+     */
+    getState(): TData;
+    protected setState(state: TData): void;
 }
 export {};

package/dist/src/stream-subscription.js

@@ -1,6 +1,10 @@
 export class StreamSubscription {
-    constructor() {
+    constructor(sub, state) {
         this.customEventListeners = new Map();
+        this.closeListeners = new Set();
+        this.onChangeListeners = new Set();
+        this.sub = sub;
+        this.state = state;
     }
     onEventReceived(event) {
         const customEventListeners = this.customEventListeners.get(event.type);
@@ -23,4 +27,33 @@ export class StreamSubscription {
         const listeners = this.customEventListeners.get(type) || [];
         this.customEventListeners.set(type, listeners.filter((l) => l !== listener));
     }
+    onClose(listener) {
+        this.closeListeners.add(listener);
+    }
+    close() {
+        this.closeListeners.forEach((listener) => listener());
+        this.closeListeners.clear();
+    }
+    /**
+     * Add a change listener. This listener will be called whenever the state of the group changes.
+     */
+    addChangeListener(listener) {
+        this.onChangeListeners.add(listener);
+    }
+    /**
+     * Remove a change listener.
+     */
+    removeChangeListener(listener) {
+        this.onChangeListeners.delete(listener);
+    }
+    /**
+     * Get the current state of the group.
+     */
+    getState() {
+        return this.state;
+    }
+    setState(state) {
+        this.state = state;
+        this.onChangeListeners.forEach((listener) => listener(state));
+    }
 }

package/dist/src/stream.d.ts

@@ -1,17 +1,21 @@
 import { StreamGroupSubscription } from './stream-group';
 import { StreamItemSubscription } from './stream-item';
 export declare class Stream {
+    private address;
     private ws;
-    constructor(address: string, onReady: () => void);
+    private listeners;
+    constructor(address: string);
+    createSocket(): WebSocket;
     /**
      * Subscribe to an item in a stream.
      *
      * @argument streamName - The name of the stream to subscribe to.
+     * @argument groupId - The id of the group to subscribe to.
      * @argument id - The id of the item to subscribe to.
      */
     subscribeItem<TData extends {
         id: string;
-    }>(streamName: string, id: string): StreamItemSubscription<TData>;
+    }>(streamName: string, groupId: string, id: string): StreamItemSubscription<TData>;
     /**
      * Subscribe to a group in a stream.
      *
@@ -22,4 +26,11 @@ export declare class Stream {
         id: string;
     }>(streamName: string, groupId: string): StreamGroupSubscription<TData>;
     close(): void;
+    private onSocketClose;
+    private onSocketOpen;
+    messageListener(event: MessageEvent<string>): void;
+    private subscribe;
+    private join;
+    private leave;
+    private roomName;
 }

package/dist/src/stream.js

@@ -2,19 +2,31 @@ import { v4 as uuidv4 } from 'uuid';
 import { StreamGroupSubscription } from './stream-group';
 import { StreamItemSubscription } from './stream-item';
 export class Stream {
-    constructor(address, onReady) {
-        this.ws = new WebSocket(address);
-        this.ws.onopen = () => onReady();
+    constructor(address) {
+        this.address = address;
+        this.listeners = {};
+        this.ws = this.createSocket();
+    }
+    createSocket() {
+        this.ws = new WebSocket(this.address);
+        this.ws.addEventListener('message', (message) => this.messageListener(message));
+        this.ws.addEventListener('open', () => this.onSocketOpen());
+        this.ws.addEventListener('close', () => this.onSocketClose());
+        return this.ws;
     }
     /**
      * Subscribe to an item in a stream.
      *
      * @argument streamName - The name of the stream to subscribe to.
+     * @argument groupId - The id of the group to subscribe to.
      * @argument id - The id of the item to subscribe to.
      */
-    subscribeItem(streamName, id) {
+    subscribeItem(streamName, groupId, id) {
         const subscriptionId = uuidv4();
-        return new StreamItemSubscription(this.ws, { streamName, id, subscriptionId });
+        const sub = { streamName, groupId, id, subscriptionId };
+        const subscription = new StreamItemSubscription(sub);
+        this.subscribe(subscription);
+        return subscription;
     }
     /**
      * Subscribe to a group in a stream.
@@ -24,9 +36,58 @@ export class Stream {
      */
     subscribeGroup(streamName, groupId) {
         const subscriptionId = uuidv4();
-        return new StreamGroupSubscription(this.ws, { streamName, groupId, subscriptionId });
+        const sub = { streamName, groupId, subscriptionId };
+        const subscription = new StreamGroupSubscription(sub);
+        this.subscribe(subscription);
+        return subscription;
     }
     close() {
+        this.listeners = {}; // clean up all listeners
+        this.ws.removeEventListener('message', this.messageListener);
+        this.ws.removeEventListener('open', this.onSocketOpen);
+        this.ws.removeEventListener('close', this.onSocketClose);
         this.ws.close();
     }
+    onSocketClose() {
+        // retry to connect
+        setTimeout(() => this.createSocket(), 2000);
+    }
+    onSocketOpen() {
+        Object.values(this.listeners).forEach((listeners) => {
+            listeners.forEach((subscription) => this.join(subscription));
+        });
+    }
+    messageListener(event) {
+        const message = JSON.parse(event.data);
+        const room = this.roomName(message);
+        this.listeners[room]?.forEach((listener) => listener.listener(message));
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    subscribe(subscription) {
+        const room = this.roomName(subscription.sub);
+        if (!this.listeners[room]) {
+            this.listeners[room] = new Set();
+        }
+        this.listeners[room].add(subscription);
+        this.join(subscription);
+        subscription.onClose(() => {
+            this.listeners[room].delete(subscription);
+            this.leave(subscription);
+        });
+    }
+    join(subscription) {
+        if (this.ws.readyState === WebSocket.OPEN) {
+            this.ws.send(JSON.stringify({ type: 'join', data: subscription.sub }));
+        }
+    }
+    leave(subscription) {
+        if (this.ws.readyState === WebSocket.OPEN) {
+            this.ws.send(JSON.stringify({ type: 'leave', data: subscription.sub }));
+        }
+    }
+    roomName(message) {
+        return message.id
+            ? `${message.streamName}:group:${message.groupId}:item:${message.id}`
+            : `${message.streamName}:group:${message.groupId}`;
+    }
 }

package/dist/src/stream.types.d.ts

@@ -1,19 +1,9 @@
 export type BaseMessage = {
     streamName: string;
-} & ({
-    id: string;
-} | {
     groupId: string;
-});
-export type JoinMessage = BaseMessage & {
-    subscriptionId: string;
+    id?: string;
 };
-export type ItemJoinMessage = BaseMessage & {
-    id: string;
-    subscriptionId: string;
-};
-export type GroupJoinMessage = BaseMessage & {
-    groupId: string;
+export type JoinMessage = BaseMessage & {
     subscriptionId: string;
 };
 export type CustomEvent = {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@motiadev/stream-client-browser",
   "description": "Motia Stream Client Package – Responsible for managing streams of data.",
-  "version": "0.2.1-beta.55",
+  "version": "0.2.1-beta.56",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/stream-group.ts

@@ -1,80 +1,37 @@
 import { StreamSubscription } from './stream-subscription'
-import { GroupEventMessage, GroupJoinMessage, Listener, Message } from './stream.types'
-
-export class StreamGroupSubscription<TData extends { id: string }> extends StreamSubscription {
-  private onChangeListeners: Set<Listener<TData[]>> = new Set()
-  private listeners: Set<EventListener> = new Set()
-
-  private state: TData[] = []
-
-  constructor(
-    private readonly ws: WebSocket,
-    private readonly sub: GroupJoinMessage,
-  ) {
-    super()
-
-    const message: Message = { type: 'join', data: sub }
-    const listenerWrapper = (event: MessageEvent<string>) => {
-      const message: GroupEventMessage<TData> = JSON.parse(event.data)
-      const isStreamName = message.streamName === this.sub.streamName
-      const isGroupId = 'groupId' in message && message.groupId === this.sub.groupId
-
-      if (isStreamName && isGroupId) {
-        if (message.event.type === 'sync') {
-          this.state = message.event.data
-        } else if (message.event.type === 'create') {
-          const id = message.event.data.id
+import { GroupEventMessage, JoinMessage } from './stream.types'
+
+export class StreamGroupSubscription<TData extends { id: string }> extends StreamSubscription<
+  TData[],
+  GroupEventMessage<TData>
+> {
+  constructor(sub: JoinMessage) {
+    super(sub, [])
+  }
 
-          if (!this.state.find((item) => item.id === id)) {
-            this.state = [...this.state, message.event.data]
-          }
-        } else if (message.event.type === 'update') {
-          const messageData = message.event.data
-          const messageDataId = messageData.id
-          this.state = this.state.map((item) => (item.id === messageDataId ? messageData : item))
-        } else if (message.event.type === 'delete') {
-          const messageDataId = message.event.data.id
-          this.state = this.state.filter((item) => item.id !== messageDataId)
-        } else if (message.event.type === 'event') {
-          this.onEventReceived(message.event.event)
-        }
+  listener(message: GroupEventMessage<TData>): void {
+    if (message.event.type === 'sync') {
+      this.setState(message.event.data)
+    } else if (message.event.type === 'create') {
+      const id = message.event.data.id
+      const state = this.getState()
 
-        this.onChangeListeners.forEach((listener) => listener(this.state))
+      if (!state.find((item) => item.id === id)) {
+        this.setState([...state, message.event.data])
       }
+    } else if (message.event.type === 'update') {
+      const messageData = message.event.data
+      const messageDataId = messageData.id
+      const state = this.getState()
+
+      this.setState(state.map((item) => (item.id === messageDataId ? messageData : item)))
+    } else if (message.event.type === 'delete') {
+      const messageDataId = message.event.data.id
+      const state = this.getState()
+
+      this.setState(state.filter((item) => item.id !== messageDataId))
+    } else if (message.event.type === 'event') {
+      this.onEventReceived(message.event.event)
     }
-    this.ws.addEventListener('message', listenerWrapper as EventListener)
-    this.listeners.add(listenerWrapper as EventListener)
-
-    ws.send(JSON.stringify(message))
-  }
-
-  /**
-   * Close the subscription.
-   */
-  close() {
-    const message: Message = { type: 'leave', data: this.sub }
-    this.ws.send(JSON.stringify(message))
-    this.listeners.forEach((listener) => this.ws.removeEventListener('message', listener))
-  }
-
-  /**
-   * Add a change listener. This listener will be called whenever the state of the group changes.
-   */
-  addChangeListener(listener: Listener<TData[]>) {
-    this.onChangeListeners.add(listener)
-  }
-
-  /**
-   * Remove a change listener.
-   */
-  removeChangeListener(listener: Listener<TData[]>) {
-    this.onChangeListeners.delete(listener)
-  }
-
-  /**
-   * Get the current state of the group.
-   */
-  getState(): TData[] {
-    return this.state
   }
 }

package/src/stream-item.ts

@@ -1,68 +1,21 @@
 import { StreamSubscription } from './stream-subscription'
-import { ItemEventMessage, ItemJoinMessage, Listener, Message } from './stream.types'
-
-export class StreamItemSubscription<TData extends { id: string }> extends StreamSubscription {
-  private onChangeListeners: Set<Listener<TData>> = new Set()
-  private listeners: Set<EventListener> = new Set()
-  private state: TData | null = null
-
-  constructor(
-    private readonly ws: WebSocket,
-    private readonly sub: ItemJoinMessage,
-  ) {
-    super()
-
-    const message: Message = { type: 'join', data: sub }
-    const listenerWrapper = (event: MessageEvent<string>) => {
-      const message: ItemEventMessage<TData> = JSON.parse(event.data)
-      const isStreamName = message.streamName === this.sub.streamName
-      const isId = 'id' in message && message.id === this.sub.id
-
-      if (isStreamName && isId) {
-        if (message.event.type === 'sync' || message.event.type === 'create' || message.event.type === 'update') {
-          this.state = message.event.data
-        } else if (message.event.type === 'delete') {
-          this.state = null
-        } else if (message.event.type === 'event') {
-          this.onEventReceived(message.event.event)
-        }
-
-        this.onChangeListeners.forEach((listener) => listener(this.state))
-      }
-    }
-    this.ws.addEventListener('message', listenerWrapper as EventListener)
-    this.listeners.add(listenerWrapper as EventListener)
-
-    ws.send(JSON.stringify(message))
+import { ItemEventMessage, JoinMessage } from './stream.types'
+
+export class StreamItemSubscription<TData extends { id: string }> extends StreamSubscription<
+  TData | null,
+  ItemEventMessage<TData>
+> {
+  constructor(sub: JoinMessage) {
+    super(sub, null)
   }
 
-  /**
-   * Close the subscription.
-   */
-  close() {
-    const message: Message = { type: 'leave', data: this.sub }
-    this.ws.send(JSON.stringify(message))
-    this.listeners.forEach((listener) => this.ws.removeEventListener('message', listener))
-  }
-
-  /**
-   * Add a change listener. This listener will be called whenever the state of the item changes.
-   */
-  addChangeListener(listener: Listener<TData>) {
-    this.onChangeListeners.add(listener)
-  }
-
-  /**
-   * Remove a change listener.
-   */
-  removeChangeListener(listener: Listener<TData>) {
-    this.onChangeListeners.delete(listener)
-  }
-
-  /**
-   * Get the current state of the item.
-   */
-  getState(): TData | null {
-    return this.state
+  listener(message: ItemEventMessage<TData>): void {
+    if (message.event.type === 'sync' || message.event.type === 'create' || message.event.type === 'update') {
+      this.setState(message.event.data)
+    } else if (message.event.type === 'delete') {
+      this.setState(null)
+    } else if (message.event.type === 'event') {
+      this.onEventReceived(message.event.event)
+    }
   }
 }

package/src/stream-subscription.ts

@@ -1,10 +1,23 @@
-import { CustomEvent } from './stream.types'
+import { CustomEvent, JoinMessage, Listener } from './stream.types'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type CustomEventListener = (event: any) => void
 
-export abstract class StreamSubscription {
+export abstract class StreamSubscription<TData = unknown, TEventData = unknown> {
   private customEventListeners: Map<string, CustomEventListener[]> = new Map()
+  private closeListeners: Set<() => void> = new Set()
+
+  private onChangeListeners: Set<Listener<TData>> = new Set()
+  private state: TData
+
+  readonly sub: JoinMessage
+
+  constructor(sub: JoinMessage, state: TData) {
+    this.sub = sub
+    this.state = state
+  }
+
+  abstract listener(message: TEventData): void
 
   protected onEventReceived(event: CustomEvent) {
     const customEventListeners = this.customEventListeners.get(event.type)
@@ -33,4 +46,39 @@ export abstract class StreamSubscription {
       listeners.filter((l) => l !== listener),
     )
   }
+
+  onClose(listener: () => void) {
+    this.closeListeners.add(listener)
+  }
+
+  close() {
+    this.closeListeners.forEach((listener) => listener())
+    this.closeListeners.clear()
+  }
+
+  /**
+   * Add a change listener. This listener will be called whenever the state of the group changes.
+   */
+  addChangeListener(listener: Listener<TData>) {
+    this.onChangeListeners.add(listener)
+  }
+
+  /**
+   * Remove a change listener.
+   */
+  removeChangeListener(listener: Listener<TData>) {
+    this.onChangeListeners.delete(listener)
+  }
+
+  /**
+   * Get the current state of the group.
+   */
+  getState(): TData {
+    return this.state
+  }
+
+  protected setState(state: TData) {
+    this.state = state
+    this.onChangeListeners.forEach((listener) => listener(state))
+  }
 }

package/src/stream.ts

@@ -1,24 +1,45 @@
 import { v4 as uuidv4 } from 'uuid'
 import { StreamGroupSubscription } from './stream-group'
 import { StreamItemSubscription } from './stream-item'
+import { StreamSubscription } from './stream-subscription'
+import { BaseMessage } from './stream.types'
 
 export class Stream {
   private ws: WebSocket
+  private listeners: { [channelId: string]: Set<StreamSubscription> } = {}
 
-  constructor(address: string, onReady: () => void) {
-    this.ws = new WebSocket(address)
-    this.ws.onopen = () => onReady()
+  constructor(private address: string) {
+    this.ws = this.createSocket()
+  }
+
+  createSocket(): WebSocket {
+    this.ws = new WebSocket(this.address)
+    this.ws.addEventListener('message', (message) => this.messageListener(message))
+    this.ws.addEventListener('open', () => this.onSocketOpen())
+    this.ws.addEventListener('close', () => this.onSocketClose())
+
+    return this.ws
   }
 
   /**
    * Subscribe to an item in a stream.
    *
    * @argument streamName - The name of the stream to subscribe to.
+   * @argument groupId - The id of the group to subscribe to.
    * @argument id - The id of the item to subscribe to.
    */
-  subscribeItem<TData extends { id: string }>(streamName: string, id: string): StreamItemSubscription<TData> {
+  subscribeItem<TData extends { id: string }>(
+    streamName: string,
+    groupId: string,
+    id: string,
+  ): StreamItemSubscription<TData> {
     const subscriptionId = uuidv4()
-    return new StreamItemSubscription<TData>(this.ws, { streamName, id, subscriptionId })
+    const sub = { streamName, groupId, id, subscriptionId }
+    const subscription = new StreamItemSubscription<TData>(sub)
+
+    this.subscribe(subscription)
+
+    return subscription
   }
 
   /**
@@ -29,10 +50,72 @@ export class Stream {
    */
   subscribeGroup<TData extends { id: string }>(streamName: string, groupId: string): StreamGroupSubscription<TData> {
     const subscriptionId = uuidv4()
-    return new StreamGroupSubscription<TData>(this.ws, { streamName, groupId, subscriptionId })
+    const sub = { streamName, groupId, subscriptionId }
+    const subscription = new StreamGroupSubscription<TData>(sub)
+
+    this.subscribe(subscription)
+
+    return subscription
   }
 
   close() {
+    this.listeners = {} // clean up all listeners
+    this.ws.removeEventListener('message', this.messageListener)
+    this.ws.removeEventListener('open', this.onSocketOpen)
+    this.ws.removeEventListener('close', this.onSocketClose)
     this.ws.close()
   }
+
+  private onSocketClose(): void {
+    // retry to connect
+    setTimeout(() => this.createSocket(), 2000)
+  }
+
+  private onSocketOpen(): void {
+    Object.values(this.listeners).forEach((listeners) => {
+      listeners.forEach((subscription) => this.join(subscription))
+    })
+  }
+
+  messageListener(event: MessageEvent<string>): void {
+    const message: BaseMessage = JSON.parse(event.data)
+    const room = this.roomName(message)
+
+    this.listeners[room]?.forEach((listener) => listener.listener(message as unknown))
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  private subscribe(subscription: StreamSubscription<any, any>): void {
+    const room = this.roomName(subscription.sub)
+
+    if (!this.listeners[room]) {
+      this.listeners[room] = new Set()
+    }
+
+    this.listeners[room].add(subscription)
+    this.join(subscription)
+
+    subscription.onClose(() => {
+      this.listeners[room].delete(subscription)
+      this.leave(subscription)
+    })
+  }
+
+  private join(subscription: StreamSubscription): void {
+    if (this.ws.readyState === WebSocket.OPEN) {
+      this.ws.send(JSON.stringify({ type: 'join', data: subscription.sub }))
+    }
+  }
+
+  private leave(subscription: StreamSubscription): void {
+    if (this.ws.readyState === WebSocket.OPEN) {
+      this.ws.send(JSON.stringify({ type: 'leave', data: subscription.sub }))
+    }
+  }
+
+  private roomName(message: BaseMessage): string {
+    return message.id
+      ? `${message.streamName}:group:${message.groupId}:item:${message.id}`
+      : `${message.streamName}:group:${message.groupId}`
+  }
 }

package/src/stream.types.ts

@@ -1,7 +1,5 @@
-export type BaseMessage = { streamName: string } & ({ id: string } | { groupId: string })
+export type BaseMessage = { streamName: string; groupId: string; id?: string }
 export type JoinMessage = BaseMessage & { subscriptionId: string }
-export type ItemJoinMessage = BaseMessage & { id: string; subscriptionId: string }
-export type GroupJoinMessage = BaseMessage & { groupId: string; subscriptionId: string }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type CustomEvent = { type: string; data: any }
 export type StreamEvent<TData extends { id: string }> =