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.

npm install --save @roomservice/browser

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);
});

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 };
};