<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BEAM Browser Chat</title>
<style>
body { font-family: sans-serif; max-width: 600px; margin: 2rem auto; }
#messages { border: 1px solid #ccc; height: 300px; overflow-y: auto; padding: 1rem; margin-bottom: 1rem; }
.msg { margin-bottom: 0.5rem; }
#msg { width: 70%; padding: 0.5rem; }
#send { padding: 0.5rem 1rem; }
</style>
</head>
<body>
<h1>BEAM Browser Chat</h1>
<p>Open this page in multiple browsers to chat in real time.</p>
<div id="messages"></div>
<input id="msg" placeholder="Type a message..." />
<button id="send">Send</button>
<script type="module">
import init, { Beam } from "./pkg/beam.js";
await init();
const beam = new Beam();
beam.connect("ws://localhost:4944");
const messagesDiv = document.getElementById("messages");
const msgInput = document.getElementById("msg");
beam.on("chat", (value) => {
const div = document.createElement("div");
div.className = "msg";
div.textContent = value;
messagesDiv.appendChild(div);
messagesDiv.scrollTop = messagesDiv.scrollHeight;
});
document.getElementById("send").onclick = () => {
const text = msgInput.value.trim();
if (!text) return;
const ts = Date.now();
beam.put(`chat.${ts}`, text);
msgInput.value = "";
};
msgInput.addEventListener("keypress", (e) => {
if (e.key === "Enter") document.getElementById("send").click();
});
</script>
</body>
</html>