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

$3

1. Install required packages.

``

bash

    npm install @azure/web-pubsub

    npm install y-azure-webpubsub





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



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

ts

    import { Doc } from "yjs"

    import { WebPubSubServiceClient } from "@azure/web-pubsub";

    import { WebPubSubSyncHost } from "y-azure-webpubsub";



    const client: WebPubSubServiceClient = new WebPubSubServiceClient(

      connectionString ?? "",

      ""

    );



    // create a host connection for each topic.

    const topic = "";

    const doc = new Doc();

    const host = new WebPubSubSyncHost(client, topic, doc);

    host.start();





$3



1. Install required packages.

bash

    npm install yjs y-azure-webpubsub-client





1. Create a client connection provider.

ts

    import { Doc } from "yjs"

    import { WebPubSubSyncClient } from "y-azure-webpubsub-client"



    const topic = "";

    const doc = new Doc();

    const client = new WebPubSubSyncClient(url, topic, doc);

    client.start();



    const text = doc.getText('your type')





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

ts

    text.observe(e => { 

        // ... 

    })





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

ts

    text.insert(...)

    text.delete(...)

Example

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

Collaborate Code Editor