http://luntegg.ru/projects/leaflet/
Сервер с заданной частотой генерирует пакеты данных: пакет текущей локации устройства и пакет текущего статуса устройства. Клиент получает вышеописанные пакеты и обрабатывает их - отображает данные на карте, а также имеет возможность отображать данные в панели в левой части экрана. Устройства на карте необходимо отображать в виде маркеров + попап, всплывающий по клику на маркере и содержащий координаты устройства, его mac-адрес и статус online/offline. В боковой панели фигурирует список устройств, каждый элемент списка содержит координаты устройства, mac и статус.
Серверная часть приложения прилагается - index.js. Необходимо реализовать клиентскую часть.
Количество устройств: 20000 Частота генерации пакета локации: 500мс Частота генерации пакета статуса: 1с
Пакеты данных каждый раз отправляются не для всех устройств, а для рандомного количества.
Формат пакета локации:
{ mac:DEVICE_MAC,
type:'location',
ts:timestamp,
location:{lon:LON,lat:LAT,alt:ALT}
}
Формат пакета статуса:
{ mac:DEVICE_MAC,
type:'status',
ts:timestamp,
status:{isOnline:boolean,name:RANDOM_NAME}
}
- В качестве библиотеки для карты необходимо использовать Leaflet
- Сервер и клиент обмениваются данными посредством вебсокета
- При подключении клиента к вебсокету сервера необходимо выслать ответ серверу с имененем 'start'
- Используйте кластеризацию маркеров
- Данные устройства в попапах и боковой панели обновляются в режиме реального времени
- Рекомендуем использовать пагинацию в боковом меню
- По желанию можно использовать любые библиотеки и фреймворки
- При необходимости количество устройств и частоту отсылки пакетов можно изменять в серверном файле index.js