Move your pointer over the stage below. When this page can reach a Slash Socket server, everyone on the page shares the stage: open it in a second window and each pointer shows up in the other. Press / over the stage to chat next to your cursor: everyone sees the line as you type it, Enter sends it and Escape cancels. The chip in the top corner sets how you show up: pick a name, or connect GitHub to put your handle and avatar on your cursor. With no server to reach, the stage shows a static preview instead.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798"use client"
import { useEffect, useRef } from "react"import { io } from "socket.io-client"
import "./live-cursors.css"
interface CursorUpdate { id: string color: string username: string | null x: number y: number vw: number vh: number}
interface LiveCursorsProps { username: string url?: string}
/** * Everyone's pointer over one shared stage. Positions arrive up to 60×/s * per person, so they're written straight to the DOM, never React state. */export function LiveCursors({ username, url = "http://localhost:3001" }: LiveCursorsProps) { const stageRef = useRef<HTMLDivElement>(null)
useEffect(() => { const stage = stageRef.current if (!stage) return
const socket = io(url, { transports: ["websocket"] }) const cursors = new Map<string, HTMLElement>() let frame = 0
socket.on("connect", () => socket.emit("set_username", { username }))
socket.on("cursor_update", ({ id, color, username, x, y, vw, vh }: CursorUpdate) => { let cursor = cursors.get(id) if (!cursor) { cursor = document.createElement("div") cursor.className = "cursor" stage.append(cursor) cursors.set(id, cursor) } const name = username ?? "Guest" if (cursor.textContent !== name) cursor.textContent = name cursor.style.setProperty("--color", color) cursor.hidden = x < 0 // x: -1 means they left the stage cursor.style.setProperty("--x", String(x / vw)) cursor.style.setProperty("--y", String(y / vh)) })
// Remove the cursors of anyone who disconnected. socket.on("users_update", (users: { id: string }[]) => { const online = new Set(users.map((user) => user.id)) for (const [id, cursor] of cursors) { if (online.has(id)) continue cursor.remove() cursors.delete(id) } })
const onPointerMove = (event: PointerEvent) => { const rect = stage.getBoundingClientRect() const position = { x: event.clientX - rect.left, y: event.clientY - rect.top, vw: rect.width, vh: rect.height, } // At most one emit per frame. volatile drops it if the socket is // busy, instead of queueing stale positions that replay in a burst. cancelAnimationFrame(frame) frame = requestAnimationFrame(() => socket.volatile.emit("cursor_move", position)) }
const onPointerLeave = () => { cancelAnimationFrame(frame) socket.emit("cursor_move", { x: -1, y: -1, vw: 1, vh: 1 }) }
stage.addEventListener("pointermove", onPointerMove) stage.addEventListener("pointerleave", onPointerLeave)
return () => { cancelAnimationFrame(frame) stage.removeEventListener("pointermove", onPointerMove) stage.removeEventListener("pointerleave", onPointerLeave) socket.disconnect() for (const cursor of cursors.values()) cursor.remove() } }, [username, url])
return <div ref={stageRef} className="stage" />}The tabs above hold everything the demo needs: the same component in React or Angular, plus the styles for the cursors. Each pointer move is reported with cursor_move, and the server broadcasts it to everyone else as cursor_update, along with the sender's color and name. Positions are sent in pixels together with the stage size (vw, vh), so every client draws them at the same relative spot, whatever size its stage is. Sending x: -1 means "my cursor left the stage", and users_update tells you when someone disconnects so you can remove their cursor.
- Write positions straight to each cursor's element, not into React state. Cursors update up to 60 times a second per person, and re-rendering on every update is what makes them lag.
- Move cursors with transform only and never put a CSS transition on the position. Easing a cursor's movement only adds delay.
- Send at most one cursor_move per animation frame, and send it with volatile so a busy connection drops old positions instead of queueing them.
To try the demo against your own server, start it in Slash Socket and open slash.tools/socket/docs/live-cursors?socket=http://localhost:3001. Browsers may ask for permission before a public page can reach localhost. For a full Next.js setup with a shared connection and environment config, see the Next.js Example.