# y-azure-webpubsub-client

> - [Microsoft Azure Web PubSub](https://docs.microsoft.com/en-us/azure/azure-web-pubsub/overview) is a real-time messaging cloud service.

Latest version **1.0.0-beta.24** (published 2022-04-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install y-azure-webpubsub-client
pnpm add y-azure-webpubsub-client
yarn add y-azure-webpubsub-client
bun add y-azure-webpubsub-client
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.0.0-beta.24 |
| Published | 2022-04-22 |
| First published | 2022-04-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 35.5 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 144 |
| Author | Microsoft |
| Maintainers | stdrickforce |
| Keywords | azure, webpubsub, yjs |

## Links

- npm: https://www.npmjs.com/package/y-azure-webpubsub-client
- Repository: https://github.com/Azure/azure-webpubsub
- Homepage: https://github.com/Azure/azure-webpubsub/tree/main/experimental/sdk/y-azure-webpubsub
- Issues: https://github.com/Azure/azure-webpubsub/issues
- npm.io page: https://npm.io/package/y-azure-webpubsub-client

## Dependencies (5)

- [yjs](https://npm.io/package/yjs.md) ^13.5.34
- [lib0](https://npm.io/package/lib0.md) ^0.2.51
- [uuid](https://npm.io/package/uuid.md) ^8.3.2
- [buffer](https://npm.io/package/buffer.md) ^6.0.3
- [y-protocols](https://npm.io/package/y-protocols.md) ^1.0.5

## Alternatives

- [async-exit-hook](https://npm.io/package/async-exit-hook.md) — 3.7M weekly downloads
- [evnty](https://npm.io/package/evnty.md) — 7.2K weekly downloads
- [eleventy-plugin-asciidoc](https://npm.io/package/eleventy-plugin-asciidoc.md) — 3.5K weekly downloads
- [@jswork/next-get2get](https://npm.io/package/@jswork/next-get2get.md) — 945 weekly downloads
- [@dashersw/axon](https://npm.io/package/@dashersw/axon.md) — 934 weekly downloads

## Recent versions

- 1.0.0-beta.24 (latest) — 2022-04-22
- 1.0.0-beta.23 — 2022-04-20
- 1.0.0-beta.0 — 2022-04-19

## README

# Yjs binding for Azure WebPubSub

## Introduction

- [Microsoft Azure Web PubSub](https://docs.microsoft.com/en-us/azure/azure-web-pubsub/overview) is a real-time messaging cloud service.

- [Yjs](https://github.com/yjs/yjs) is a [CRDT implementation](https://github.com/yjs/yjs#Yjs-CRDT-Algorithm) 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.

    ```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 ?? "",
      "<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.

    ```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 = "<topic name>";
    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](https://docs.yjs.dev/api/shared-types/y.text) API for details.

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

1. Publish changes. See [Y.Text](https://docs.yjs.dev/api/shared-types/y.text) API for details.

    ```ts
    text.insert(...)
    text.delete(...)
    ```

## Example

Here is an example to build a collaborate code editor with [Monaco Editor](https://microsoft.github.io/monaco-editor/).

[Collaborate Code Editor](../../../samples/javascript/collaborate-code-editor/)

---
_Source: https://npm.io/package/y-azure-webpubsub-client · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._