WeaveStoreWebsockets

Overview

The WeaveStoreWebsockets class is a client-side store implementation in the Weave.js ecosystem that enables real-time collaboration using WebSockets. It connects to a compatible WebSocket server—such as WeaveWebsocketsServer to sync shared canvas state across all connected users.

Built on top of Yjs and y-websocket, it acts as a bridge between the client-side Weave.js app and the remote backend, handling updates, awareness (presence), and document syncing with minimal setup.

Import

import { WeaveStoreWebsockets } from "@inditextech/weave-store-websockets/client";

Instantiation

const store = new WeaveStoreWebsockets(storeOptions: WeaveStoreOptions, websocketOptions: WeaveStoreWebsocketsOptions);

Parameters

Prop	Type	Default
`websocketOptions.callbacks?`	`WeaveStoreWebsocketsCallbacks`	`{}`
`websocketOptions.wsOptions`	`{ serverUrl: string; }`	-
`websocketOptions.roomId`	`string`	-
`storeOptions.undoManagerOptions?`	`WeaveUndoManagerOptions`	-
`storeOptions.getUser`	`() => WeaveUser`	-

TypeScript types

type WeaveStoreWebsocketsConnectionStatusKeys =
  keyof typeof WEAVE_STORE_WEBSOCKETS_CONNECTION_STATUS;
type WeaveStoreWebsocketsConnectionStatus =
  (typeof WEAVE_STORE_WEBSOCKETS_CONNECTION_STATUS)[WeaveStoreWebsocketsConnectionStatusKeys];

type WeaveStoreWebsocketsCallbacks = {
  onConnectionStatusChange?: (
    status: WeaveStoreWebsocketsConnectionStatus
  ) => void;
};

type WeaveUser = {
  name: string;
  email: string;
};

type WeaveUndoManagerOptions = {
  captureTimeout?: number;
  trackedOrigins?: Set<any>;
};

type WeaveStoreOptions = {
  getUser: () => WeaveUser;
  undoManagerOptions?: WeaveUndoManagerOptions;
};

type WeaveStoreWebsocketsOptions = {
  roomId: string;
  wsOptions: {
    serverUrl: string;
  };
  callbacks?: WeaveStoreWebsocketsCallbacks;
};

Events

onStateChange

onStateChange: WeaveStoreOnStateChangeEvent;

The onStateChange event is called when the shared-state changes.

onRoomLoaded

onRoomLoaded: WeaveStoreOnRoomLoadedEvent;

The onRoomLoaded event is called when the room shared-state is loaded.

onUndoManagerStatusChange

onUndoManagerStatusChange: WeaveStoreOnUndoRedoChangeEvent;

The onUndoManagerStatusChange event is called when the undo/redo manager changes.

onNodeChange

onNodeChange: WeaveStoreOnNodeChangeEvent;

The onNodeChange event is called when there is a single node selected and the node changes.

Methods

connect

connect(): void

The connect method is called when an user tries to join a room.

disconnect

disconnect(): void

The disconnect method is called when an user leaves a room.

setAwarenessInfo

setAwarenessInfo(field: string, value: unknown): void

This method set awareness information, for example if you want to inform the metadata of an user that connected to the room, or to send the pointer information of that user to the other peers.

WeaveStoreWebsockets

On this page