v0.5: stateless room-based sessions with QR pairing
The single shared mesh is replaced by per-session rooms. Visit / and the server mints a random 8-hex-char id, redirects to /r/<id>. That URL IS the session — share the link (or scan the QR code now shown on the page) on another device to join the same room. Bus is now sharded per room. Rooms are created implicitly on first subscribe and GC'd 5 minutes after the last subscriber leaves. No accounts, no persistence, no server-side state beyond the in-memory bus map. Server: - New endpoints: /, /r/<id>, /api/send?room=, /api/stream?room= - Room manager with lazy creation + idle GC - Metrics now labelled by room - New gauge tether_active_rooms Client (Go): - -room flag (accepts bare id OR full /r/<id> URL — paste-friendly) - All API calls now scope to the room - The always-on ct210-rtc-peer systemd unit is disabled — sessions are user-initiated; the user runs tether-client with -room when they want their laptop in a particular session Browser (HTML): - Reads room from /r/<id> path - Shows QR code + URL + "copy link" button at top - "+ new session" link in header to start a fresh room Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.7
@@ -16,17 +16,46 @@
|
||||
padding: 18px 16px env(safe-area-inset-bottom);
|
||||
gap: 14px;
|
||||
}
|
||||
header { display: flex; align-items: baseline; gap: 8px; }
|
||||
header { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
|
||||
h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.5px; }
|
||||
.tag { font-size: 11px; color: #888; letter-spacing: 0.5px; text-transform: uppercase; }
|
||||
.pill {
|
||||
font-size: 10px; padding: 2px 8px; border-radius: 999px;
|
||||
background: #1f1f1f; color: #888; letter-spacing: 0.4px;
|
||||
}
|
||||
.pill { font-size: 10px; padding: 2px 8px; border-radius: 999px; background: #1f1f1f; color: #888; letter-spacing: 0.4px; }
|
||||
.pill.live { background: #052e16; color: #4ade80; }
|
||||
.pill.connecting { background: #1f2937; color: #fbbf24; }
|
||||
.room {
|
||||
font: 12px ui-monospace, "SF Mono", monospace;
|
||||
padding: 2px 8px; border-radius: 6px;
|
||||
background: #1a1a1a; color: #a3a3a3;
|
||||
cursor: pointer; user-select: all;
|
||||
}
|
||||
.room:hover { color: #f5f5f5; }
|
||||
.row { display: flex; flex-direction: column; gap: 6px; }
|
||||
label { font-size: 11px; color: #888; letter-spacing: 0.4px; text-transform: uppercase; }
|
||||
|
||||
.share {
|
||||
display: flex; gap: 12px; align-items: center;
|
||||
background: #131313; border: 1px solid #1f1f1f; border-radius: 10px;
|
||||
padding: 12px;
|
||||
}
|
||||
.share .qr {
|
||||
width: 110px; height: 110px;
|
||||
flex-shrink: 0;
|
||||
background: #fff; padding: 8px; border-radius: 6px;
|
||||
}
|
||||
.share .qr img { width: 100%; height: 100%; }
|
||||
.share .info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
|
||||
.share .info small { color: #888; font-size: 11px; letter-spacing: 0.4px; text-transform: uppercase; }
|
||||
.share .info .url {
|
||||
font: 13px ui-monospace, "SF Mono", monospace; color: #d4d4d4;
|
||||
word-break: break-all; user-select: all;
|
||||
}
|
||||
.share .info button {
|
||||
align-self: flex-start; font-size: 12px; padding: 6px 12px;
|
||||
background: #1a1a1a; color: #d4d4d4;
|
||||
border: 1px solid #2a2a2a; border-radius: 6px; cursor: pointer;
|
||||
}
|
||||
.share .info button:hover { background: #222; }
|
||||
|
||||
textarea {
|
||||
width: 100%; min-height: 130px; resize: vertical;
|
||||
font: 15px -apple-system, ui-monospace, "SF Mono", monospace;
|
||||
@@ -63,7 +92,7 @@
|
||||
}
|
||||
.meta { font-size: 11px; color: #666; margin-top: 4px; }
|
||||
.meta .rtc-badge { color: #4ade80; }
|
||||
.peers { font-size: 11px; color: #666; margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; }
|
||||
.peers { font-size: 11px; color: #666; display: flex; flex-wrap: wrap; gap: 6px; }
|
||||
.peers .peer { background: #131313; padding: 2px 8px; border-radius: 999px; border: 1px solid #1f1f1f; }
|
||||
.peers .peer.rtc { color: #4ade80; border-color: #052e16; }
|
||||
footer {
|
||||
@@ -78,8 +107,19 @@
|
||||
<h1>tether</h1>
|
||||
<span class="tag">mesh clipboard</span>
|
||||
<span class="pill" id="rtcPill">sse</span>
|
||||
<span class="room" id="roomTag" title="room id">…</span>
|
||||
<a href="/" style="margin-left:auto; font-size:11px; color:#888;">+ new session</a>
|
||||
</header>
|
||||
|
||||
<div class="share">
|
||||
<div class="qr"><img id="qrImg" alt="QR" /></div>
|
||||
<div class="info">
|
||||
<small>scan to join this session</small>
|
||||
<div class="url" id="sessionUrl">…</div>
|
||||
<button id="copyBtn">copy link</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="peers" id="peerList"></div>
|
||||
|
||||
<div class="row">
|
||||
@@ -99,32 +139,41 @@
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<a href="https://gitea.pecord.io/pecord/tether">tether on gitea</a> · v0.4
|
||||
<a href="https://gitea.pecord.io/pecord/tether">tether on gitea</a> · v0.5
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const $ = (id) => document.getElementById(id);
|
||||
const peerID = "browser-" + Array.from(crypto.getRandomValues(new Uint8Array(6))).map(b=>b.toString(16).padStart(2,"0")).join("");
|
||||
const remotePeers = new Map(); // remoteID -> {pc, dc, lastSeen, status}
|
||||
|
||||
const status = (msg, cls) => {
|
||||
const s = $("status");
|
||||
s.textContent = msg;
|
||||
s.className = "status" + (cls ? " " + cls : "");
|
||||
};
|
||||
const setPill = (mode) => {
|
||||
const p = $("rtcPill");
|
||||
p.textContent = mode;
|
||||
p.className = "pill " + (mode === "rtc" ? "live" : mode === "negotiating" ? "connecting" : "");
|
||||
};
|
||||
// ── Session room ──────────────────────────────────────────────────────
|
||||
// URL is /r/<id>. If somehow we don't have one, redirect home (server will mint).
|
||||
const roomMatch = window.location.pathname.match(/^\/r\/([a-zA-Z0-9_-]+)/);
|
||||
if (!roomMatch) { window.location.replace("/"); }
|
||||
const room = roomMatch ? roomMatch[1] : "";
|
||||
const fullUrl = window.location.origin + "/r/" + room;
|
||||
const peerID = "browser-" + Array.from(crypto.getRandomValues(new Uint8Array(6))).map(b=>b.toString(16).padStart(2,"0")).join("");
|
||||
|
||||
$("roomTag").textContent = room;
|
||||
$("sessionUrl").textContent = fullUrl;
|
||||
$("qrImg").src = "https://api.qrserver.com/v1/create-qr-code/?size=240x240&margin=0&data=" + encodeURIComponent(fullUrl);
|
||||
|
||||
$("copyBtn").addEventListener("click", async () => {
|
||||
try { await navigator.clipboard.writeText(fullUrl); status("link copied ✓", "ok"); }
|
||||
catch (e) { status("clipboard denied", "err"); }
|
||||
});
|
||||
|
||||
// ── State ─────────────────────────────────────────────────────────────
|
||||
const remotePeers = new Map();
|
||||
|
||||
const status = (msg, cls) => { const s = $("status"); s.textContent = msg; s.className = "status" + (cls ? " " + cls : ""); };
|
||||
const setPill = (mode) => { const p = $("rtcPill"); p.textContent = mode; p.className = "pill " + (mode === "rtc" ? "live" : mode === "negotiating" ? "connecting" : ""); };
|
||||
function refreshPill() {
|
||||
let anyRTC = false;
|
||||
let anyConnecting = false;
|
||||
let anyRTC = false, anyConn = false;
|
||||
for (const r of remotePeers.values()) {
|
||||
if (r.dc && r.dc.readyState === "open") anyRTC = true;
|
||||
else if (r.status === "connecting" || r.status === "new") anyConnecting = true;
|
||||
else if (r.status === "connecting" || r.status === "new") anyConn = true;
|
||||
}
|
||||
setPill(anyRTC ? "rtc" : (anyConnecting ? "negotiating" : "sse"));
|
||||
setPill(anyRTC ? "rtc" : (anyConn ? "negotiating" : "sse"));
|
||||
}
|
||||
function renderPeers() {
|
||||
const el = $("peerList");
|
||||
@@ -139,48 +188,37 @@
|
||||
|
||||
function addIncoming(text, source, ts, viaRTC) {
|
||||
const el = document.createElement("div");
|
||||
el.className = "msg";
|
||||
el.textContent = text;
|
||||
el.className = "msg"; el.textContent = text;
|
||||
const meta = document.createElement("div");
|
||||
meta.className = "meta";
|
||||
const badge = viaRTC ? '<span class="rtc-badge">via rtc</span> · ' : '';
|
||||
meta.innerHTML = badge + (source || "client") + " @ " + new Date(ts || Date.now()).toLocaleTimeString();
|
||||
el.appendChild(meta);
|
||||
const feed = $("incoming");
|
||||
feed.insertBefore(el, feed.firstChild);
|
||||
$("incoming").insertBefore(el, $("incoming").firstChild);
|
||||
}
|
||||
|
||||
// ── Send ──────────────────────────────────────────────────────────────
|
||||
$("pasteBtn").addEventListener("click", async () => {
|
||||
try {
|
||||
$("out").value = await navigator.clipboard.readText();
|
||||
status("pasted from clipboard", "ok");
|
||||
} catch (e) {
|
||||
status("clipboard read denied — paste manually", "err");
|
||||
}
|
||||
try { $("out").value = await navigator.clipboard.readText(); status("pasted from clipboard", "ok"); }
|
||||
catch (e) { status("clipboard read denied — paste manually", "err"); }
|
||||
});
|
||||
|
||||
$("sendBtn").addEventListener("click", async () => {
|
||||
const text = $("out").value;
|
||||
if (!text) { status("empty", "err"); return; }
|
||||
|
||||
// Fan out to all open DataChannels first
|
||||
let rtcSent = 0;
|
||||
for (const r of remotePeers.values()) {
|
||||
if (r.dc && r.dc.readyState === "open") {
|
||||
try { r.dc.send(text); rtcSent++; } catch (e) {}
|
||||
}
|
||||
}
|
||||
if (rtcSent > 0) {
|
||||
status(`sent via rtc to ${rtcSent} peer(s) ✓`, "ok");
|
||||
return;
|
||||
}
|
||||
// Fallback to HTTP for anyone not RTC-paired
|
||||
if (rtcSent > 0) { status(`sent via rtc to ${rtcSent} peer(s) ✓`, "ok"); return; }
|
||||
status("sending via http…");
|
||||
try {
|
||||
const r = await fetch("/api/send", {
|
||||
const r = await fetch("/api/send?room=" + room, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ type: "clipboard", text, source: "web", from: peerID }),
|
||||
body: JSON.stringify({ type: "clipboard", text, source: "web", from: peerID, room }),
|
||||
});
|
||||
status(r.ok ? "delivered ✓" : "server returned " + r.status, r.ok ? "ok" : "err");
|
||||
} catch (e) { status("network error", "err"); }
|
||||
@@ -190,45 +228,30 @@
|
||||
async function postMessage(m) {
|
||||
m.from = m.from || peerID;
|
||||
m.source = m.source || "web";
|
||||
await fetch("/api/send", {
|
||||
m.room = room;
|
||||
await fetch("/api/send?room=" + room, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(m),
|
||||
});
|
||||
}
|
||||
async function postSignal(toID, payload) {
|
||||
await postMessage({ type: "signal", to: toID, signal: payload });
|
||||
}
|
||||
async function postSignal(toID, payload) { await postMessage({ type: "signal", to: toID, signal: payload }); }
|
||||
|
||||
// We accept incoming offers (we're the answerer). Create a fresh PC per
|
||||
// remote peer.
|
||||
async function handleOffer(fromID, sdp) {
|
||||
// If we already have a pc for this peer, close it (re-negotiate).
|
||||
let r = remotePeers.get(fromID);
|
||||
if (r && r.pc) { try { r.pc.close(); } catch (_) {} }
|
||||
|
||||
const pc = new RTCPeerConnection({
|
||||
iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
|
||||
});
|
||||
const pc = new RTCPeerConnection({ iceServers: [{ urls: "stun:stun.l.google.com:19302" }] });
|
||||
r = { pc, dc: null, lastSeen: Date.now(), status: "new" };
|
||||
remotePeers.set(fromID, r);
|
||||
refreshPill();
|
||||
renderPeers();
|
||||
refreshPill(); renderPeers();
|
||||
|
||||
pc.onicecandidate = (ev) => {
|
||||
if (ev.candidate) postSignal(fromID, { kind: "ice", candidate: ev.candidate.toJSON() });
|
||||
};
|
||||
pc.onicecandidate = (ev) => { if (ev.candidate) postSignal(fromID, { kind: "ice", candidate: ev.candidate.toJSON() }); };
|
||||
pc.onconnectionstatechange = () => {
|
||||
r.status = pc.connectionState;
|
||||
refreshPill();
|
||||
renderPeers();
|
||||
if (pc.connectionState === "failed" || pc.connectionState === "closed") {
|
||||
remotePeers.delete(fromID);
|
||||
}
|
||||
r.status = pc.connectionState; refreshPill(); renderPeers();
|
||||
if (pc.connectionState === "failed" || pc.connectionState === "closed") remotePeers.delete(fromID);
|
||||
};
|
||||
pc.ondatachannel = (ev) => {
|
||||
const ch = ev.channel;
|
||||
r.dc = ch;
|
||||
const ch = ev.channel; r.dc = ch;
|
||||
ch.onopen = () => { refreshPill(); renderPeers(); };
|
||||
ch.onclose = () => { refreshPill(); renderPeers(); };
|
||||
ch.onmessage = (m) => addIncoming(m.data, fromID.slice(0, 12), Date.now(), true);
|
||||
@@ -242,42 +265,31 @@
|
||||
|
||||
async function handleIce(fromID, candidate) {
|
||||
const r = remotePeers.get(fromID);
|
||||
if (r && r.pc) {
|
||||
try { await r.pc.addIceCandidate(candidate); } catch (e) {}
|
||||
}
|
||||
if (r && r.pc) { try { await r.pc.addIceCandidate(candidate); } catch (e) {} }
|
||||
}
|
||||
|
||||
// ── Presence chirp ────────────────────────────────────────────────────
|
||||
setInterval(() => {
|
||||
postMessage({ type: "presence", role: "browser" }).catch(() => {});
|
||||
}, 10000);
|
||||
// also do one immediately on load
|
||||
setInterval(() => { postMessage({ type: "presence", role: "browser" }).catch(() => {}); }, 10000);
|
||||
postMessage({ type: "presence", role: "browser" }).catch(() => {});
|
||||
|
||||
// ── SSE main feed ──────────────────────────────────────────────────────
|
||||
function connectFeed() {
|
||||
const es = new EventSource("/api/stream");
|
||||
const es = new EventSource("/api/stream?room=" + room);
|
||||
es.addEventListener("clipboard", (ev) => {
|
||||
try {
|
||||
const m = JSON.parse(ev.data);
|
||||
if (m.from !== peerID) addIncoming(m.text, m.source, m.ts, false);
|
||||
} catch (e) {}
|
||||
try { const m = JSON.parse(ev.data); if (m.from !== peerID) addIncoming(m.text, m.source, m.ts, false); }
|
||||
catch (e) {}
|
||||
});
|
||||
es.addEventListener("signal", (ev) => {
|
||||
try {
|
||||
const m = JSON.parse(ev.data);
|
||||
if (m.from === peerID) return;
|
||||
if (m.to && m.to !== peerID) return; // not for us
|
||||
const payload = m.signal;
|
||||
if (!payload) return;
|
||||
if (payload.kind === "offer" && payload.sdp) handleOffer(m.from, payload.sdp.sdp);
|
||||
else if (payload.kind === "ice" && payload.candidate) handleIce(m.from, payload.candidate);
|
||||
if (m.to && m.to !== peerID) return;
|
||||
const p = m.signal;
|
||||
if (!p) return;
|
||||
if (p.kind === "offer" && p.sdp) handleOffer(m.from, p.sdp.sdp);
|
||||
else if (p.kind === "ice" && p.candidate) handleIce(m.from, p.candidate);
|
||||
} catch (e) {}
|
||||
});
|
||||
es.addEventListener("presence", (ev) => {
|
||||
// Browsers just note presence; peers (Go side) act on it.
|
||||
// We could render a "peer online" indicator here later.
|
||||
});
|
||||
es.onerror = () => setTimeout(connectFeed, 2000);
|
||||
}
|
||||
connectFeed();
|
||||
|
||||
Reference in New Issue
Block a user