Html Websocket Sensor

HTML / CSS / JS Open Kit Simulator ↗ All recipes

About this recipe

log{background:#1e293b;padding:14px;border-radius:10px;max-height:60vh;overflow:auto;

Libraries / imports

No imports detected

Hardware / pins

No physical pins or components referenced

Key API calls

document.getElementById() WebSocket() setInterval()

How to run

Press Render preview — renders live in a sandboxed iframe with mocked /api/*.

Editor html edits auto-save

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>WS Stream</title>
<style>body{font-family:system-ui;background:#0b1220;color:#f1f5f9;padding:24px}
#log{background:#1e293b;padding:14px;border-radius:10px;max-height:60vh;overflow:auto;
     font-family:'JetBrains Mono',monospace;font-size:.85rem}
.t{color:#7dd3fc;margin-right:8px}</style></head><body>
<h2>Live Stream</h2>
<div>Status: <span id="s">connecting...</span></div>
<div id="log"></div>
<script>
const log = document.getElementById('log'), status = document.getElementById('s');
const ws = new WebSocket('wss://echo.websocket.events');  // demo echo server
ws.onopen    = () => status.textContent = '✅ connected';
ws.onclose   = () => status.textContent = '❌ disconnected';
ws.onerror   = ()=> status.textContent = '⚠️ error';
ws.onmessage = (e) => {
  const ts = new Date().toLocaleTimeString();
  log.innerHTML += `<div><span class="t">${ts}</span>${e.data}</div>`;
  log.scrollTop = log.scrollHeight;
};
// demo — send a ping every 3 seconds
setInterval(() => { if (ws.readyState === 1) ws.send('ping ' + Date.now()); }, 3000);
</script></body></html>

Output ready

Output will appear here after you click Run.

About this recipe

Libraries / imports

Hardware / pins

Key API calls

How to run

We use cookies to make DIY KIT work.