Docs / Contact / sdks/javascript/examples

JavaScript SDK: Examples

Practical examples for common use cases with the Tendrl JavaScript SDK.

React Dashboard

A complete React component that displays connection status and sends/receives messages:

javascript



function DeviceDashboard() {
    const [messages, setMessages] = useState([]);
    const [sensorData, setSensorData] = useState({ temperature: 0, humidity: 0 });

    const { isConnected, publish } = useTendrlClient({
        onMessage: (msg) => {
            setMessages(prev => [...prev.slice(-49), msg]); // Keep last 50
            return true;
        },
        offlineStorage: true,
        checkMsgRate: 3000,
        checkMsgLimit: 10
    });

    const sendReading = () => {
        publish(sensorData, ['sensor', 'dashboard']);
    };

    return (
        <div>
            <h2>Device Dashboard</h2>
            <p>Status: {isConnected ? 'Online' : 'Offline'}</p>

            <div>
                <input
                    type="number"
                    value={sensorData.temperature}
                    onChange={e => setSensorData(prev => ({
                        ...prev,
                        temperature: parseFloat(e.target.value)
                    }))}
                    placeholder="Temperature"
                />
                <button onClick={sendReading}>Send</button>

            <h3>Messages ({messages.length})</h3>
            <ul>
                {messages.map((msg, i) => (
                    <li key={i}>
                        [{msg.msg_type}] {JSON.stringify(msg.data)}
                    </li>
                ))}
            </ul>
    );
}

Node.js Service

A Node.js service that collects and forwards data:

javascript



const client = new TendrlClient({
    apiKey: process.env.TENDRL_KEY,
    offlineStorage: false, // IndexedDB not available in Node
    debug: true
});

// Route inbound messages by tag
client.on({ tag: 'ai-response' }, (message) => {
    const { msg_type, data, source } = message;
    console.log(`[${msg_type}] from ${source}:`, data);
    return true;
});
client.on({ tags: ['alert', 'anomaly'] }, (message) => {
    console.log('Alert:', message.data);
    return true;
});
client.setMessageCheckRate(5000);

client.start();

// Periodic metrics
setInterval(() => {
    const mem = process.memoryUsage();
    client.publish({
        heap_used: mem.heapUsed,
        heap_total: mem.heapTotal,
        rss: mem.rss,
        uptime: process.uptime()
    }, ['metrics', 'node']);
}, 30000);

process.on('SIGINT', () => {
    client.stop();
    process.exit();
});

State Table Management

javascript


const client = new TendrlClient({ apiKey: 'your_key' });
client.start();

// Read current state
const state = await client.getState();
console.log('Current state:', state);

// Merge new data (PATCH)
await client.updateState({
    firmware: '2.1.0',
    lastSeen: new Date().toISOString()
});

// Merge with tags to trigger flows
await client.updateState(
    { status: 'active' },
    ['device', 'status-change']
);

// Replace entire state (PUT)
await client.replaceState({
    firmware: '2.1.0',
    status: 'active'
});

Heartbeat

Send system information to Contact:

javascript


await client.sendHeartbeat({
    mem_free: 8589934592,
    mem_total: 17179869184,
    disk_free: 107374182400,
    disk_size: 1073741824000
});

Data Types

The SDK accepts any JSON-serializable data:

javascript


// Object (most common)
client.publish({ key: 'value' }, ['tag']);

// String (auto-wrapped as {data: "..."})
client.publish('simple message', ['tag']);

// Array
client.publish([1, 2, 3], ['tag']);

// Nested structures
client.publish({
    sensors: [
        { id: 'temp-1', value: 23.5 },
        { id: 'temp-2', value: 24.1 }
    ],
    timestamp: new Date().toISOString()
}, ['sensor', 'batch']);

Connection Monitoring

javascript


// Check connection state
const online = await client.checkConnectionState();
console.log('Connected:', online);

// React hook provides reactive state
const { isConnected } = useTendrlClient({ ... });
// isConnected updates automatically

← Back to Contact docs