How We Built Real-Time Cursors with WebSockets

One of the most critical components of any collaborative editor is the real-time cursor. It's the primary way users sense the presence of others in the room. When we started building CodeshareLive, we knew that latency under 100ms was the threshold for "instant" feel. Anything higher, and the collaborative experience begins to break down.

The Architecture

We chose WebSockets (via Socket.io) as our transport layer because of its low-overhead, persistent connection model. Every cursor movement is emitted as a lightweight JSON packet containing the X/Y coordinates (line/character index) and the user's unique ID.

socket.emit('cursor_move', {
  roomId: 'xyz-123',
  userId: 'user-789',
  position: { line: 12, ch: 42 }
});

Handling State Jitter

Network conditions are never perfect. We implemented a client-side interpolation strategy to smooth out the movement of remote cursors. Instead of snapping the cursor to the new position immediately, we use a 50ms transition to glide it to the new coordinate, making the multiplayer experience feel buttery smooth even on slightly unstable connections.

In the next post, we'll dive into how we handle the Operational Transformation (OT) for actual text editing—the real heart of a collaborative engine.