Live Presence & Cursor

~11 min · app, presence, cursors

Level 0Poller

0 XP0/60 lessons0/10 achievements

0/120 XP to next level120 XP to go0% complete

Cursor 위치 throttle, raw 아니라

브라우저 mousemove 가 초당 수백 회 발화. 모든 거 WebSocket 으로 보내면 connection saturate, 서버 자원 낭비. 초당 20-30 update 로 throttle; 사람 눈은 더 안 필요, 특히 점 사이 interpolate 하는 CSS transition 과 함께.

Presence 는 그냥 특수 message

'User X online' 이 한 message; 'user X offline' 이 다른; 'user X 가 문서 Y 의 (100,200) 에 cursor' 가 또 다른. 특별한 'presence' protocol 없어 — 그냥 application 이 해석하는 typed message. Figma 가 presence, Slack 이 user.status; wire 모양 같음.

Code

클라: cursor throttle + 다른 사람 render·javascript

let lastSent = 0;
const THROTTLE_MS = 50; // 20 Hz

document.addEventListener('mousemove', (e) => {
  const now = Date.now();
  if (now - lastSent < THROTTLE_MS) return;
  lastSent = now;
  ws.send(JSON.stringify({
    type: 'presence.cursor',
    data: { x: e.clientX, y: e.clientY },
  }));
});

const cursors = new Map(); // userId -> element
ws.on('presence.cursor', ({ user_id, color, x, y }) => {
  let el = cursors.get(user_id);
  if (!el) {
    el = document.createElement('div');
    el.className = 'live-cursor';
    el.style.background = color;
    el.style.position = 'fixed';
    el.style.transition = 'transform 50ms linear';
    document.body.appendChild(el);
    cursors.set(user_id, el);
  }
  el.style.transform = `translate(${x}px, ${y}px)`;
});

External links

Figma: Figma 의 multiplayer 기술 작동 원리

Exercise

다른 user 두 브라우저 탭으로 live cursor 짜. 20Hz throttle. CSS transition 추가. 마우스 움직이고; 다른 탭 cursor 가 50ms 미만 latency 로 따라옴 확인. Throttle 5Hz 로 떨어뜨려; transition 켠 채로 시각적 차이 알 수 있어?

Progress

Progress is local-only — sign in to sync across devices.

← PreviousMultiplayer Game State Next →Hybrid Architecture

이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

🔔 답글 알림 (로그인 필요)

로그인 — 댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.