pecord/tether
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.3: WebRTC P2P via Pion (Go) + RTCPeerConnection (browser)

Browse Source 
Server: unchanged shape, just added a "signal" message type to the
existing /api/send + /api/stream bus. Now carries both "clipboard"
(payload) and "signal" (offer/answer/ICE) over the same envelope.

Client: -rtc flag turns the Go listener into a Pion peer. Posts an SDP
offer at startup, accepts the browser's answer through the signaling
bus, exchanges ICE, then receives clipboard text over a DataChannel
named "tether". On message: writes to OS clipboard same as SSE path.

Web UI: acts as the answerer. Listens for "signal" SSE events, replies
to offers, exchanges ICE. When DataChannel opens, the send button uses
RTCDataChannel.send() instead of POST /api/send — data no longer
traverses the server after pairing. Pill in the header flips
sse → negotiating → rtc to make this visible.

Toolchain: bumped go.mod to go 1.26, switched to pion/webrtc v4 and
prometheus/client_golang v1.23.x.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.7
2026-05-21 00:37:31 -05:00
parent 80539ae60c
commit 98dc2ca2a6
5 changed files with 421 additions and 301 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
server/web/index.html
View File

@@ -19,6 +19,12 @@
header { display: flex; align-items: baseline; gap: 8px; }
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.live { background: #052e16; color: #4ade80; }
.pill.connecting { background: #1f2937; color: #fbbf24; }
.row { display: flex; flex-direction: column; gap: 6px; }
label { font-size: 11px; color: #888; letter-spacing: 0.4px; text-transform: uppercase; }
textarea {
@@ -56,6 +62,7 @@
max-height: 200px; overflow: auto;
}
.meta { font-size: 11px; color: #666; margin-top: 4px; }
.meta .rtc-badge { color: #4ade80; }
footer {
margin-top: auto; padding-top: 8px;
font-size: 11px; color: #555; text-align: center;
@@ -67,6 +74,7 @@
<header>
<h1>tether</h1>
<span class="tag">phone ↔ laptop</span>
<span class="pill" id="rtcPill">sse</span>
</header>
<div class="row">
@@ -86,21 +94,41 @@
</div>
<footer>
<a href="https://gitea.pecord.io/pecord/tether">tether on gitea</a> · v0.1
<a href="https://gitea.pecord.io/pecord/tether">tether on gitea</a> · v0.3
</footer>
<script>
const $ = (id) => document.getElementById(id);
const peerID = "tether-browser-" + Math.random().toString(36).slice(2, 8);
let rtcChannel = null; // open RTCDataChannel, when we have one
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 addIncoming(text, source, ts, viaRTC) {
const el = document.createElement("div");
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);
}
$("pasteBtn").addEventListener("click", async () => {
try {
const text = await navigator.clipboard.readText();
$("out").value = text;
$("out").value = await navigator.clipboard.readText();
status("pasted from clipboard", "ok");
} catch (e) {
status("clipboard read denied — paste manually", "err");
@@ -110,38 +138,91 @@
$("sendBtn").addEventListener("click", async () => {
const text = $("out").value;
if (!text) { status("empty", "err"); return; }
status("sending…");
try {
const r = await fetch("/api/send", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ text }),
});
if (r.ok) {
status("delivered ✓", "ok");
} else {
status("server returned " + r.status, "err");
}
} catch (e) {
status("network error", "err");
if (rtcChannel && rtcChannel.readyState === "open") {
rtcChannel.send(text);
status("sent via rtc ✓", "ok");
} else {
status("sending via http…");
try {
const r = await fetch("/api/send", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ type: "clipboard", text, source: "phone" }),
});
status(r.ok ? "delivered ✓" : "server returned " + r.status, r.ok ? "ok" : "err");
} catch (e) { status("network error", "err"); }
}
});
// SSE: receive incoming messages from clients
// ── WebRTC peer ────────────────────────────────────────────────────────
// Browser acts as ANSWERER. Listens for offers via SSE, replies via /api/send.
async function postSignal(payload) {
await fetch("/api/send", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
type: "signal",
from: peerID,
source: "phone",
signal: JSON.stringify(payload),
}),
});
}
let pc = null;
async function handleOffer(sdp) {
if (pc) try { pc.close(); } catch (_) {}
pc = new RTCPeerConnection({
iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
});
setPill("negotiating");
pc.onicecandidate = (ev) => {
if (ev.candidate) postSignal({ kind: "ice", candidate: ev.candidate.toJSON() });
};
pc.onconnectionstatechange = () => {
if (pc.connectionState === "connected") setPill("rtc");
else if (pc.connectionState === "failed" || pc.connectionState === "disconnected") setPill("sse");
};
pc.ondatachannel = (ev) => {
const ch = ev.channel;
ch.onopen = () => { rtcChannel = ch; setPill("rtc"); };
ch.onclose = () => { rtcChannel = null; setPill("sse"); };
ch.onmessage = (m) => addIncoming(m.data, "laptop", Date.now(), true);
};
await pc.setRemoteDescription({ type: "offer", sdp });
const answer = await pc.createAnswer();
await pc.setLocalDescription(answer);
await postSignal({ kind: "answer", sdp: answer });
}
async function handleIceCandidate(candidate) {
if (pc) {
try { await pc.addIceCandidate(candidate); } catch (e) {}
}
}
// ── SSE main feed ──────────────────────────────────────────────────────
function connectFeed() {
const es = new EventSource("/api/stream");
es.addEventListener("clipboard", (ev) => {
try {
const m = JSON.parse(ev.data);
const el = document.createElement("div");
el.className = "msg";
el.textContent = m.text;
const meta = document.createElement("div");
meta.className = "meta";
meta.textContent = (m.source || "client") + " @ " + new Date(m.ts).toLocaleTimeString();
el.appendChild(meta);
const feed = $("incoming");
feed.insertBefore(el, feed.firstChild);
if (m.source !== "phone") {
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; // ignore our own
let payload = m.signal;
if (typeof payload === "string") payload = JSON.parse(payload);
if (payload.kind === "offer" && payload.sdp) {
handleOffer(payload.sdp.sdp);
} else if (payload.kind === "ice" && payload.candidate) {
handleIceCandidate(payload.candidate);
}
} catch (e) {}
});
es.onerror = () => setTimeout(connectFeed, 2000);