udp-websocket

Realtime-визуализация телеметрии: UDP → Node.js → WebSocket → React.

Сервер принимает сырые UDP-пакеты, парсит их в int32, буферизует и рассылает клиентам по WebSocket. Клиент рисует два канала на CanvasJS-графиках (2.4 ГГц / 433 МГц).

Архитектура

┌────────────┐   UDP :50004   ┌─────────────────────┐   WS :9000   ┌──────────────┐
│  Источник  │ ─────────────► │  Node.js server     │ ───────────► │  React UI    │
│  телеметрии│                │  parse + buffer×10  │              │  CanvasJS    │
└────────────┘                │  Express :3000      │              └──────────────┘
                              └─────────────────────┘

1. UDP-сокет слушает порт 50004
2. Байты пакета → массив int32 little-endian (byteArrayToIntArray)
3. Точки {x: Date, y: value} копятся в двух буферах по 10 штук
4. Батч уходит всем WebSocket-клиентам на порту 9000
5. React-клиент сдвигает y на +120 и рисует stepArea-чарты

Структура

udp-websocket/
├── server/                 # Node.js (Express + dgram + ws)
│   ├── index.js            # точка входа
│   ├── build/              # собранный CRA-клиент (статика на :3000)
│   └── src/
│       ├── socket/         # UDP-контроллер + буферы
│       ├── web-socket/     # WebSocket server
│       ├── service/        # более ранние варианты контроллеров
│       └── tools/          # byteArrayToIntArray
├── client-vite/            # React-клиент на Vite (рекомендуется)
├── client-cra/             # React-клиент на Create React App
└── README.md

Порты

Сервис	Порт	Назначение
UDP	50004	вход сырой телеметрии
WebSocket	9000	стрим точек на клиент
Express	3000	раздача статики server/build
Vite dev	5173	client-vite в режиме разработки
CRA dev	3000*	client-cra (npm start)

*CRA по умолчанию тоже занимает 3000 — при локальной разработке клиента лучше использовать Vite.

Формат данных

UDP-пакет: последовательность 4-байтных little-endian int32.

Из пакета берутся как минимум два значения:

• data[0] → канал 2.4 ГГц
• data[1] → канал 433 МГц

WebSocket-сообщение (JSON):

[
  [{ "x": "2024-01-01T12:00:00.000Z", "y": -45 }, ...],
  [{ "x": "2024-01-01T12:00:00.000Z", "y": -60 }, ...]
]

На клиенте: y_display = 120 + y (диапазон оси ≈ −110…−20 дБм).

Быстрый старт

1. Сервер

git clone https://github.com/fancyman00/udp-websocket.git
cd udp-websocket/server
npm install
npm start

Ожидаемый вывод:

• Udp server listening 0.0.0.0:50004
• WS server running at 0.0.0.0: 9000
• Express на http://localhost:3000 (статика из build/)

2. Клиент (Vite)

cd ../client-vite
npm install
npm run dev

Откройте URL Vite (обычно http://localhost:5173). Клиент подключается к ws://localhost:9000.

3. Клиент (CRA) — альтернатива

cd ../client-cra
npm install
npm start

После npm run build в CRA можно скопировать build/ в server/build/, чтобы Express раздавал UI с порта 3000.

4. Проверка без железа

Отправьте тестовый UDP-пакет (два int32 LE), например через Python:

import socket, struct
sock = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
# y1=-45, y2=-60
payload = struct.pack("<ii", -45, -60)
for _ in range(10):  # буфер на сервере = 10 точек
    sock.sendto(payload, ("127.0.0.1", 50004))

После 10 пакетов клиент должен получить батч и обновить графики.

Стек

• Server: Node.js (ESM), Express, dgram, ws
• Client: React 18, CanvasJS (@canvasjs/react-charts)
• Сборки клиента: Vite или Create React App

Статус

Учебный / демо-проект для realtime-телеметрии:

• порты и WS URL захардкожены
• в client-vite у второго графика в setRef ошибочно пишется в ref1 (в client-cra исправлено на ref2)
• в server/src/service/ лежат упрощённые дубликаты контроллеров — рабочий путь идёт через src/socket и src/web-socket

Лицензия

ISC (как в server/package.json)