<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AgentLink SDK WASM Example</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background: #f5f5f5;
}
h1 {
color: #333;
}
.section {
background: white;
padding: 20px;
margin: 20px 0;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
button {
background: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
margin: 5px;
}
button:hover {
background: #0056b3;
}
button:disabled {
background: #ccc;
cursor: not-allowed;
}
input {
padding: 8px;
margin: 5px;
border: 1px solid #ddd;
border-radius: 4px;
width: 200px;
}
.log {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 4px;
padding: 10px;
margin-top: 10px;
max-height: 300px;
overflow-y: auto;
font-family: monospace;
font-size: 12px;
}
.log-entry {
margin: 2px 0;
padding: 2px 0;
}
.log-entry.error { color: #dc3545; }
.log-entry.success { color: #28a745; }
.log-entry.info { color: #17a2b8; }
</style>
</head>
<body>
<h1>🚀 AgentLink SDK WASM Demo</h1>
<div class="section">
<h2>SDK Info</h2>
<p>Version: <span id="version">Loading...</span></p>
<button id="btn-init">Initialize SDK</button>
</div>
<div class="section">
<h2>HTTP Client</h2>
<input type="text" id="base-url" placeholder="https://api.example.com" value="https://api.example.com">
<input type="text" id="auth-token" placeholder="Auth Token (optional)">
<br>
<button id="btn-create-http">Create HTTP Client</button>
<button id="btn-test-get" disabled>Test GET /users/me</button>
</div>
<div class="section">
<h2>MQTT Client</h2>
<input type="text" id="mqtt-url" placeholder="wss://mqtt.example.com/mqtt" value="wss://mqtt.example.com/mqtt">
<input type="text" id="client-id" placeholder="Client ID" value="web-client-1">
<br>
<button id="btn-create-mqtt">Create MQTT Client</button>
<button id="btn-connect" disabled>Connect</button>
<button id="btn-disconnect" disabled>Disconnect</button>
<br><br>
<input type="text" id="topic" placeholder="Topic" value="chat/room/1">
<input type="text" id="message" placeholder="Message" value="Hello, World!">
<br>
<button id="btn-subscribe" disabled>Subscribe</button>
<button id="btn-publish" disabled>Publish</button>
<p>Connection State: <span id="conn-state">disconnected</span></p>
</div>
<div class="section">
<h2>Log</h2>
<button id="btn-clear">Clear Log</button>
<div id="log" class="log"></div>
</div>
<script type="module">
import init, {
JsHttpClient,
JsMqttClient,
getVersion,
init as sdkInit,
loginWithEmailCode
} from './pkg/agentlink_wasm.js';
let httpClient = null;
let mqttClient = null;
let initialized = false;
function log(message, type = 'info') {
const logEl = document.getElementById('log');
const entry = document.createElement('div');
entry.className = `log-entry ${type}`;
entry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
logEl.appendChild(entry);
logEl.scrollTop = logEl.scrollHeight;
}
async function initialize() {
try {
await init();
sdkInit();
initialized = true;
document.getElementById('version').textContent = getVersion();
log('SDK initialized successfully', 'success');
} catch (e) {
log(`Failed to initialize: ${e}`, 'error');
}
}
function createHttpClient() {
if (!initialized) {
log('Please initialize SDK first', 'error');
return;
}
const baseUrl = document.getElementById('base-url').value;
httpClient = new JsHttpClient(baseUrl);
const token = document.getElementById('auth-token').value;
if (token) {
httpClient.setAuthToken(token);
}
log(`HTTP client created for ${baseUrl}`, 'success');
document.getElementById('btn-test-get').disabled = false;
}
async function testGet() {
if (!httpClient) {
log('Create HTTP client first', 'error');
return;
}
try {
log('Sending GET request...');
const response = await httpClient.get('/users/me');
log(`Response: ${JSON.stringify(response)}`, 'success');
} catch (e) {
log(`Error: ${e}`, 'error');
}
}
function createMqttClient() {
if (!initialized) {
log('Please initialize SDK first', 'error');
return;
}
mqttClient = new JsMqttClient();
mqttClient.onEvent((event) => {
log(`MQTT Event: ${JSON.stringify(event)}`, 'info');
updateConnectionState();
});
log('MQTT client created', 'success');
document.getElementById('btn-connect').disabled = false;
}
async function connectMqtt() {
if (!mqttClient) {
log('Create MQTT client first', 'error');
return;
}
const brokerUrl = document.getElementById('mqtt-url').value;
const clientId = document.getElementById('client-id').value;
try {
log(`Connecting to ${brokerUrl}...`);
await mqttClient.connect(brokerUrl, clientId, null);
log('Connected successfully', 'success');
updateConnectionState();
document.getElementById('btn-disconnect').disabled = false;
document.getElementById('btn-subscribe').disabled = false;
document.getElementById('btn-publish').disabled = false;
} catch (e) {
log(`Connection failed: ${e}`, 'error');
}
}
async function disconnectMqtt() {
if (!mqttClient) return;
try {
await mqttClient.disconnect();
log('Disconnected', 'success');
updateConnectionState();
document.getElementById('btn-subscribe').disabled = true;
document.getElementById('btn-publish').disabled = true;
} catch (e) {
log(`Disconnect error: ${e}`, 'error');
}
}
async function subscribe() {
if (!mqttClient) return;
const topic = document.getElementById('topic').value;
try {
await mqttClient.subscribe(topic, 1);
log(`Subscribed to ${topic}`, 'success');
} catch (e) {
log(`Subscribe error: ${e}`, 'error');
}
}
async function publish() {
if (!mqttClient) return;
const topic = document.getElementById('topic').value;
const message = document.getElementById('message').value;
try {
const payload = new TextEncoder().encode(message);
await mqttClient.publish(topic, payload, 1);
log(`Published to ${topic}: ${message}`, 'success');
} catch (e) {
log(`Publish error: ${e}`, 'error');
}
}
function updateConnectionState() {
if (mqttClient) {
const state = mqttClient.getConnectionState();
document.getElementById('conn-state').textContent = state;
}
}
document.getElementById('btn-init').addEventListener('click', initialize);
document.getElementById('btn-create-http').addEventListener('click', createHttpClient);
document.getElementById('btn-test-get').addEventListener('click', testGet);
document.getElementById('btn-create-mqtt').addEventListener('click', createMqttClient);
document.getElementById('btn-connect').addEventListener('click', connectMqtt);
document.getElementById('btn-disconnect').addEventListener('click', disconnectMqtt);
document.getElementById('btn-subscribe').addEventListener('click', subscribe);
document.getElementById('btn-publish').addEventListener('click', publish);
document.getElementById('btn-clear').addEventListener('click', () => {
document.getElementById('log').innerHTML = '';
});
initialize();
</script>
</body>
</html>