Custom Events

Define custom events on your backend @pluv/io instance. Then send and receive custom websocket events in a type-safe way with @pluv/react.

Define custom events

To get started, define custom events in your backend @pluv/io instance (see Define Events to get started).

Use custom events

Then, assuming you've already setup your React.js bundle and providers, listen and broadcast your custom events using useBroadcast and useEvent from your react bundle.

1import { pluvRoom } from "frontend/io";
2import { useCallback } from "react";
3import { emojiMap } from "./emojiMap";
4
5pluvRoom.useEvent("EMOJI_RECEIVED", ({ data }) => {
6    const emoji = emojiMap[data.emojiCode];
7
8    console.log(emoji);
9});
10
11const broadcast = pluvRoom.useBroadcast();
12
13const onEmoji = useCallback((emojiCode: number): void => {
14    broadcast("EMIT_EMOJI", { emojiCode });
15}, [broadcast]);