Yjs binding for Azure WebPubSub

Introduction

• Microsoft Azure Web PubSub is a real-time messaging cloud service.

• Yjs is a CRDT implementation that exposes its internal data structure as shared types. Shared types are common data types like Map or Array with superpowers: changes are automatically distributed to other peers and merged without merge conflicts.

This package implements a classical client-server model, which helps developers use Microsoft Azure WebPub service to distribute changes without conflicts.

Usage

Server

1. Install required packages.

   npm install @azure/web-pubsub
   npm install y-azure-webpubsub

2. Create a host connection to handle conflicts and distribute changes.

   Note that there is only 1 host connection is allowed for each topic.

   import { Doc } from "yjs"
   import { WebPubSubServiceClient } from "@azure/web-pubsub";
   import { WebPubSubSyncHost } from "y-azure-webpubsub";
   
   const client: WebPubSubServiceClient = new WebPubSubServiceClient(
     connectionString ?? "",
     "<hub name>"
   );
   
   // create a host connection for each topic.
   const topic = "<topic name>";
   const doc = new Doc();
   const host = new WebPubSubSyncHost(client, topic, doc);
   host.start();

Client or Browser

1. Install required packages.

   npm install yjs y-azure-webpubsub-client

2. Create a client connection provider.

   import { Doc } from "yjs"
   import { WebPubSubSyncClient } from "y-azure-webpubsub-client"
   
   const topic = "<topic name>";
   const doc = new Doc();
   const client = new WebPubSubSyncClient(url, topic, doc);
   client.start();
   
   const text = doc.getText('your type')

3. Subscribe changes. See Y.Text API for details.

   text.observe(e => { 
       // ... 
   })

4. Publish changes. See Y.Text API for details.

   text.insert(...)
   text.delete(...)

Example

Here is an example to build a collaborate code editor with Monaco Editor.

Collaborate Code Editor