@pluv/client NPM

Disclaimer: This package is currently in preview and may have breaking changes between versions. Please wait for a v1.0.0 stable release before using this in production.

`@pluv/client`

Framework agnostic frontend client for @pluv/io

👉 See full documentation on pluv.io. 👈

Installation

# npm
npm install @pluv/client @pluv/crdt-yjs yjs

# yarn
yarn add @pluv/client @pluv/crdt-yjs yjs

# pnpm
pnpm add @pluv/client @pluv/crdt-yjs yjs

If you plan on using presence and/or storage, make sure to also install zod.

Basic Example

import { createClient } from "@pluv/client";
import { yjs } from "@pluv/crdt-yjs";
import { z } from "zod";
// Import the PluvIO instance as a type from your server file
import { type io } from "./server";

// Initialize the @pluv/client client
const client = createClient<typeof io>({
    authEndpoint: (room) => {
        return `https://localhost:3000/api/authorize?room=${room}`;
    },
    wsEndpoint: (room) => {
        return `ws://localhost:3000/api/room/${room}`;
    },
});

interface Presence {
    cursor: { x: number; y: number } | null;
}

interface Storage {
    messages: readonly { name: string; message: string }[]
}

// Create a room to join
const room = client.createRoom<Presence, Storage>("my-room", {
    initialPresence: { cursor: null },
    initialStorage: yjs.doc(() => ({ messages: yjs.array([]) })),
    onAuthorizationFail: (error) => {
        console.log(error.message);
    },
    presence: z.object({
        cursor: z.nullable(
            z.object({
                x: z.number(),
                y: z.number(),
            })
        ),
    }),
});

const main = async () => {
    await client.enter(room);

    const unsubscribe = client.event("RECEIVE_MESSAGE", ({ data }) => {
        console.log(data.message);
    });

    client.broadcast({
        type: "SEND_MESSAGE",
        data: { message: "Hello world!" },
    });

    unsubscribe();

    client.leave(room);
};