This commit is contained in:
Alex Emmet 2026-06-24 16:19:55 +02:00
commit 298253d6fa
31 changed files with 2899 additions and 276 deletions

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MTP Web Client</title>
<style>
body { font-family: monospace; background: #111; color: #0f0; padding: 2rem; }
#status { white-space: pre-wrap; }
.state { color: #ff0; }
.received { color: #0ff; }
.error { color: #f00; }
</style>
</head>
<body>
<h1>MTP WebTransport Client</h1>
<div id="status">Initializing...</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

1041
example-usage/web-client/package-lock.json generated Normal file

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,15 @@
{
"name": "mtp-web-client",
"private": true,
"version": "0.1.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"devDependencies": {
"typescript": "^5.4.0",
"vite": "^5.4.0"
}
}

View file

@ -0,0 +1,110 @@
import init, {
WasmClient,
ConnectionConfig,
ConnectionState,
WasmEd25519Signer,
ed25519_generate,
keyring_from_ed25519,
build_demo_message,
} from 'mtp-wasm';
const STATUS = document.getElementById('status')!;
const STORAGE_KEY = 'mtp-web-client-keys';
function log(msg: string, cls = '') {
const line = document.createElement('div');
line.textContent = msg;
if (cls) line.className = cls;
STATUS.appendChild(line);
}
function saveKeys(clientId: bigint, keyringBytes: Uint8Array) {
const data = {
clientId: clientId.toString(),
keyring: Array.from(keyringBytes),
};
localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
}
function loadKeys(): { clientId: bigint; keyringBytes: Uint8Array } | null {
const raw = localStorage.getItem(STORAGE_KEY);
if (!raw) return null;
const data = JSON.parse(raw);
return {
clientId: BigInt(data.clientId),
keyringBytes: new Uint8Array(data.keyring),
};
}
async function initWasm() {
log('Loading WASM module...');
await init();
log(`WASM loaded. WebTransport supported: ${WasmClient.is_supported()}`);
}
function createClient(): WasmClient {
return new WasmClient(
(state: number) => log(`[state] ${ConnectionState[state] ?? state}`, 'state'),
(data: Uint8Array) => {
const decoder = new TextDecoder();
log(`[message] ${data.length} bytes: ${decoder.decode(data)}`, 'received');
},
(err: any) => log(`[error] ${err}`, 'error'),
);
}
function generateKeyringBytes(): Uint8Array {
const gen = ed25519_generate();
const sk = gen.secretKey as Uint8Array;
const pk = gen.publicKey as Uint8Array;
gen.signer.free();
return keyring_from_ed25519(sk, pk);
}
async function run() {
await initWasm();
if (!WasmClient.is_supported()) {
log('WebTransport is not supported in this browser.', 'error');
return;
}
const serverUrl = 'https://127.0.0.1:8080';
const saved = loadKeys();
const client = createClient();
const config = new ConnectionConfig(serverUrl);
let clientId: bigint;
let keyringBytes: Uint8Array;
if (saved) {
log(`Found saved client keys (ID: ${saved.clientId})`);
const hostPk = new Uint8Array(0);
clientId = await client.auth_connect(config, hostPk, saved.keyringBytes, saved.clientId);
log(`Authenticated as client ${clientId}`);
keyringBytes = saved.keyringBytes;
} else {
log('No saved keys — registering new client...');
const hostPk = new Uint8Array(0);
keyringBytes = generateKeyringBytes();
clientId = await client.auth_register(config, hostPk, keyringBytes);
log(`Registered with ID: ${clientId}`);
saveKeys(clientId, keyringBytes);
log('Saved client keys to localStorage');
}
config.free();
log('\nSending demo message...');
const frame = build_demo_message(clientId, keyringBytes);
await client.send(frame);
log(`Sent ${frame.length} bytes`);
log('\nClient running. Waiting for incoming messages...');
}
run().catch((e) => {
log(`Fatal error: ${e}`, 'error');
console.error(e);
});

View file

@ -0,0 +1,26 @@
import { build_demo_message, build_ping_frame, parse_auth_response } from 'mtp-wasm';
export function buildAuthResponse(
response: Uint8Array,
): {
connected: boolean;
clientNonce: Uint8Array;
assignedId: bigint;
timestamp: bigint;
signature: Uint8Array;
} {
return parse_auth_response(response);
}
export function buildDemoMessage(clientId: bigint, keyringBytes: Uint8Array): Uint8Array {
return build_demo_message(clientId, keyringBytes);
}
export function buildPingFrame(
clientId: bigint,
description: string,
timestamp: bigint,
data?: Uint8Array,
): Uint8Array {
return build_ping_frame(clientId, description, timestamp, data ?? new Uint8Array());
}

View file

@ -0,0 +1,18 @@
{
"compilerOptions": {
"target": "ES2022",
"module": "ESNext",
"moduleResolution": "bundler",
"strict": true,
"noEmit": true,
"isolatedModules": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"paths": {
"mtp-wasm": ["../../wasm/pkg"]
},
"rootDir": "../.."
},
"include": ["src", "../../wasm/pkg"]
}

View file

@ -0,0 +1,10 @@
import { defineConfig } from 'vite';
import path from 'path';
export default defineConfig({
resolve: {
alias: {
'mtp-wasm': path.resolve(__dirname, '../../wasm/pkg'),
},
},
});