Живые курсоры посетителей в реальном времени
Мультиплеерные курсоры на портфолио-сайте. WebSocket через Nitro, SVG-аватары через свой API, рандомные никнеймы и интерактивный онлайн-бар.
Задача
Портфолио - статичная страница, посетитель один. Хотелось добавить ощущение присутствия - чтобы люди видели друг друга на сайте. Решение должно быть легковесным, без внешних сервисов, на том же стеке что и сайт.
Технические подробности
Решение
Поднял WebSocket-сервер прямо в Nitro через defineWebSocketHandler - ничего дополнительного. Каждый посетитель получает рандомный ник, цвет и SVG-аватарку через @nextorders/avatar на эндпоинте /api/avatar/[seed]. Позиции курсоров через WebSocket с throttling 50мс. Курсоры фильтруются по странице - видишь только тех, кто на той же. Онлайн-бар внизу показывает аватарки всех посетителей.
Результат
Сайт ощущается живым - видишь курсоры других посетителей с аватарками и именами. Автоматический реконнект при обрыве. Решение полностью автономное - встроенный WebSocket Nitro, никаких внешних зависимостей.