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.
Instantiation
const store = new WeaveStoreWebsockets(initialRoomData: Uint8Array | FetchInitialState | undefined, storeOptions: WeaveStoreOptions, websocketOptions: WeaveStoreWebsocketsOptions);Parameters
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
|
|
Required |
If the room is not new, the actual data (snapshot) of the room in binary form. |
|
|
|
Required |
A function that returns a WeaveUser as definition of the metadata of the user that connects to a room |
|
|
|
An object that defines the Undo-Redo manager options |
||
|
|
Required |
Room id that we want to join |
|
|
|
Required |
WebSocket underlying client properties |
|
|
|
|
Callbacks defined for the instance |
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;
};
type FetchInitialState = (doc: Doc) => void;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. It is also emitted when a room connection begins (on every connect() call), resetting all stack counts to 0 and both canUndo and canRedo to false.