sasha
3e90269b0b
- Клиентская часть Vue 3 + Vite - Серверная часть Node.js + WebSocket - Система авторизации и смен - Управление игровыми портами - Поддержка тем (светлая/темная) - Адаптивный дизайн 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
179 lines
7.0 KiB
HTML
179 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Тест доступа к серверу</title>
|
||
<style>
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
background-color: #f5f5f5;
|
||
}
|
||
.container {
|
||
background: white;
|
||
padding: 30px;
|
||
border-radius: 10px;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
}
|
||
.status {
|
||
padding: 10px;
|
||
border-radius: 5px;
|
||
margin: 10px 0;
|
||
}
|
||
.success { background-color: #d4edda; color: #155724; }
|
||
.error { background-color: #f8d7da; color: #721c24; }
|
||
.info { background-color: #d1ecf1; color: #0c5460; }
|
||
button {
|
||
background: #007bff;
|
||
color: white;
|
||
border: none;
|
||
padding: 10px 20px;
|
||
border-radius: 5px;
|
||
cursor: pointer;
|
||
margin: 5px;
|
||
}
|
||
button:hover { background: #0056b3; }
|
||
.test-section {
|
||
margin: 20px 0;
|
||
padding: 15px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 5px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>🌐 Тест доступа к серверу TIR</h1>
|
||
|
||
<div class="status info">
|
||
<strong>IP адрес сервера:</strong> 192.168.33.97<br>
|
||
<strong>HTTP порт:</strong> 5000<br>
|
||
<strong>WebSocket порт:</strong> 9000
|
||
</div>
|
||
|
||
<div class="test-section">
|
||
<h3>📡 Тест HTTP соединения</h3>
|
||
<button onclick="testHTTP()">Проверить HTTP</button>
|
||
<div id="http-result"></div>
|
||
</div>
|
||
|
||
<div class="test-section">
|
||
<h3>🔌 Тест WebSocket соединения</h3>
|
||
<button onclick="testWebSocket()">Проверить WebSocket</button>
|
||
<div id="ws-result"></div>
|
||
</div>
|
||
|
||
<div class="test-section">
|
||
<h3>🔐 Тест авторизации</h3>
|
||
<button onclick="testAuth()">Проверить авторизацию</button>
|
||
<div id="auth-result"></div>
|
||
</div>
|
||
|
||
<div class="test-section">
|
||
<h3>📊 Информация о клиенте</h3>
|
||
<div id="client-info"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// Отображаем информацию о клиенте
|
||
document.getElementById('client-info').innerHTML = `
|
||
<strong>User Agent:</strong> ${navigator.userAgent}<br>
|
||
<strong>URL:</strong> ${window.location.href}<br>
|
||
<strong>Hostname:</strong> ${window.location.hostname}<br>
|
||
<strong>Port:</strong> ${window.location.port}<br>
|
||
<strong>Protocol:</strong> ${window.location.protocol}
|
||
`;
|
||
|
||
async function testHTTP() {
|
||
const resultDiv = document.getElementById('http-result');
|
||
resultDiv.innerHTML = '<div class="status info">Проверяем HTTP соединение...</div>';
|
||
|
||
try {
|
||
const response = await fetch('/api/auth', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({
|
||
phone: 'test',
|
||
password: 'test'
|
||
})
|
||
});
|
||
|
||
if (response.ok) {
|
||
resultDiv.innerHTML = '<div class="status success">✅ HTTP соединение работает!</div>';
|
||
} else {
|
||
resultDiv.innerHTML = `<div class="status error">❌ HTTP ошибка: ${response.status} ${response.statusText}</div>`;
|
||
}
|
||
} catch (error) {
|
||
resultDiv.innerHTML = `<div class="status error">❌ HTTP ошибка: ${error.message}</div>`;
|
||
}
|
||
}
|
||
|
||
function testWebSocket() {
|
||
const resultDiv = document.getElementById('ws-result');
|
||
resultDiv.innerHTML = '<div class="status info">Проверяем WebSocket соединение...</div>';
|
||
|
||
try {
|
||
const ws = new WebSocket(`ws://${window.location.hostname}:9000`);
|
||
|
||
ws.onopen = function() {
|
||
resultDiv.innerHTML = '<div class="status success">✅ WebSocket соединение установлено!</div>';
|
||
ws.close();
|
||
};
|
||
|
||
ws.onerror = function(error) {
|
||
resultDiv.innerHTML = `<div class="status error">❌ WebSocket ошибка: ${error.message}</div>`;
|
||
};
|
||
|
||
ws.onclose = function() {
|
||
console.log('WebSocket соединение закрыто');
|
||
};
|
||
|
||
// Таймаут на случай если соединение не установится
|
||
setTimeout(() => {
|
||
if (ws.readyState !== WebSocket.OPEN) {
|
||
resultDiv.innerHTML = '<div class="status error">❌ WebSocket таймаут - соединение не установлено</div>';
|
||
ws.close();
|
||
}
|
||
}, 5000);
|
||
|
||
} catch (error) {
|
||
resultDiv.innerHTML = `<div class="status error">❌ WebSocket ошибка: ${error.message}</div>`;
|
||
}
|
||
}
|
||
|
||
async function testAuth() {
|
||
const resultDiv = document.getElementById('auth-result');
|
||
resultDiv.innerHTML = '<div class="status info">Проверяем авторизацию...</div>';
|
||
|
||
try {
|
||
const response = await fetch('/api/auth', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({
|
||
phone: '+7 (902) 652-70-96',
|
||
password: 'test123'
|
||
})
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
if (response.ok && data.success) {
|
||
resultDiv.innerHTML = '<div class="status success">✅ Авторизация работает!</div>';
|
||
} else {
|
||
resultDiv.innerHTML = `<div class="status error">❌ Ошибка авторизации: ${data.error || 'Неизвестная ошибка'}</div>`;
|
||
}
|
||
} catch (error) {
|
||
resultDiv.innerHTML = `<div class="status error">❌ Ошибка авторизации: ${error.message}</div>`;
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |