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>