y-azure-webpubsub-dev
TypeScript icon, indicating that this package has built-in type declarations

1.0.0-beta.5 • Public • Published

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
  2. Create a client connection provider.

    import { Doc } from "yjs"
    import { WebPubSubSyncClient } from "y-azure-webpubsub"
    
    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

Package Sidebar

Install

npm i y-azure-webpubsub-dev

Weekly Downloads

8

Version

1.0.0-beta.5

License

MIT

Unpacked Size

83.4 kB

Total Files

29

Last publish

Collaborators

  • stdrickforce