WebSockets

Introduction

The WebSocket Store is a store for Weave.js that uses the WebSockets API as the transport layer to enable real-time collaboration over the internet. Built on top of Yjs’s y-websocket provider, it connects all clients to a central server that manages updates and syncs shared state almost instantly.

It supports features like user presence, shared document syncing, and optional data persistence on the backend side.

Server frameworks supported

On the server side we provide some utilities to setup the backend server.

As today we support this server-side frameworks:

Express

Other server frameworks

For other server types, you can take a look at the code and build your own support.

On our roadmap we will inform when we will give support to other server frameworks.

Usage

Check the WebSocket store package API reference for an overview of how to use it both:

Server-side or
Frontend-side

Client events

When the store client tries to connect, we provide an event were we return the connection status, the event is named onStoreConnectionStatusChange, and it returns the actual connection status, being this status:

const WEAVE_STORE_CONNECTION_STATUS = {
  ["ERROR"]: "error",
  ["CONNECTING"]: "connecting",
  ["CONNECTED"]: "connected",
  ["DISCONNECTED"]: "disconnected",
} as const;

type WeaveStoreConnectionStatusKeys =
  keyof typeof WEAVE_STORE_CONNECTION_STATUS;
type WeaveStoreConnectionStatus =
  (typeof WEAVE_STORE_CONNECTION_STATUS)[WeaveStoreConnectionStatusKeys];

type WeaveStoreOnStoreConnectionStatusChangeEvent = WeaveStoreConnectionStatus;

Client connectivity flow

We've prepared this simple diagram showcasing how the connectivity works on the Weave.js instance when using this store. The lines connecting display the value of the connection status returned on the onStoreConnectionStatusChange event.