DocsPricing
Dashboard

Define Events

In pluv.io, you can define custom events with an input validation schema and a function, and have them be automatically type-safe without having to manage your own types.

Usage example

 
import { createClient, infer } from "@pluv/client";
import { z } from "zod";
import type { ioServer } from "./backend/pluv-io";

const types = infer((i) => ({ io: i<typeof ioServer> }));
const io = createClient({
    types,
});

// Create your custom events as procedures
const sendMessage = io.procedure
    .input(z.object({ message: z.string() }))
    .broadcast(({ message }) => ({
        receiveMessage: { message },
    }));

const doubleValue = io.procedure
    .input(z.object({ value: z.number() }))
    .broadcast(({ value }) => ({
        receiveValue: { value: value * 2 },
    }));

const wave = io.procedure
    .broadcast(() => ({
        receiveMessage: { message: "Hello world!" },
    }));

// Then add the procedures to your router
const router = io.router({
    sendMessage,
    doubleValue,
    wave,
});

// Lastly, add the router to your server, so that it can begin accepting custom events
const room = io.createRoom("my-custom-room", {
    // ...,
    router,
});

Sending and receiving events

 
const room = client.createRoom("...", { /* ... */ });

// Send events
room.broadcast.sendMessage({ message: "Hello world!" });
room.broadcast.wave();

// Receive events
room.event.receiveMessage(({ data }) => {
    console.log(data.message);
});
room.event.receiveValue(({ data }) => {
    console.log(data.value);
});

Related