@roomservice/browser

@roomservice/browser

Room Service helps you add real-time collaboration to your app. It's a real-time service with a built-in CRDT that automatically merges multiple people's state together without horrifying nightmare bugs. To learn more, see roomservice.dev.

This is the official, javascript SDK.

Install

npm install --save @roomservice/browser

Usage

To get started, create a client with your Auth Endpoint.

import RoomService from "@roomservice/browser";

const client = new RoomService({
  authUrl: "https://mysite.com/auth/roomservice"
});

Next, we'll create a room client and try to connect to the room:

const room = client.room("my-room");
const { doc } = await room.init();

Then, you can publish changes to the room:

room.publishDoc(doc => {
  doc.title = "LaTeX: a Method of Obscuring Redundancy";
});

And listen for any incoming changes:

room.onUpdate(newDoc => {
  console.log(newDoc);
});

Server Side Rendering

To render on the server, you must include any headers that should be passed along to your auth endpoint. In most cases, this is just your session cookie.

For example, in Next.js:

const room = client.room("my-room");

MyComponent.getInitialProps = async ctx => {
  const { doc } = await room.init({
    headers: {
      cookie: ctx.req.headers
    }
  });

  return { doc };
};