78 lines
3.0 KiB
HTML
78 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Pion WebTransport Тест</title>
|
||
<style>
|
||
body { font-family: sans-serif; padding: 20px; text-align: center; }
|
||
#status { font-weight: bold; margin: 20px 0; }
|
||
input, button { padding: 10px; font-size: 16px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>Отправка данных по WebTransport</h1>
|
||
<p>Домен: wt.shaiheprjct.ru</p>
|
||
|
||
<div id="status">Статус: Подключение...</div>
|
||
|
||
<input type="text" id="message" placeholder="Введите сообщение" value="Hello from robot!">
|
||
<button onclick="sendData()" id="sendBtn" disabled>Отправить (Datagram)</button>
|
||
|
||
<script>
|
||
const statusEl = document.getElementById('status');
|
||
const sendBtn = document.getElementById('sendBtn');
|
||
const messageEl = document.getElementById('message');
|
||
let transport;
|
||
|
||
// Адрес должен быть wss:// (WebTransport использует HTTPS, но в JS URL начинается с wt://)
|
||
// НО: WebTransport API требует URL, начинающийся с 'https://'
|
||
const url = 'https://wt.shaiheprjct.ru/wt';
|
||
|
||
async function connect() {
|
||
try {
|
||
// Инициализация WebTransport
|
||
transport = new WebTransport(url);
|
||
statusEl.innerText = 'Статус: Подключение к QUIC...';
|
||
|
||
// Ждем готовности
|
||
await transport.ready;
|
||
statusEl.innerText = 'Статус: Подключено (WebTransport/h3)';
|
||
statusEl.style.color = 'green';
|
||
sendBtn.disabled = false;
|
||
|
||
// Обработка закрытия
|
||
transport.closed.then(() => {
|
||
statusEl.innerText = 'Статус: Соединение закрыто';
|
||
statusEl.style.color = 'red';
|
||
sendBtn.disabled = true;
|
||
});
|
||
|
||
} catch (e) {
|
||
statusEl.innerText = `Ошибка подключения: ${e}`;
|
||
statusEl.style.color = 'red';
|
||
console.error(e);
|
||
}
|
||
}
|
||
|
||
async function sendData() {
|
||
if (!transport) return;
|
||
const message = messageEl.value;
|
||
const encoder = new TextEncoder();
|
||
const data = encoder.encode(message);
|
||
|
||
try {
|
||
// Отправка датаграммы (самый быстрый способ)
|
||
const writer = transport.datagrams.writable.getWriter();
|
||
await writer.write(data);
|
||
writer.releaseLock();
|
||
console.log('Данные отправлены:', message);
|
||
} catch (e) {
|
||
console.error('Ошибка отправки:', e);
|
||
}
|
||
}
|
||
|
||
// Начинаем подключение при загрузке
|
||
connect();
|
||
</script>
|
||
</body>
|
||
</html> |