sasha
3e90269b0b
- Клиентская часть Vue 3 + Vite - Серверная часть Node.js + WebSocket - Система авторизации и смен - Управление игровыми портами - Поддержка тем (светлая/темная) - Адаптивный дизайн 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
248 lines
8.1 KiB
HTML
248 lines
8.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>WebSocket Test Client</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 20px;
|
|
background: #f5f5f5;
|
|
}
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
.status {
|
|
padding: 10px;
|
|
margin: 10px 0;
|
|
border-radius: 5px;
|
|
background: white;
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
|
}
|
|
.connected {
|
|
background: #d4edda;
|
|
color: #155724;
|
|
}
|
|
.disconnected {
|
|
background: #f8d7da;
|
|
color: #721c24;
|
|
}
|
|
.controls {
|
|
margin: 20px 0;
|
|
}
|
|
button {
|
|
padding: 10px 20px;
|
|
margin: 5px;
|
|
border: none;
|
|
background: #667eea;
|
|
color: white;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
}
|
|
button:hover {
|
|
background: #5567d8;
|
|
}
|
|
input {
|
|
padding: 10px;
|
|
margin: 5px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
width: 200px;
|
|
}
|
|
.log {
|
|
background: white;
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
}
|
|
.log-entry {
|
|
padding: 5px;
|
|
margin: 2px 0;
|
|
border-left: 3px solid #667eea;
|
|
background: #f8f9fa;
|
|
font-family: monospace;
|
|
font-size: 12px;
|
|
}
|
|
.log-entry.sent {
|
|
border-left-color: #28a745;
|
|
}
|
|
.log-entry.received {
|
|
border-left-color: #007bff;
|
|
}
|
|
.log-entry.error {
|
|
border-left-color: #dc3545;
|
|
background: #fff5f5;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>NEWPULT WebSocket Test Client</h1>
|
|
|
|
<div id="status" class="status disconnected">
|
|
❌ Отключен от сервера
|
|
</div>
|
|
|
|
<div class="controls">
|
|
<h3>Авторизация администратора:</h3>
|
|
<input type="text" id="login" placeholder="Логин" value="admin">
|
|
<input type="password" id="password" placeholder="Пароль" value="1234">
|
|
<button onclick="loginAdmin()">Войти как администратор</button>
|
|
</div>
|
|
|
|
<div class="controls">
|
|
<h3>Авторизация пульта:</h3>
|
|
<input type="text" id="serialcpu" placeholder="Serial CPU" value="mock-serial-cpu-12345">
|
|
<input type="text" id="admins" placeholder="ID админов (1,2,3)" value="7,183,202">
|
|
<button onclick="loginPult()">Войти как пульт</button>
|
|
</div>
|
|
|
|
<div class="controls">
|
|
<h3>Тестовые команды:</h3>
|
|
<button onclick="sendPing()">Ping</button>
|
|
<button onclick="getPorts()">Получить порты</button>
|
|
<button onclick="clearLog()">Очистить лог</button>
|
|
<button onclick="reconnect()">Переподключиться</button>
|
|
</div>
|
|
|
|
<h3>Лог сообщений:</h3>
|
|
<div id="log" class="log"></div>
|
|
</div>
|
|
|
|
<script>
|
|
let ws = null;
|
|
const statusEl = document.getElementById('status');
|
|
const logEl = document.getElementById('log');
|
|
|
|
function addLog(message, type = 'info') {
|
|
const entry = document.createElement('div');
|
|
entry.className = `log-entry ${type}`;
|
|
const time = new Date().toLocaleTimeString('ru-RU');
|
|
entry.textContent = `[${time}] ${message}`;
|
|
logEl.insertBefore(entry, logEl.firstChild);
|
|
|
|
// Ограничиваем количество записей
|
|
while (logEl.children.length > 100) {
|
|
logEl.removeChild(logEl.lastChild);
|
|
}
|
|
}
|
|
|
|
function updateStatus(connected) {
|
|
if (connected) {
|
|
statusEl.className = 'status connected';
|
|
statusEl.textContent = '✅ Подключен к серверу (порт 9000)';
|
|
} else {
|
|
statusEl.className = 'status disconnected';
|
|
statusEl.textContent = '❌ Отключен от сервера';
|
|
}
|
|
}
|
|
|
|
function connect() {
|
|
try {
|
|
ws = new WebSocket('ws://localhost:9000');
|
|
|
|
ws.onopen = () => {
|
|
updateStatus(true);
|
|
addLog('Подключено к WebSocket серверу', 'connected');
|
|
};
|
|
|
|
ws.onmessage = (event) => {
|
|
try {
|
|
const data = JSON.parse(event.data);
|
|
addLog(`Получено: ${JSON.stringify(data)}`, 'received');
|
|
|
|
// Обработка ответа авторизации
|
|
if (data.type === 'auth_status' || data.do === 'avt') {
|
|
if (data.success || data.ok) {
|
|
addLog('✅ Авторизация успешна!', 'connected');
|
|
} else {
|
|
addLog(`❌ Ошибка авторизации: ${data.error || 'Неизвестная ошибка'}`, 'error');
|
|
}
|
|
}
|
|
} catch (e) {
|
|
addLog(`Получено (не JSON): ${event.data}`, 'received');
|
|
}
|
|
};
|
|
|
|
ws.onerror = (error) => {
|
|
addLog(`Ошибка: ${error}`, 'error');
|
|
};
|
|
|
|
ws.onclose = () => {
|
|
updateStatus(false);
|
|
addLog('Соединение закрыто', 'disconnected');
|
|
};
|
|
} catch (error) {
|
|
addLog(`Ошибка подключения: ${error}`, 'error');
|
|
}
|
|
}
|
|
|
|
function send(data) {
|
|
if (!ws || ws.readyState !== WebSocket.OPEN) {
|
|
addLog('WebSocket не подключен!', 'error');
|
|
return;
|
|
}
|
|
|
|
const message = JSON.stringify(data);
|
|
ws.send(message);
|
|
addLog(`Отправлено: ${message}`, 'sent');
|
|
}
|
|
|
|
function loginAdmin() {
|
|
const login = document.getElementById('login').value;
|
|
const password = document.getElementById('password').value;
|
|
|
|
send({
|
|
type: 'auth',
|
|
do: 'avt',
|
|
tip: 'admin',
|
|
login: login,
|
|
password: password,
|
|
serial: 'web-test-' + Date.now()
|
|
});
|
|
}
|
|
|
|
function loginPult() {
|
|
const serialcpu = document.getElementById('serialcpu').value;
|
|
const adminsStr = document.getElementById('admins').value;
|
|
const admins = adminsStr ? adminsStr.split(',').map(id => parseInt(id.trim())).filter(id => !isNaN(id)) : [];
|
|
|
|
send({
|
|
type: 'auth',
|
|
do: 'avt',
|
|
tip: 'pult',
|
|
serialcpu: serialcpu || 'mock-serial-cpu-12345',
|
|
admins: admins,
|
|
VER: '1.0.0'
|
|
});
|
|
}
|
|
|
|
function sendPing() {
|
|
send({ type: 'ping' });
|
|
}
|
|
|
|
function getPorts() {
|
|
send({ type: 'get_ports' });
|
|
}
|
|
|
|
function clearLog() {
|
|
logEl.innerHTML = '';
|
|
addLog('Лог очищен');
|
|
}
|
|
|
|
function reconnect() {
|
|
if (ws) {
|
|
ws.close();
|
|
}
|
|
setTimeout(connect, 500);
|
|
}
|
|
|
|
// Автоматическое подключение при загрузке
|
|
connect();
|
|
</script>
|
|
</body>
|
|
</html> |