dane ze strony html do servera UDP przykład
Kluczowe punkty
• Bezpieczeństwo sandboxu przeglądarki ogranicza dostęp do gniazd UDP.
• UDP jest bezpołączeniowy; brak gwarancji dostarczenia – ewentualne potwierdzenia aplikacyjne.
• Alternatywy: WebRTC DataChannel, Electron/Socket Supply (Node dgram w runtime desktopowym).
[HTML/JS] --HTTP POST--> [Bridge HTTP Server (Node.js/Python)] --UDP--> [Docelowy serwer UDP]fetch() z JSON-em. dgram.send(). recvfrom / message loguje lub przetwarza dane.index.html):<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>HTML → UDP</title>
</head>
<body>
<input id="msg" value="Hello UDP">
<button onclick="send()">Wyślij</button>
<script>
async function send() {
const payload = { message: document.getElementById('msg').value };
const r = await fetch('/api/udp/send', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(payload)
});
console.log(await r.text());
}
</script>
</body>
</html>bridge.js):const express = require('express');
const dgram = require('dgram');
const app = express();
app.use(express.json());
const UDP_HOST = '127.0.0.1';
const UDP_PORT = 41234;
app.post('/api/udp/send', (req, res) => {
const { message } = req.body || {};
if (!message) return res.status(400).send('Brak pola message');
const sock = dgram.createSocket('udp4');
sock.send(Buffer.from(message), UDP_PORT, UDP_HOST, err => {
sock.close();
if (err) return res.status(500).send('Błąd UDP: ' + err.message);
res.send('Datagram wysłany');
});
});
app.listen(8080, () => console.log('HTTP bridge listening on :8080'));udp_server.js):const dgram = require('dgram');
const srv = dgram.createSocket('udp4');
srv.on('message', (msg, rinfo) => {
console.log(`UDP od ${rinfo.address}:${rinfo.port} -> ${msg}`);
});
srv.bind(41234, () => console.log('UDP server on :41234'));Uruchom:
node udp_server.js
node bridge.js
# otwórz index.html przez http://localhost:8080/• Sandbox JS blokuje raw sockets → brak API UDP; HTTP/HTTPS (TCP) i WebSocket (TCP) pozostają dostępne.
• UDP: brak retransmisji, brak kolejności, 65 507 B maks. ładunku (IPv4).
• Bridge działa w warstwie aplikacji, dlatego można tam dodać ACK, szyfrowanie, bufory, rate-limit.
• Sterowanie urządzeniami IoT akceptującymi UDP (np. ESP-Now, CoAP, własne protokoły).
• Transmisja danych telemetrycznych o niskich opóźnieniach wewnątrz sieci LAN.
• Wysyłanie logów w syslog/Graylog (UDP 514) z panelu WWW administratora.
• WebTransport (draft IETF) – niskopoziomowe datagramy QUIC (UDP) dostępne w Chrome 118+ w Origin Trial; potencjalnie pozwoli na „pół-raw” UDP z przeglądarki bez pośrednika.
• WebRTC DataChannel – stabilne, bazuje na SCTP/UDP, używane w grach i VoIP; wymaga sygnalizacji.
• Frameworki desktopowe (Electron 26, Tauri 2.0) dają dostęp do dgram Node API w pakietach cross-platform.
• Edge-computing: Cloudflare Workers oraz Fastly Compute@Edge dodają dgram-like UDP na serwerze brzegowym; zmniejsza to RTT przy komunikacji urządzeń IoT.
• CORS: jeśli HTML jest serwowany z innego hosta niż bridge, nagłówki Access-Control-Allow-Origin muszą być ustawione.
• Walidacja: np. Joi (Node) albo Pydantic (Python) do schematycznej walidacji JSON-a.
• Bufory binarne: dla wydajności można packować dane Buffer.alloc / DataView z kolejnością bajtów little-endian.
• UDP flood: brak kontroli w przeglądarce chroni użytkowników przed nieświadomym DDoS-em – nie omijaj tego ograniczenia.
• RODO/GDPR: jeśli przechowujesz dane osobowe w datagramach, zadbaj o szyfrowanie oraz politykę retencji.
• Porty >1024: unikaj wysyłania na porty uprzywilejowane bez zgody administratora sieci.
• Testuj lokalnie na 127.0.0.1, potem na LAN; sprawdź firewall (Windows Defender → zezwól na UDP).
• Dodaj ponowienia (setTimeout + licznik), bo UDP może zgubić pakiet.
• Stosuj MTU ≤1200 B jeśli datagramy mogą przechodzić przez VPN/QUIC NAT.
• WebTransport jeszcze niestabilny; wymaga QUIC-capable backendu.
• WebRTC setup (ICE/STUN/TURN) generuje dodatkową złożoność i ruch sygnalizacyjny TCP lub TLS.
• UDP przez Internet może być blokowany przez operatorów komórkowych/NAT-symmetric.
• Śledź specyfikację WebTransport (W3C + IETF) i implementacje w Chromium.
• Porównaj CoAP (UDP) vs. MQTT (TCP) pod kątem narzutu i niezawodności.
• Zbadaj QUIC Datagram Extensions jako alternatywę dla klasycznego UDP.
Przeglądarka sama nie wyśle UDP; wykorzystujemy most HTTP/WebSocket → UDP. Pokazany kod (HTML + Express + dgram) ilustruje pełny przepływ danych. Trendy wskazują na pojawienie się natywnych datagramów (WebTransport), jednak w 2024 r. w produkcji nadal dominuje rozwiązanie z serwerem pośredniczącym.