Weave.js
Server

WeaveAzureWebPubsubServer

API reference for the WeaveAzureWebPubsubServer class

Overview

The WeaveAzureWebPubsubServer is a server-side class in the Weave.js Azure Web PubSub store that enables real-time collaboration using Azure Web PubSub as the transport layer. It serves as a store provider, handling the synchronization of shared document state across all clients connected to a specific room.

Built on top of Yjs, this class leverages Azure's managed Web PubSub infrastructure to offer scalable, low-latency communication, with support for CRDT-based document syncing, user presence (awareness), and optional persistence of shared state.

This class enables seamless collaboration by handling server-side:

  • Connection management via WebSocket clients
  • Document synchronization using CRDTs (through Yjs)
  • Broadcasting updates between users in real time
  • Support for awareness events
  • Support for persistence of the shared-state

Import

import { WeaveAzureWebPubsubServer } from "@inditextech/weave-store-azure-web-pubsub/server";

Instantiation

const azureWebPubSubServer = new WeaveAzureWebPubsubServer(params: WeaveAzureWebPubsubServerParams);

Parameters

PropTypeDefault
initialState?
initialState
defaultInitialState
fetchRoom?
FetchRoom
-
persistRoom?
PersistRoom
-
eventsHandlerConfig
WebPubSubEventHandlerOptions
-
pubsubConfig
WeaveAzureWebPubsubConfig
-

Methods

getMiddleware

getMiddleware();

This method return the necessary middlewares that you need to attach to your Express server in order to manage the Azure Web PubSub connectivity.

clientConnect

clientConnect(roomId: string): Promise<string>

This method return a secure connection URL to use client-side to connect to the Azure Web PubSub infrastructure.

Used

TypeScript types

type PerformUpgrade = (req: IncomingMessage) => Promise<boolean>;

type ExtractRoomId = (req: IncomingMessage) => string | undefined;

type FetchInitialState = (doc: Y.Doc) => void;

type PersistRoom = (
  roomId: string,
  actualState: Uint8Array<ArrayBufferLike>
) => Promise<void>;

type FetchRoom = (roomId: string) => Promise<Uint8Array | null>;

type WeaveAzureWebPubsubConfig = {
  endpoint: string;
  key: string;
  hubName: string;
};

type WeaveAzureWebPubsubServerParams = {
  initialState?: FetchInitialState;
  pubSubConfig: WeaveAzureWebPubsubConfig;
  persistRoom?: PersistRoom;
  fetchRoom?: FetchRoom;
};

interface WebPubSubEventHandlerOptions {
  /**
   * Custom serving path for the path of the CloudEvents handler.
   */
  path?: string;

  /**
   * Handle 'connect' event, the service waits for the response to proceed.
   */
  handleConnect?: (
    connectRequest: ConnectRequest,
    connectResponse: ConnectResponseHandler
  ) => void;

  /**
   * Handle user events, the service waits for the response to proceed.
   */
  handleUserEvent?: (
    userEventRequest: UserEventRequest,
    userEventResponse: UserEventResponseHandler
  ) => void;

  /**
   * Event trigger for "connected" unblocking event. This is an unblocking event and the service does not wait for the response.
   */
  onConnected?: (connectedRequest: ConnectedRequest) => void;

  /**
   *
   * Event triggers for "disconnected" unblocking event. This is an unblocking event and the service does not wait for the response.
   */
  onDisconnected?: (disconnectedRequest: DisconnectedRequest) => void;

  /**
   * If not specified, by default allow all the endpoints, otherwise only allow specified endpoints
   */
  allowedEndpoints?: string[];
}

Shared-state initial value

If not defined the defaultInitialState is used, which is nothing more than:

A Stage node with 5 children Layer nodes, in the specified order (bottom-to-top):

  • gridLayer: is the layer used by WeaveStageGridPlugin to render the reference grid elements.
  • mainLayer: is the main layer where all the nodes added by the users live.
  • selectionLayer: is the layer used by WeaveNodesSelectionPlugin to render the selection overlay elements.
  • usersPointersLayer: is the layer used by WeaveUsersPointersPlugin to render the users pointers overlay elements.
  • utilityLayer: is a wildcard layer defined that can be used by any plugin.

Check out here the code hat defines the defaultInitialState function.