Реалізація Cursor Presence (курсорів користувачів) на сайті
Уявіть: десять редакторів правлять один документ, а курсори інших учасників смикаються, зникають або накладаються один на одного. Типова картина в проектах без грамотної реалізації. Cursor presence — відображення курсорів і виділень у реальному часі — здається простим завданням, але підводних каменів вистачає: ефективна передача координат, плавна анімація, коректний маппінг при скролі та відключенні. Без оптимізації трафік може досягати 10 000 повідомлень на секунду при 50 користувачах, що критично для мобільних мереж і збільшує витрати на сервер. Ми — команда з п'ятирічним досвідом у real-time колаборації — впровадили cursor presence для 30+ проектів (редактори, дошки, чати). Пропонуємо готове рішення під ключ: за 1–2 дні ми вбудуємо присутність користувачів з оптимізацією трафіку та гарантованою плавністю. Зв'яжіться з нами, щоб отримати консультацію та демо.
Throttle та його вплив на трафік
Подія mousemove генерує 50–100 кадрів на секунду. Якщо відправляти кожну на сервер, при 10 користувачах трафік досягає тисяч повідомлень на секунду. Оптимальне обмеження — 30 fps (33 мс). Використовуйте throttle-функцію — наприклад, з lodash-es:
import { throttle } from 'lodash-es';
const sendCursor = throttle((x: number, y: number) => {
socket.emit('cursor:move', { x, y });
}, 33);
document.addEventListener('mousemove', (e) => {
sendCursor(e.clientX, e.clientY);
});
document.addEventListener('mouseleave', () => {
socket.emit('cursor:leave');
});
На сервері (Socket.IO) — broadcast в кімнату, виключаючи відправника:
socket.on('cursor:move', (data: { x: number; y: number }) => {
socket.to(roomId).emit('cursor:update', {
userId: socket.data.userId,
...data,
});
});
socket.on('cursor:leave', () => {
socket.to(roomId).emit('cursor:remove', {
userId: socket.data.userId,
});
});
socket.on('disconnect', () => {
socket.to(roomId).emit('cursor:remove', {
userId: socket.data.userId,
});
});
Економія трафіку при 30 fps замість 60 становить до 50% — це критично для мобільних мереж.
Розрахунок економії трафіку
При 50 повідомленнях на секунду на користувача та 10 користувачах, трафік становить 500 повідомлень/с. Throttle до 30 fps знижує до 300 повідомлень/с. Економія 40% — значна економія ресурсів.Чому lerp-інтерполяція обов'язкова?
Пряме оновлення позиції за кожною подією викликає ривки. CSS-перехід transition: transform 0.1s linear створює затримку у зворотний бік. Єдино правильне рішення — linear interpolation (lerp) у requestAnimationFrame:
interface RemoteCursor {
userId: string;
name: string;
color: string;
current: { x: number; y: number };
target: { x: number; y: number };
el: HTMLElement;
}
const cursors = new Map<string, RemoteCursor>();
function lerp(a: number, b: number, t: number) {
return a + (b - a) * t;
}
function animateCursors() {
cursors.forEach((cursor) => {
cursor.current.x = lerp(cursor.current.x, cursor.target.x, 0.35);
cursor.current.y = lerp(cursor.current.y, cursor.target.y, 0.35);
cursor.el.style.transform =
`translate(${cursor.current.x}px, ${cursor.current.y}px)`;
});
requestAnimationFrame(animateCursors);
}
animateCursors();
// При отриманні оновлення — тільки змінюємо target
socket.on('cursor:update', ({ userId, x, y, name, color }) => {
if (!cursors.has(userId)) {
const el = createCursorElement(userId, name, color);
document.body.appendChild(el);
cursors.set(userId, {
userId, name, color,
current: { x, y },
target: { x, y },
el,
});
} else {
cursors.get(userId)!.target = { x, y };
}
});
Коефіцієнт інтерполяції 0.35 дає плавний рух без помітної затримки.
Порівняння підходів: WebSocket vs Yjs Awareness
| Критерій | Чистий WebSocket | Yjs Awareness |
|---|---|---|
| Час впровадження | 1–2 дні з нуля | Півдня, якщо Yjs вже використовується |
| Навантаження на сервер | Вище (своя логіка broadcast) | Нижче (вбудований broadcast) |
| Складність розширення | Середня (додавання полів вручну) | Низька (автоматичний стан) |
| Підтримка виділення тексту | Вимагає додаткової логіки | Вбудована через Awareness |
Yjs Awareness впроваджується в 3 рази швидше, ніж чистий WebSocket, якщо Yjs вже використовується. Стандарт WebSocket (див. RFC 6455) визначає протокол двостороннього зв'язку.
Як вибрати між WebSocket та Yjs Awareness?
Якщо в проекті вже використовується Yjs — використовуйте Awareness: він автоматично синхронізує стан курсорів, виділення тексту та інші поля. В іншому випадку достатньо чистого WebSocket. Для довідки: WebSocket — стандартний протокол, а Yjs — CRDT-бібліотека для спільного редагування.
Процес роботи
- Аналітика — визначаємо сценарії використання, навантаження, поточний стек.
- Проектування — вибираємо протокол (WebSocket або Yjs), проектуємо модель даних.
- Реалізація — пишемо клієнт-серверну частину, підключаємо throttle, lerp, TTL.
- Тестування — перевіряємо при 50+ одночасних користувачах, заміряємо трафік.
- Деплой та підтримка — розгортаємо на вашому хостингу, даємо гарантію 30 днів.
Що робити, якщо курсори зникають при скролі?
Зберігайте координати відносно документа (clientX + scrollOffset), а при рендері віднімайте поточний scroll. Інакше чужі курсори будуть зміщуватися при прокручуванні.
document.addEventListener('mousemove', throttle((e) => {
provider.awareness.setLocalStateField('cursor', {
x: e.clientX + window.scrollX,
y: e.clientY + window.scrollY,
});
}, 33));
function getCursorViewportPos(docX: number, docY: number) {
return {
x: docX - window.scrollX,
y: docY - window.scrollY,
};
}
TTL та очищення завислих курсорів
Якщо користувач закрив вкладку без явного disconnect, курсор залишається на екрані. Рішення — heartbeat + TTL на клієнті:
const CURSOR_TTL = 5000; // 5 секунд без оновлень
const lastSeen = new Map<string, number>();
socket.on('cursor:update', ({ userId, ...pos }) => {
lastSeen.set(userId, Date.now());
updateCursor(userId, pos);
});
setInterval(() => {
const now = Date.now();
lastSeen.forEach((ts, userId) => {
if (now - ts > CURSOR_TTL) {
removeCursor(userId);
lastSeen.delete(userId);
}
});
}, 1000);
Порівняння варіантів throttle
| Частота (fps) | Трафік на 10 користувачів (повідомлень/сек) | Плавність |
|---|---|---|
| 60 | 600 | Ідеальна |
| 30 | 300 | Достатня |
| 15 | 150 | Помітні ривки |
Для більшості завдань 30 fps — оптимальний баланс.
Що входить у роботу?
При замовленні реалізації cursor presence ви отримуєте:
- Архітектуру передачі даних (WebSocket або Yjs)
- Клієнтський код з throttle та lerp-інтерполяцією
- Обробку координат (document-relative, scroll)
- TTL-механізм для видалення «завислих» курсорів
- Інтеграцію з існуючою системою (редактор, чат тощо)
- Документацію та навчання команди
Реалізація cursor presence з нуля займає 1–2 дні. Якщо вже використовується Yjs або Socket.IO — півдня. Зв'яжіться з нами для консультації: оцінимо ваш проект і запропонуємо оптимальне рішення. За п'ять років ми виконали понад 30 інтеграцій — ваш проект буде в надійних руках. Замовте реалізацію сьогодні та отримайте безкоштовне тестування.