Liveblocks vs Pusher

import { createClient } from '@liveblocks/client';
import { createRoomContext } from '@liveblocks/react';

const client = createClient({
  publicApiKey: process.env.NEXT_PUBLIC_LIVEBLOCKS_KEY!,
});

export const {
  RoomProvider,
  useOthers,
  useUpdateMyPresence,
} = createRoomContext(client);

// In your component:
function CollabRoom() {
  const others = useOthers();
  const updatePresence = useUpdateMyPresence();

  return (
    <div onMouseMove={(e) => updatePresence({ cursor: { x: e.clientX, y: e.clientY } })}>
      {others.map(({ connectionId, presence }) =>
        presence.cursor ? <Cursor key={connectionId} {...presence.cursor} /> : null
      )}
    </div>
  );
}

// Server (Node.js)
import Pusher from 'pusher';

const pusher = new Pusher({
  appId: process.env.PUSHER_APP_ID!,
  key: process.env.PUSHER_KEY!,
  secret: process.env.PUSHER_SECRET!,
  cluster: 'us2',
  useTLS: true,
});

await pusher.trigger('my-channel', 'my-event', { message: 'Hello!' });

// Client
import Pusher from 'pusher-js';
const client = new Pusher(process.env.NEXT_PUBLIC_PUSHER_KEY!, { cluster: 'us2' });
const channel = client.subscribe('my-channel');
channel.bind('my-event', (data: any) => console.log(data));