160 lines
6.5 KiB
HTML
160 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Socket.IO Test Client</title>
|
|
<style>
|
|
body { font-family: sans-serif; display: flex; flex-direction: column; max-width: 800px; margin: auto; }
|
|
.controls, .message-box { border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; border-radius: 5px; }
|
|
input[type="text"] { width: calc(100% - 100px); padding: 8px; margin-right: 5px; }
|
|
button { padding: 8px 12px; }
|
|
#messages { border: 1px solid #eee; padding: 10px; height: 300px; overflow-y: scroll; background-color: #f9f9f9; }
|
|
.msg { margin: 5px 0; padding: 5px; border-radius: 3px; }
|
|
.server-msg { background-color: #e1f5fe; }
|
|
.client-msg { background-color: #c8e6c9; text-align: right; }
|
|
.status-msg { background-color: #fff9c4; text-align: center; font-style: italic; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Socket.IO Test Client</h1>
|
|
|
|
<div class="controls">
|
|
<h3>Подключение</h3>
|
|
<input type="text" id="url" placeholder="Сервер URL" value="https://127.0.0.1:5205/">
|
|
<input type="text" id="token" placeholder="Токен (для auth)" value="my-secret-token-123">
|
|
<button id="connectBtn">Подключиться</button>
|
|
<button id="disconnectBtn" disabled>Отключиться</button>
|
|
</div>
|
|
|
|
<div class="message-box">
|
|
<h3>Отправка клиентского сообщения</h3>
|
|
<input type="text" id="message" placeholder="Введите сообщение" disabled>
|
|
<button id="sendBtn" disabled>Отправить</button>
|
|
</div>
|
|
|
|
<div class="controls">
|
|
<h3>Настройки</h3>
|
|
<label>
|
|
<input type="checkbox" id="invertLogs">
|
|
Новый сверху (инвертировать лог)
|
|
</label>
|
|
</div>
|
|
|
|
<h3>Логи <button id="clearLogBtn" style="font-size: 0.8em; float: right;">Очистить</button></h3>
|
|
<div id="messages"></div>
|
|
|
|
<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
|
|
<script>
|
|
const urlInput = document.getElementById('url');
|
|
const tokenInput = document.getElementById('token');
|
|
const connectBtn = document.getElementById('connectBtn');
|
|
const disconnectBtn = document.getElementById('disconnectBtn');
|
|
const messageInput = document.getElementById('message');
|
|
const sendBtn = document.getElementById('sendBtn');
|
|
const messagesDiv = document.getElementById('messages');
|
|
const clearLogBtn = document.getElementById('clearLogBtn');
|
|
const invertLogsCheckbox = document.getElementById('invertLogs');
|
|
|
|
let socket = null;
|
|
|
|
function logMessage(message, type = 'status') {
|
|
const ts = new Date().toLocaleTimeString();
|
|
const newLogEntry = `<div class="msg ${type}-msg">[${ts}] ${message}</div>`;
|
|
if (invertLogsCheckbox.checked) {
|
|
messagesDiv.innerHTML = newLogEntry + messagesDiv.innerHTML;
|
|
messagesDiv.scrollTop = 0;
|
|
} else {
|
|
messagesDiv.innerHTML += newLogEntry;
|
|
messagesDiv.scrollTop = messagesDiv.scrollHeight;
|
|
}
|
|
}
|
|
|
|
function connectToServer() {
|
|
if (socket) {
|
|
logMessage('Уже подключены. Сначала отключитесь.', 'status');
|
|
return;
|
|
}
|
|
const token = tokenInput.value;
|
|
const url = urlInput.value || 'https://127.0.0.1:5205/';
|
|
logMessage('Подключаемся к серверу...', 'status');
|
|
|
|
socket = io(url, {
|
|
auth: {
|
|
token: token || null
|
|
}
|
|
});
|
|
|
|
// Универсальный перехват всех событий
|
|
socket.onAny((event, ...args) => {
|
|
try {
|
|
logMessage(`onAny -> ${event}: ${JSON.stringify(args[0])}`, 'server');
|
|
} catch (e) {
|
|
logMessage(`onAny -> ${event}: <unserializable>`, 'server');
|
|
}
|
|
});
|
|
|
|
socket.on('connect', () => {
|
|
logMessage(`Успешное подключение! SID: ${socket.id}`, 'status');
|
|
connectBtn.disabled = true;
|
|
disconnectBtn.disabled = false;
|
|
messageInput.disabled = false;
|
|
sendBtn.disabled = false;
|
|
});
|
|
|
|
socket.on('disconnect', () => {
|
|
logMessage('Отключено от сервера.', 'status');
|
|
connectBtn.disabled = false;
|
|
disconnectBtn.disabled = true;
|
|
messageInput.disabled = true;
|
|
sendBtn.disabled = true;
|
|
socket = null;
|
|
});
|
|
|
|
// Часто используемые события
|
|
socket.on('message', (data) => {
|
|
logMessage(`message: ${JSON.stringify(data)}`, 'server');
|
|
});
|
|
socket.on('connected', (data) => {
|
|
logMessage(`connected: ${JSON.stringify(data)}`, 'server');
|
|
});
|
|
socket.on('chat:new_message', (data) => {
|
|
logMessage(`chat:new_message: ${JSON.stringify(data)}`, 'server');
|
|
});
|
|
socket.on('achievement:received', (data) => {
|
|
logMessage(`achievement:received: ${JSON.stringify(data)}`, 'server');
|
|
});
|
|
socket.on('achievement:progress', (data) => {
|
|
logMessage(`achievement:progress: ${JSON.stringify(data)}`, 'server');
|
|
});
|
|
|
|
socket.on('connect_error', (err) => {
|
|
logMessage(`Ошибка подключения: ${err.message}`, 'status');
|
|
socket = null;
|
|
});
|
|
}
|
|
|
|
function sendMessage() {
|
|
const message = messageInput.value;
|
|
if (socket && message) {
|
|
socket.emit('client_message', { data: message });
|
|
logMessage(`Я: ${message}`, 'client');
|
|
messageInput.value = '';
|
|
}
|
|
}
|
|
|
|
connectBtn.addEventListener('click', connectToServer);
|
|
disconnectBtn.addEventListener('click', () => {
|
|
if (socket) socket.disconnect();
|
|
});
|
|
sendBtn.addEventListener('click', sendMessage);
|
|
messageInput.addEventListener('keyup', (event) => {
|
|
if (event.key === 'Enter') {
|
|
sendMessage();
|
|
}
|
|
});
|
|
clearLogBtn.addEventListener('click', () => {
|
|
messagesDiv.innerHTML = '';
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|