Add index.html

2026-03-30 17:27:21 +00:00
parent 5bf9511f89
commit d3fe3ac5aa
1 changed files with 78 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,78 @@
+<!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>