295 lines
11 KiB
HTML
295 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>IoT — приём телеметрии устройств (Nubes)</title>
|
||
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
|
||
<style>
|
||
:root {
|
||
--brand-primary: #2563eb;
|
||
--brand-primary-dark: #1d4ed8;
|
||
--brand-gray: #d1d5db;
|
||
--brand-grey-light: #f3f4f6;
|
||
--text-primary: #1a1a1a;
|
||
--text-muted: #6b7280;
|
||
--success: #16a34a;
|
||
--warning: #d97706;
|
||
}
|
||
* { box-sizing: border-box; }
|
||
body {
|
||
margin: 0;
|
||
font-family: system-ui, "Segoe UI", Roboto, sans-serif;
|
||
font-size: 14px;
|
||
color: var(--text-primary);
|
||
background: #fafafa;
|
||
line-height: 1.5;
|
||
}
|
||
.topbar {
|
||
height: 56px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 0 16px;
|
||
background: #fff;
|
||
border-bottom: 1px solid var(--brand-gray);
|
||
position: sticky;
|
||
top: 0;
|
||
}
|
||
.topbar .brand { font-weight: 600; color: var(--text-primary); }
|
||
.topbar .muted { color: var(--text-muted); }
|
||
.topbar .spacer { flex: 1; }
|
||
.chip {
|
||
font-family: ui-monospace, monospace;
|
||
font-size: 12px;
|
||
color: var(--brand-primary);
|
||
background: #eff6ff;
|
||
border: 1px solid #bfdbfe;
|
||
border-radius: 999px;
|
||
padding: 2px 10px;
|
||
}
|
||
.container { max-width: 880px; margin: 0 auto; padding: 24px 16px 48px; }
|
||
.hero { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
|
||
.hero h1 { font-size: 24px; margin: 0; letter-spacing: -0.3px; }
|
||
.hero .sub { color: var(--text-muted); margin: 4px 0 0; }
|
||
.badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: var(--warning);
|
||
background: #fffbeb;
|
||
border: 1px solid #fde68a;
|
||
border-radius: 999px;
|
||
padding: 2px 10px;
|
||
margin-left: 8px;
|
||
}
|
||
.card {
|
||
background: #fff;
|
||
border: 1px solid var(--brand-gray);
|
||
border-radius: 12px;
|
||
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
|
||
margin-bottom: 20px;
|
||
overflow: hidden;
|
||
}
|
||
.card-header {
|
||
background: var(--brand-grey-light);
|
||
padding: 12px;
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
}
|
||
.card-body { padding: 12px; }
|
||
.card-body > p:first-child { margin-top: 0; }
|
||
.card-body > p:last-child { margin-bottom: 0; }
|
||
.kv { display: grid; grid-template-columns: 200px 1fr; gap: 8px 16px; }
|
||
.kv .k { color: var(--text-muted); }
|
||
.kv .v { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; word-break: break-all; }
|
||
a { color: var(--brand-primary); text-decoration: none; }
|
||
a:hover { color: var(--brand-primary-dark); text-decoration: underline; }
|
||
pre {
|
||
background: var(--brand-grey-light);
|
||
border: 1px solid var(--brand-gray);
|
||
border-radius: 8px;
|
||
padding: 12px;
|
||
overflow-x: auto;
|
||
font-family: ui-monospace, Menlo, Consolas, monospace;
|
||
font-size: 12.5px;
|
||
line-height: 1.6;
|
||
margin: 8px 0 0;
|
||
}
|
||
pre code { background: none; border: none; padding: 0; }
|
||
.status-ok { color: var(--success); font-weight: 600; }
|
||
.footer { color: var(--text-muted); font-size: 12px; text-align: center; margin-top: 32px; }
|
||
.step { display: flex; gap: 14px; margin-bottom: 18px; }
|
||
.step:last-child { margin-bottom: 0; }
|
||
.step-num {
|
||
flex: 0 0 30px;
|
||
height: 30px;
|
||
border-radius: 999px;
|
||
background: var(--brand-primary);
|
||
color: #fff;
|
||
font-weight: 700;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 15px;
|
||
}
|
||
.step-body { flex: 1; }
|
||
.step-title { font-weight: 600; font-size: 15px; margin-bottom: 2px; }
|
||
.step-body p { color: #374151; margin: 4px 0; }
|
||
.btn-hero {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
background: var(--brand-primary);
|
||
color: #fff !important;
|
||
text-decoration: none !important;
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
padding: 10px 20px;
|
||
border-radius: 8px;
|
||
margin-top: 8px;
|
||
}
|
||
.btn-hero:hover { background: var(--brand-primary-dark); }
|
||
.hint-box {
|
||
font-size: 14px;
|
||
color: #374151;
|
||
background: var(--brand-grey-light);
|
||
border: 1px solid var(--brand-gray);
|
||
border-radius: 8px;
|
||
padding: 10px 14px;
|
||
margin-top: 10px;
|
||
line-height: 1.7;
|
||
}
|
||
.hint-box code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="topbar">
|
||
<img src="/static/logo.svg" height="18" alt="nubes">
|
||
<span class="brand">Nubes</span>
|
||
<span class="muted">· IoT</span>
|
||
<span class="spacer"></span>
|
||
<span class="chip">{{VERSION}}</span>
|
||
</div>
|
||
|
||
<div class="container">
|
||
|
||
<div class="hero">
|
||
<img src="/static/logo.svg" height="28" alt="nubes">
|
||
<div>
|
||
<h1>IoT <span class="badge">тестирование</span></h1>
|
||
<p class="sub">Приём и хранение телеметрии устройств: MQTT → шина SQS →
|
||
PostgreSQL → REST API и консоль. Устройства изолированы по namespace,
|
||
каждому namespace — отдельная база данных.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">Что это и зачем</div>
|
||
<div class="card-body">
|
||
<p>Платформа принимает телеметрию от устройств по протоколу MQTT
|
||
(WebSocket с TLS) и доставляет её в базу данных по цепочке:</p>
|
||
<p style="color:#374151">
|
||
устройство → <code>wss://…/mqtt</code> (EMQX) → очередь
|
||
<code>iot-telemetry</code> (shared-sqs) → потребитель → PostgreSQL →
|
||
REST API / консоль.
|
||
</p>
|
||
<p style="color:#374151">
|
||
Устройства регистрируются через REST API и получают собственный
|
||
пароль. Каждое устройство публикует только в свой топик
|
||
<code>{namespace}/telemetry/{device_id}</code> — чужие топики
|
||
отклоняются брокером.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">Порядок действий — 3 шага</div>
|
||
<div class="card-body">
|
||
|
||
<div class="step">
|
||
<div class="step-num">1</div>
|
||
<div class="step-body">
|
||
<div class="step-title">Регистрация устройства</div>
|
||
<p>Устройство создаётся через REST API с Bearer-JWT (структура
|
||
<code>sub</code> + <code>exp</code>). В ответе — <code>mqtt_username</code>;
|
||
пароль возвращается только запросом GET по имени устройства.</p>
|
||
<div class="hint-box">
|
||
<code>TOKEN="…jwt…"</code><br>
|
||
<code>curl -X POST -H "Authorization: Bearer $TOKEN" \
|
||
-H "Content-Type: application/json" \
|
||
-d '{"name":"dev1","device_id":"dev-001"}' \
|
||
https://iot.containerk8s.dev.nubes.ru/v1/namespaces/test/iot/devices</code><br>
|
||
<code>curl -H "Authorization: Bearer $TOKEN" \
|
||
https://iot.containerk8s.dev.nubes.ru/v1/namespaces/test/iot/devices/dev1</code>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<div class="step-num">2</div>
|
||
<div class="step-body">
|
||
<div class="step-title">Подключение устройства к MQTT</div>
|
||
<p>Endpoint <code>wss://exqx.containerk8s.dev.nubes.ru/mqtt</code>,
|
||
подпротокол WebSocket — <code>mqtt</code>; username
|
||
<code>{namespace}_{device_id}</code>, пароль из шага 1; публикация в
|
||
топик <code>{namespace}/telemetry/{device_id}</code>.</p>
|
||
<div class="hint-box">
|
||
<code>import paho.mqtt.client as mqtt</code><br>
|
||
<code>c = mqtt.Client(transport="websockets")</code><br>
|
||
<code>c.ws_set_options(path="/mqtt")</code><br>
|
||
<code>c.username_pw_set("test_dev-001", "<пароль>")</code><br>
|
||
<code>c.connect("exqx.containerk8s.dev.nubes.ru", 443)</code><br>
|
||
<code>c.publish("test/telemetry/dev-001", '{"temp":23.5}')</code>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<div class="step-num">3</div>
|
||
<div class="step-body">
|
||
<div class="step-title">Чтение телеметрии</div>
|
||
<p>История сообщений — REST API (Bearer-JWT):</p>
|
||
<div class="hint-box">
|
||
<code>curl -H "Authorization: Bearer $TOKEN" \
|
||
"https://iot.containerk8s.dev.nubes.ru/v1/namespaces/test/iot/telemetry?limit=50"</code>
|
||
</div>
|
||
<a class="btn-hero" href="/console">Открыть консоль →</a>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">Подключение</div>
|
||
<div class="card-body kv">
|
||
<div class="k">MQTT endpoint</div>
|
||
<div class="v">wss://exqx.containerk8s.dev.nubes.ru/mqtt</div>
|
||
<div class="k">Протокол</div>
|
||
<div class="v">MQTT 3.1.1 / 5.0 over WebSocket (subprotocol <code>mqtt</code>), TLS</div>
|
||
<div class="k">REST API</div>
|
||
<div class="v">https://iot.containerk8s.dev.nubes.ru</div>
|
||
<div class="k">Аутентификация MQTT</div>
|
||
<div class="v">username <code>{namespace}_{device_id}</code> + пароль из API</div>
|
||
<div class="k">Аутентификация REST</div>
|
||
<div class="v">Bearer JWT (<code>sub</code>, <code>exp</code>)</div>
|
||
<div class="k">Топик устройства</div>
|
||
<div class="v">{namespace}/telemetry/{device_id}</div>
|
||
<div class="k">Консоль</div>
|
||
<div class="v"><a href="/console">/console</a> — устройства, эмулятор, телеметрия</div>
|
||
<div class="k">Админ-статистика</div>
|
||
<div class="v"><a href="/iot-admin">/iot-admin</a> (токен ADMIN_STATS_TOKEN)</div>
|
||
<div class="k">Health</div>
|
||
<div class="v"><a href="/health">GET /health</a> <span class="status-ok">● ok</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">MQTT endpoint (exqx)</div>
|
||
<div class="card-body">
|
||
<p style="color:#374151">
|
||
<code>https://exqx.containerk8s.dev.nubes.ru</code> — это MQTT-брокер
|
||
(EMQX), а не веб-страница. Точка подключения — только
|
||
<code>/mqtt</code> через WebSocket. Открытие этого адреса в браузере
|
||
или HTTP-запрос вернёт <code>400</code> — это штатное поведение
|
||
(нет WebSocket-подпротокола <code>mqtt</code>).
|
||
</p>
|
||
<p style="color:#374151">
|
||
Ограничения: размер сообщения — до ~250 КБ (лимит SQS 256 КБ);
|
||
платформа может разрывать внешние WebSocket-соединения примерно раз
|
||
в 150 секунд — устройства должны автоматически переподключаться
|
||
(для QoS 1 повторы выполняются клиентом).
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer">iot-service · realm iot-naeel · версия {{VERSION}} · <a href="/console">консоль</a> · <a href="/iot-admin">админ</a> · <a href="/health">health</a></div>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|