WASM
This commit is contained in:
parent
ade0c3cde4
commit
298253d6fa
31 changed files with 2899 additions and 276 deletions
20
example-usage/web-client/index.html
Normal file
20
example-usage/web-client/index.html
Normal 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
1041
example-usage/web-client/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
15
example-usage/web-client/package.json
Normal file
15
example-usage/web-client/package.json
Normal 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"
|
||||
}
|
||||
}
|
||||
110
example-usage/web-client/src/main.ts
Normal file
110
example-usage/web-client/src/main.ts
Normal 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);
|
||||
});
|
||||
26
example-usage/web-client/src/messages.ts
Normal file
26
example-usage/web-client/src/messages.ts
Normal 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());
|
||||
}
|
||||
18
example-usage/web-client/tsconfig.json
Normal file
18
example-usage/web-client/tsconfig.json
Normal 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"]
|
||||
}
|
||||
10
example-usage/web-client/vite.config.ts
Normal file
10
example-usage/web-client/vite.config.ts
Normal 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'),
|
||||
},
|
||||
},
|
||||
});
|
||||
Loading…
Reference in a new issue