Files
go-socket/machine-client/index.html
T

516 lines
23 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>go-socket debug</title>
<style>
body { font-family: monospace; background: #1a1a1a; color: #e0e0e0; margin: 20px; }
h1 { color: #aaa; font-size: 1.2em; margin-bottom: 12px; }
.config { margin-bottom: 10px; }
.config label { color: #888; }
.config input { background: #2a2a2a; color: #e0e0e0; border: 1px solid #444; padding: 4px 8px; width: 300px; }
/* LOG */
#log-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
#log-header span { color: #888; font-size: 1em; }
#clear-log { background: #2a2a2a; color: #888; border: 1px solid #444; padding: 3px 10px; cursor: pointer; font-size: 0.85em; font-family: monospace; }
#log { background: #111; border: 1px solid #333; padding: 10px; height: 340px; overflow-y: auto; font-size: 0.85em; white-space: pre-wrap; word-break: break-all; margin-bottom: 14px; }
.log-ws { color: #8af; }
.log-http { color: #af8; }
.log-err { color: #f88; }
.log-info { color: #666; }
/* BUTTON ROW */
#btn-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
#btn-row button {
background: #2a2a2a; color: #ccc; border: 1px solid #444;
padding: 5px 10px; cursor: pointer; font-family: monospace; font-size: 0.8em;
}
#btn-row button:hover { background: #333; border-color: #666; }
#btn-row button.active { background: #2a3a2a; border-color: #4a4; color: #af8; }
#btn-row button.active.ws { background: #2a2a3a; border-color: #44a; color: #88f; }
#btn-row button.warn { color: #f88; }
/* FORM PANEL */
#form-panel { display: none; background: #1e1e1e; border: 1px solid #333; padding: 12px; margin-bottom: 6px; }
#form-panel.open { display: block; }
#form-title { color: #888; font-size: 0.85em; margin-bottom: 10px; }
.field { margin-bottom: 7px; }
.field label { display: inline-block; width: 160px; color: #777; font-size: 0.88em; }
.field input { background: #2a2a2a; color: #e0e0e0; border: 1px solid #444; padding: 4px 8px; width: 260px; font-family: monospace; font-size: 0.88em; }
.hint { color: #555; font-size: 0.78em; margin-left: 5px; }
.form-actions { margin-top: 10px; display: flex; gap: 8px; align-items: center; }
button.send { background: #2a4a2a; color: #8f8; border: 1px solid #4a4; padding: 5px 16px; cursor: pointer; font-family: monospace; }
button.send:hover { background: #3a5a3a; }
button.ws-action { background: #2a2a4a; color: #88f; border: 1px solid #44a; padding: 5px 14px; cursor: pointer; font-family: monospace; }
button.ws-action:hover { background: #3a3a5a; }
button.ws-danger { background: #4a2a2a; color: #f88; border: 1px solid #a44; padding: 5px 14px; cursor: pointer; font-family: monospace; }
.ws-status { font-size: 0.82em; }
.ws-status.connected { color: #8f8; }
.ws-status.disconnected { color: #f88; }
</style>
</head>
<body>
<h1>go-socket debug</h1>
<div class="config">
<label>Base URL: </label>
<input id="baseUrl" value="http://localhost:8080">
</div>
<div id="log-header">
<span>Response Log</span>
<button id="clear-log" onclick="clearLog()">Clear</button>
</div>
<div id="log"></div>
<div id="btn-row">
<button data-form="new-user" onclick="showForm('new-user')">POST /new/user</button>
<button data-form="new-token" onclick="showForm('new-token')">POST /new/token</button>
<button data-form="new-connection" onclick="showForm('new-connection')">POST /new/connection</button>
<button data-form="file-upload" onclick="showForm('file-upload')">POST /new/file</button>
<button data-form="mod-user-profile" onclick="showForm('mod-user-profile')">POST /mod/user/profile</button>
<button data-form="mod-user-avatar" onclick="showForm('mod-user-avatar')">POST /mod/user/avatar</button>
<button data-form="mod-user-profilebg" onclick="showForm('mod-user-profilebg')">POST /mod/user/profilebg</button>
<button data-form="mod-connection-elevate" onclick="showForm('mod-connection-elevate')">POST /mod/connection/elevate</button>
<button data-form="mod-connection-deelevate" onclick="showForm('mod-connection-deelevate')">POST /mod/connection/deelevate</button>
<button data-form="get-user" onclick="showForm('get-user')">POST /get/user</button>
<button data-form="get-connections" onclick="showForm('get-connections')">POST /get/connections</button>
<button data-form="get-connection-messages" onclick="showForm('get-connection-messages')">POST /get/connection/messages</button>
<button data-form="file-download" onclick="showForm('file-download')">POST /get/file</button>
<button data-form="get-user-avatar" onclick="showForm('get-user-avatar')">POST /get/user/avatar</button>
<button data-form="get-user-profilebg" onclick="showForm('get-user-profilebg')">POST /get/user/profilebg</button>
<button data-form="del-user" class="warn" onclick="showForm('del-user')">POST /del/user</button>
<button data-form="del-connection" class="warn" onclick="showForm('del-connection')">POST /del/connection</button>
<button data-form="msg-user" onclick="showForm('msg-user')">POST /msg/user</button>
<button data-form="websocket" onclick="showForm('websocket')">WS /ws</button>
</div>
<div id="form-panel">
<div id="form-title"></div>
<div id="form-fields"></div>
</div>
<script>
let ws = null;
let activeForm = null;
let currentToken = '';
function autofillTokens() {
if (!currentToken) return;
document.querySelectorAll('input[id$="-token"]').forEach(el => { el.value = currentToken; });
}
var formDefs = {
'new-user': {
title: 'POST /new/user — register new user',
fields: [
{ id: 'nu-username', label: 'username', ph: 'min 4 chars' },
{ id: 'nu-password', label: 'password', ph: 'min 8 chars' },
],
submit: () => httpPost('/new/user', { username:'nu-username', password:'nu-password' })
},
'new-token': {
title: 'POST /new/token — login / get token',
fields: [
{ id: 'nt-username', label: 'username', ph: 'min 4 chars' },
{ id: 'nt-password', label: 'password', ph: 'min 8 chars' },
],
submit: () => httpPost('/new/token', { username:'nt-username', password:'nt-password' })
},
'new-connection': {
title: 'POST /new/connection — send connection request',
fields: [
{ id: 'nconn-token', label: 'token', ph: '' },
{ id: 'nconn-recipient', label: 'recipient', ph: 'uint32' },
],
submit: () => httpPost('/new/connection', { token:'nconn-token', recipient:'nconn-recipient' })
},
'mod-user-profile': {
title: 'POST /mod/user/profile — update profile',
fields: [
{ id: 'mup-token', label: 'token', ph: '' },
{ id: 'mup-pronouns', label: 'pronouns', ph: 'optional' },
{ id: 'mup-description', label: 'description', ph: 'optional' },
{ id: 'mup-color', label: 'color', ph: '255,100,50 optional', hint: 'R,G,B' },
],
submit: () => httpPost('/mod/user/profile', { token:'mup-token', pronouns:'mup-pronouns', description:'mup-description', color:'mup-color' })
},
'mod-user-avatar': {
title: 'POST /mod/user/avatar — set avatar image (token in header)',
renderCustom: () => `
<div class="field"><label>token</label><input id="mua-token" placeholder=""></div>
<div class="field"><label>file</label><input id="mua-file" type="file"></div>
<div class="form-actions">
<button class="send" onclick="submitAvatarUpload()">Send</button>
</div>
`
},
'mod-user-profilebg': {
title: 'POST /mod/user/profilebg — set profile background (token in header)',
renderCustom: () => `
<div class="field"><label>token</label><input id="mpb-token" placeholder=""></div>
<div class="field"><label>file</label><input id="mpb-file" type="file"></div>
<div class="form-actions">
<button class="send" onclick="submitProfileBgUpload()">Send</button>
</div>
`
},
'mod-connection-elevate': {
title: 'POST /mod/connection/elevate — elevate connection',
fields: [
{ id: 'mce-token', label: 'token', ph: '' },
{ id: 'mce-connectionid', label: 'connectionid', ph: 'UUID' },
],
submit: () => httpPost('/mod/connection/elevate', { token:'mce-token', connectionid:'mce-connectionid' })
},
'mod-connection-deelevate': {
title: 'POST /mod/connection/deelevate — de-elevate connection',
fields: [
{ id: 'mcde-token', label: 'token', ph: '' },
{ id: 'mcde-connectionid', label: 'connectionid', ph: 'UUID' },
],
submit: () => httpPost('/mod/connection/deelevate', { token:'mcde-token', connectionid:'mcde-connectionid' })
},
'get-user': {
title: 'POST /get/user — get user info',
fields: [
{ id: 'gu-token', label: 'token', ph: '' },
{ id: 'gu-targetid', label: 'targetid', ph: 'uint32' },
],
submit: () => httpPost('/get/user', { token:'gu-token', targetid:'gu-targetid' })
},
'get-connections': {
title: "POST /get/connections — get user's connections",
fields: [
{ id: 'gconn-token', label: 'token', ph: '' },
],
submit: () => httpPost('/get/connections', { token:'gconn-token' })
},
'get-connection-messages': {
title: 'POST /get/connection/messages — fetch message history',
fields: [
{ id: 'gcm-token', label: 'token', ph: '' },
{ id: 'gcm-connectionid', label: 'connectionid', ph: 'UUID' },
{ id: 'gcm-messages', label: 'messages', ph: 'count (optional)' },
{ id: 'gcm-before', label: 'before', ph: 'RFC3339 (optional)', hint: 'e.g. 2025-01-01T00:00:00Z' },
],
submit: () => httpPost('/get/connection/messages', { token:'gcm-token', connectionid:'gcm-connectionid', messages:'gcm-messages', before:'gcm-before' })
},
'get-user-avatar': {
title: 'POST /get/user/avatar — get avatar URL (token in header)',
renderCustom: () => `
<div class="field"><label>token</label><input id="gua-token" placeholder=""></div>
<div class="field"><label>userid</label><input id="gua-userid" placeholder="uint32"></div>
<div class="form-actions">
<button class="send" onclick="submitGetUserAvatar()">Send</button>
</div>
`
},
'get-user-profilebg': {
title: 'POST /get/user/profilebg — get profile background URL (token in header)',
renderCustom: () => `
<div class="field"><label>token</label><input id="gpb-token" placeholder=""></div>
<div class="field"><label>userid</label><input id="gpb-userid" placeholder="uint32"></div>
<div class="form-actions">
<button class="send" onclick="submitGetUserProfileBg()">Send</button>
</div>
`
},
'del-user': {
title: 'POST /del/user — delete own account',
fields: [
{ id: 'du-token', label: 'token', ph: '' },
],
submit: () => httpPost('/del/user', { token:'du-token' })
},
'del-connection': {
title: 'POST /del/connection — delete a connection',
fields: [
{ id: 'dc-token', label: 'token', ph: '' },
{ id: 'dc-connectionid', label: 'connectionid', ph: 'UUID' },
],
submit: () => httpPost('/del/connection', { token:'dc-token', connectionid:'dc-connectionid' })
},
'msg-user': {
title: 'POST /msg/user — send direct message to user',
fields: [
{ id: 'mu-token', label: 'token', ph: '' },
{ id: 'mu-connectionid', label: 'connectionid', ph: 'UUID' },
{ id: 'mu-msgContent', label: 'msgContent', ph: 'message text (optional if mediaKey set)' },
{ id: 'mu-attachedFile', label: 'attachedFile', ph: 'key returned by /new/file (optional)' },
],
submit: () => httpPost('/msg/user', { token:'mu-token', connectionid:'mu-connectionid', msgContent:'mu-msgContent', attachedFile:'mu-attachedFile' })
},
'file-upload': {
title: 'POST /new/file — upload file (multipart, token in header)',
renderCustom: () => `
<div class="field"><label>token</label><input id="fu-token" placeholder=""></div>
<div class="field"><label>connectionid</label><input id="fu-connectionid" placeholder="UUID"></div>
<div class="field"><label>file</label><input id="fu-file" type="file"></div>
<div class="form-actions">
<button class="send" onclick="submitFileUpload()">Send</button>
</div>
`
},
'file-download': {
title: 'POST /get/file — get presigned download URL (token in header)',
renderCustom: () => `
<div class="field"><label>token</label><input id="fd-token" placeholder=""></div>
<div class="field"><label>connectionid</label><input id="fd-connectionid" placeholder="UUID"></div>
<div class="field"><label>key</label><input id="fd-key" placeholder="returned by upload"></div>
<div class="form-actions">
<button class="send" onclick="submitFileDownload()">Send</button>
</div>
`
},
'websocket': {
title: 'WS /ws — WebSocket connection',
renderCustom: () => {
return `
<div class="form-actions" style="margin-bottom:10px">
<button class="ws-action" onclick="wsConnect()">Connect</button>
<button class="ws-danger" onclick="wsDisconnect()">Disconnect</button>
<span id="ws-status" class="ws-status disconnected">disconnected</span>
</div>
<div class="field"><label>token (auth)</label><input id="ws-token" placeholder="send as first message to authenticate"></div>
<div class="form-actions" style="margin-bottom:10px">
<button class="ws-action" onclick="wsAuth()">Send Auth Token</button>
</div>
<div class="field"><label>raw message</label><input id="ws-msg" placeholder='{"key":"value"}'></div>
<div class="form-actions">
<button class="ws-action" onclick="wsSend()">Send Raw</button>
</div>
`;
}
},
};
function showForm(name) {
const panel = document.getElementById('form-panel');
const titleEl = document.getElementById('form-title');
const fieldsEl = document.getElementById('form-fields');
const buttons = document.querySelectorAll('#btn-row button');
// deactivate all buttons
buttons.forEach(b => b.classList.remove('active'));
if (activeForm === name) {
panel.classList.remove('open');
activeForm = null;
return;
}
activeForm = name;
const def = formDefs[name];
// activate clicked button
const btn = document.querySelector(`#btn-row button[data-form="${name}"]`);
if (btn) {
btn.classList.add('active');
if (name === 'websocket') btn.classList.add('ws');
}
titleEl.textContent = def.title;
if (def.renderCustom) {
fieldsEl.innerHTML = def.renderCustom();
autofillTokens();
} else {
let html = '';
for (const f of def.fields) {
html += `<div class="field">
<label>${f.label}</label>
<input id="${f.id}" placeholder="${f.ph || ''}">
${f.hint ? `<span class="hint">${f.hint}</span>` : ''}
</div>`;
}
html += `<div class="form-actions"><button class="send" onclick="formDefs['${name}'].submit()">Send</button></div>`;
fieldsEl.innerHTML = html;
autofillTokens();
}
panel.classList.add('open');
}
function log(prefix, text, cls) {
const div = document.getElementById('log');
const ts = new Date().toTimeString().slice(0, 8);
const line = document.createElement('div');
line.className = cls;
let formatted = text;
try { formatted = JSON.stringify(JSON.parse(text), null, 2); } catch(e) {}
line.textContent = `[${ts}] ${prefix}: ${formatted}`;
div.appendChild(line);
div.scrollTop = div.scrollHeight;
}
function clearLog() { document.getElementById('log').innerHTML = ''; }
function baseUrl() { return document.getElementById('baseUrl').value.replace(/\/$/, ''); }
async function httpPost(path, fieldMap) {
const params = new URLSearchParams();
for (const [key, id] of Object.entries(fieldMap)) {
const el = document.getElementById(id);
if (el && el.value !== '') params.append(key, el.value);
}
const url = baseUrl() + path;
log(`HTTP ${path}`, `${params.toString()}`, 'log-info');
try {
const resp = await fetch(url, { method: 'POST', body: params });
const text = await resp.text();
log(`HTTP ${resp.status}`, text, resp.ok ? 'log-http' : 'log-err');
if (path === '/new/token' && resp.ok) {
try { currentToken = JSON.parse(text).token; } catch(e) {}
autofillTokens();
wsConnectAndAuth();
}
} catch(e) {
log('HTTP ERR', e.message, 'log-err');
}
}
function wsConnectAndAuth() {
if (ws) { wsAuth(); return; }
const url = baseUrl().replace(/^http/, 'ws') + '/ws';
log('WS', `auto-connecting to ${url}`, 'log-info');
ws = new WebSocket(url);
ws.onopen = () => { setWsStatus(true); log('WS', 'connected', 'log-ws'); wsAuth(); };
ws.onmessage = (e) => { log('WS', e.data, 'log-ws'); };
ws.onerror = () => { log('WS ERR', 'error', 'log-err'); };
ws.onclose = () => { setWsStatus(false); log('WS', 'disconnected', 'log-info'); ws = null; };
}
function wsConnect() {
if (ws) { log('WS', 'already connected', 'log-info'); return; }
const url = baseUrl().replace(/^http/, 'ws') + '/ws';
log('WS', `connecting to ${url}`, 'log-info');
ws = new WebSocket(url);
ws.onopen = () => { setWsStatus(true); log('WS', 'connected', 'log-ws'); };
ws.onmessage = (e) => { log('WS', e.data, 'log-ws'); };
ws.onerror = () => { log('WS ERR', 'error', 'log-err'); };
ws.onclose = () => { setWsStatus(false); log('WS', 'disconnected', 'log-info'); ws = null; };
}
function wsDisconnect() { if (ws) { ws.close(); ws = null; } }
function wsAuth() {
if (!ws) { log('WS', 'not connected', 'log-err'); return; }
const el = document.getElementById('ws-token');
const token = el ? el.value : currentToken;
if (!token) { log('WS', 'no token to auth with', 'log-err'); return; }
const msg = JSON.stringify({ token });
ws.send(msg);
log('WS →', msg, 'log-info');
}
function wsSend() {
if (!ws) { log('WS', 'not connected', 'log-err'); return; }
const msg = document.getElementById('ws-msg').value;
ws.send(msg);
log('WS →', msg, 'log-info');
}
async function submitFileUpload() {
const token = document.getElementById('fu-token').value;
const connectionid = document.getElementById('fu-connectionid').value;
const fileInput = document.getElementById('fu-file');
if (!fileInput.files.length) { log('HTTP ERR', 'no file selected', 'log-err'); return; }
const form = new FormData();
form.append('connectionid', connectionid);
form.append('file', fileInput.files[0]);
log('HTTP /new/file', `→ connectionid=${connectionid} file=${fileInput.files[0].name}`, 'log-info');
try {
const resp = await fetch(baseUrl() + '/new/file', { method: 'POST', headers: { token }, body: form });
const text = await resp.text();
log(`HTTP ${resp.status}`, text, resp.ok ? 'log-http' : 'log-err');
if (resp.ok) {
const keyEl = document.getElementById('fd-key');
if (keyEl) keyEl.value = text;
const dmKeyEl = document.getElementById('mu-attachedFile');
if (dmKeyEl) dmKeyEl.value = text;
}
} catch(e) {
log('HTTP ERR', e.message, 'log-err');
}
}
async function submitFileDownload() {
const token = document.getElementById('fd-token').value;
const connectionid = document.getElementById('fd-connectionid').value;
const key = document.getElementById('fd-key').value;
const params = new URLSearchParams({ connectionid, key });
log('HTTP /get/file', `${params.toString()}`, 'log-info');
try {
const resp = await fetch(baseUrl() + '/get/file', { method: 'POST', headers: { token }, body: params });
const text = await resp.text();
log(`HTTP ${resp.status}`, text, resp.ok ? 'log-http' : 'log-err');
} catch(e) {
log('HTTP ERR', e.message, 'log-err');
}
}
async function submitAvatarUpload() {
const token = document.getElementById('mua-token').value;
const fileInput = document.getElementById('mua-file');
if (!fileInput.files.length) { log('HTTP ERR', 'no file selected', 'log-err'); return; }
const form = new FormData();
form.append('file', fileInput.files[0]);
log('HTTP /mod/user/avatar', `→ file=${fileInput.files[0].name}`, 'log-info');
try {
const resp = await fetch(baseUrl() + '/mod/user/avatar', { method: 'POST', headers: { token }, body: form });
const text = await resp.text();
log(`HTTP ${resp.status}`, text, resp.ok ? 'log-http' : 'log-err');
} catch(e) { log('HTTP ERR', e.message, 'log-err'); }
}
async function submitProfileBgUpload() {
const token = document.getElementById('mpb-token').value;
const fileInput = document.getElementById('mpb-file');
if (!fileInput.files.length) { log('HTTP ERR', 'no file selected', 'log-err'); return; }
const form = new FormData();
form.append('file', fileInput.files[0]);
log('HTTP /mod/user/profilebg', `→ file=${fileInput.files[0].name}`, 'log-info');
try {
const resp = await fetch(baseUrl() + '/mod/user/profilebg', { method: 'POST', headers: { token }, body: form });
const text = await resp.text();
log(`HTTP ${resp.status}`, text, resp.ok ? 'log-http' : 'log-err');
} catch(e) { log('HTTP ERR', e.message, 'log-err'); }
}
async function submitGetUserAvatar() {
const token = document.getElementById('gua-token').value;
const userid = document.getElementById('gua-userid').value;
const params = new URLSearchParams({ userid });
log('HTTP /get/user/avatar', `${params.toString()}`, 'log-info');
try {
const resp = await fetch(baseUrl() + '/get/user/avatar', { method: 'POST', headers: { token }, body: params });
const text = await resp.text();
log(`HTTP ${resp.status}`, text, resp.ok ? 'log-http' : 'log-err');
} catch(e) { log('HTTP ERR', e.message, 'log-err'); }
}
async function submitGetUserProfileBg() {
const token = document.getElementById('gpb-token').value;
const userid = document.getElementById('gpb-userid').value;
const params = new URLSearchParams({ userid });
log('HTTP /get/user/profilebg', `${params.toString()}`, 'log-info');
try {
const resp = await fetch(baseUrl() + '/get/user/profilebg', { method: 'POST', headers: { token }, body: params });
const text = await resp.text();
log(`HTTP ${resp.status}`, text, resp.ok ? 'log-http' : 'log-err');
} catch(e) { log('HTTP ERR', e.message, 'log-err'); }
}
function setWsStatus(connected) {
const el = document.getElementById('ws-status');
if (!el) return;
el.textContent = connected ? 'connected' : 'disconnected';
el.className = 'ws-status ' + (connected ? 'connected' : 'disconnected');
}
</script>
</body>
</html>