GitProtogen
133 lines
4.4 KiB
PHP
133 lines
4.4 KiB
PHP
<?php
|
|
declare(strict_types=1);
|
|
require __DIR__ . '/../vendor/autoload.php';
|
|
|
|
use ComCen\Html\Html;
|
|
|
|
$html = new Html();
|
|
$html->content = <<<'HTML'
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>ComCen</title>
|
|
<style>
|
|
body { font-family: monospace; max-width: 600px; margin: 40px auto; padding: 0 16px; }
|
|
#log { border: 1px solid #ccc; height: 300px; overflow-y: auto; padding: 8px; margin-bottom: 8px; background: #f9f9f9; }
|
|
.log-entry { margin: 2px 0; }
|
|
.log-system { color: #888; }
|
|
.log-error { color: #c00; }
|
|
input, button { font-family: monospace; font-size: 14px; }
|
|
#token { width: 100%; box-sizing: border-box; margin-bottom: 8px; padding: 4px; }
|
|
#msg-row { display: flex; gap: 8px; }
|
|
#message { flex: 1; padding: 4px; }
|
|
button { padding: 4px 12px; cursor: pointer; }
|
|
button:disabled { cursor: not-allowed; opacity: 0.5; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h2>ComCen</h2>
|
|
|
|
<input id="token" type="text" placeholder="Paste token from curl login/register here" />
|
|
<div style="display:flex; gap:8px; margin-bottom:8px;">
|
|
<button id="connect-btn" onclick="connect()">Connect</button>
|
|
<button id="disconnect-btn" onclick="disconnect()" disabled>Disconnect</button>
|
|
</div>
|
|
|
|
<div id="log"></div>
|
|
|
|
<div id="msg-row">
|
|
<input id="message" type="text" placeholder="Message..." disabled onkeydown="if(event.key==='Enter') send()" />
|
|
<button id="send-btn" onclick="send()" disabled>Send</button>
|
|
</div>
|
|
|
|
<script>
|
|
let ws = null;
|
|
let authenticated = false;
|
|
|
|
function log(text, type = '') {
|
|
const log = document.getElementById('log');
|
|
const div = document.createElement('div');
|
|
div.className = 'log-entry' + (type ? ' log-' + type : '');
|
|
div.textContent = text;
|
|
log.appendChild(div);
|
|
log.scrollTop = log.scrollHeight;
|
|
}
|
|
|
|
function setConnected(connected) {
|
|
document.getElementById('connect-btn').disabled = connected;
|
|
document.getElementById('disconnect-btn').disabled = !connected;
|
|
}
|
|
|
|
function setAuthenticated(auth) {
|
|
authenticated = auth;
|
|
document.getElementById('message').disabled = !auth;
|
|
document.getElementById('send-btn').disabled = !auth;
|
|
}
|
|
|
|
function connect() {
|
|
const token = document.getElementById('token').value.trim();
|
|
if (!token) {
|
|
log('Enter a token first.', 'error');
|
|
return;
|
|
}
|
|
|
|
ws = new WebSocket('ws://localhost:8080/ws');
|
|
|
|
ws.onopen = () => {
|
|
log('Connected. Authenticating...', 'system');
|
|
setConnected(true);
|
|
ws.send(JSON.stringify({ token }));
|
|
};
|
|
|
|
ws.onmessage = (event) => {
|
|
const text = event.data;
|
|
if (text === '{"success"}: "authenticated"') {
|
|
log('Authenticated.', 'system');
|
|
setAuthenticated(true);
|
|
} else if (text === '{"error"}: "invalid token"') {
|
|
log('Invalid token. Connection closed.', 'error');
|
|
ws.close();
|
|
} else if (text === '{"error"}: "you are not authenticated"') {
|
|
log('Server: not authenticated', 'error');
|
|
} else {
|
|
try {
|
|
const data = JSON.parse(text);
|
|
log(`${data.sender}: ${data.msg}`);
|
|
} catch {
|
|
log(text);
|
|
}
|
|
}
|
|
};
|
|
|
|
ws.onclose = () => {
|
|
log('Disconnected.', 'system');
|
|
setConnected(false);
|
|
setAuthenticated(false);
|
|
ws = null;
|
|
};
|
|
|
|
ws.onerror = () => {
|
|
log('WebSocket error.', 'error');
|
|
};
|
|
}
|
|
|
|
function disconnect() {
|
|
if (ws) ws.close();
|
|
}
|
|
|
|
function send() {
|
|
const input = document.getElementById('message');
|
|
const text = input.value.trim();
|
|
if (!text || !ws || !authenticated) return;
|
|
ws.send(JSON.stringify({ message: text }));
|
|
log(`You: ${text}`);
|
|
input.value = '';
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|
|
HTML;
|
|
$html->renderContent();
|