v0.1: HTTP+SSE broadcast bus + phone web UI + Linux client
Single Go module with two binaries (server, client) and an embedded phone UI. MVP transport is HTTP POST → SSE fanout; the roadmap calls for upgrading to WebRTC P2P with Sign in with Apple for identity, mDNS for discovery, and OS clipboard hooks. - server/: Go HTTP server, embedded index.html, broadcast bus with short replay history, SSE stream endpoint, single-binary deploy. - client/: subscribes to SSE feed and prints messages; -send for one-shot publish from CLI. No OS clipboard touched yet (v0.5). - web/index.html: dark phone-first UI, paste-clipboard button (uses navigator.clipboard.readText), live feed of incoming messages via EventSource. This commit is intentionally tiny — it proves the end-to-end shape so the WebRTC/SiwA/mDNS pieces can be added incrementally without restructuring. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.7
153
server/main.go
Normal file
153
server/main.go
Normal file
@@ -0,0 +1,153 @@
|
||||
// tether-server: HTTP+SSE relay for phone↔client clipboard sync.
|
||||
// MVP: single broadcast bus, no auth, no rendezvous, no WebRTC yet.
|
||||
package main
|
||||
|
||||
import (
|
||||
"embed"
|
||||
"encoding/json"
|
||||
"flag"
|
||||
"fmt"
|
||||
"io/fs"
|
||||
"log"
|
||||
"net/http"
|
||||
"sync"
|
||||
"time"
|
||||
)
|
||||
|
||||
//go:embed web/index.html
|
||||
var webFS embed.FS
|
||||
|
||||
type Message struct {
|
||||
Text string `json:"text"`
|
||||
Source string `json:"source,omitempty"`
|
||||
TS int64 `json:"ts"`
|
||||
}
|
||||
|
||||
type bus struct {
|
||||
mu sync.Mutex
|
||||
clients map[chan Message]string // chan → label
|
||||
history []Message // last N (for new subscribers)
|
||||
}
|
||||
|
||||
func newBus() *bus {
|
||||
return &bus{clients: map[chan Message]string{}}
|
||||
}
|
||||
|
||||
func (b *bus) subscribe(label string) chan Message {
|
||||
ch := make(chan Message, 16)
|
||||
b.mu.Lock()
|
||||
b.clients[ch] = label
|
||||
// replay last few so newcomers see something
|
||||
for _, m := range b.history {
|
||||
select {
|
||||
case ch <- m:
|
||||
default:
|
||||
}
|
||||
}
|
||||
b.mu.Unlock()
|
||||
return ch
|
||||
}
|
||||
|
||||
func (b *bus) unsubscribe(ch chan Message) {
|
||||
b.mu.Lock()
|
||||
delete(b.clients, ch)
|
||||
b.mu.Unlock()
|
||||
close(ch)
|
||||
}
|
||||
|
||||
func (b *bus) publish(m Message) {
|
||||
b.mu.Lock()
|
||||
defer b.mu.Unlock()
|
||||
b.history = append(b.history, m)
|
||||
if len(b.history) > 10 {
|
||||
b.history = b.history[len(b.history)-10:]
|
||||
}
|
||||
for ch := range b.clients {
|
||||
select {
|
||||
case ch <- m:
|
||||
default: // drop on slow consumer
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
func main() {
|
||||
addr := flag.String("addr", ":8765", "listen address")
|
||||
flag.Parse()
|
||||
|
||||
b := newBus()
|
||||
|
||||
// Serve embedded HTML
|
||||
sub, _ := fs.Sub(webFS, "web")
|
||||
mux := http.NewServeMux()
|
||||
mux.Handle("/", http.FileServer(http.FS(sub)))
|
||||
|
||||
// POST /api/send — accept a message, broadcast to subscribers
|
||||
mux.HandleFunc("/api/send", func(w http.ResponseWriter, r *http.Request) {
|
||||
if r.Method != http.MethodPost {
|
||||
http.Error(w, "POST only", http.StatusMethodNotAllowed)
|
||||
return
|
||||
}
|
||||
var m Message
|
||||
if err := json.NewDecoder(r.Body).Decode(&m); err != nil {
|
||||
http.Error(w, "bad json", http.StatusBadRequest)
|
||||
return
|
||||
}
|
||||
if m.Source == "" {
|
||||
m.Source = r.Header.Get("X-Tether-Source")
|
||||
if m.Source == "" {
|
||||
m.Source = "phone"
|
||||
}
|
||||
}
|
||||
m.TS = time.Now().UnixMilli()
|
||||
b.publish(m)
|
||||
log.Printf("publish: %s len=%d", m.Source, len(m.Text))
|
||||
w.WriteHeader(http.StatusNoContent)
|
||||
})
|
||||
|
||||
// GET /api/stream — SSE feed of all published messages
|
||||
mux.HandleFunc("/api/stream", func(w http.ResponseWriter, r *http.Request) {
|
||||
fl, ok := w.(http.Flusher)
|
||||
if !ok {
|
||||
http.Error(w, "no flusher", http.StatusInternalServerError)
|
||||
return
|
||||
}
|
||||
w.Header().Set("Content-Type", "text/event-stream")
|
||||
w.Header().Set("Cache-Control", "no-cache")
|
||||
w.Header().Set("Connection", "keep-alive")
|
||||
w.Header().Set("X-Accel-Buffering", "no")
|
||||
|
||||
label := r.Header.Get("X-Tether-Client")
|
||||
if label == "" {
|
||||
label = r.RemoteAddr
|
||||
}
|
||||
ch := b.subscribe(label)
|
||||
defer b.unsubscribe(ch)
|
||||
log.Printf("subscribe: %s", label)
|
||||
|
||||
// keepalive
|
||||
ka := time.NewTicker(30 * time.Second)
|
||||
defer ka.Stop()
|
||||
|
||||
for {
|
||||
select {
|
||||
case <-r.Context().Done():
|
||||
log.Printf("unsubscribe: %s", label)
|
||||
return
|
||||
case m := <-ch:
|
||||
bs, _ := json.Marshal(m)
|
||||
fmt.Fprintf(w, "event: clipboard\ndata: %s\n\n", bs)
|
||||
fl.Flush()
|
||||
case <-ka.C:
|
||||
fmt.Fprintf(w, ": keepalive\n\n")
|
||||
fl.Flush()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
mux.HandleFunc("/healthz", func(w http.ResponseWriter, r *http.Request) {
|
||||
w.Write([]byte("ok"))
|
||||
})
|
||||
|
||||
log.Printf("tether-server listening on %s", *addr)
|
||||
log.Fatal(http.ListenAndServe(*addr, mux))
|
||||
}
|
||||
152
server/web/index.html
Normal file
152
server/web/index.html
Normal file
@@ -0,0 +1,152 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
|
||||
<meta name="theme-color" content="#0a0a0a" />
|
||||
<title>tether</title>
|
||||
<style>
|
||||
:root { color-scheme: dark; }
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; height: 100%; }
|
||||
body {
|
||||
font: 15px -apple-system, "SF Pro Text", system-ui, sans-serif;
|
||||
background: #0a0a0a; color: #e5e5e5;
|
||||
display: flex; flex-direction: column;
|
||||
padding: 18px 16px env(safe-area-inset-bottom);
|
||||
gap: 14px;
|
||||
}
|
||||
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; }
|
||||
.row { display: flex; flex-direction: column; gap: 6px; }
|
||||
label { font-size: 11px; color: #888; letter-spacing: 0.4px; text-transform: uppercase; }
|
||||
textarea {
|
||||
width: 100%; min-height: 130px; resize: vertical;
|
||||
font: 15px -apple-system, ui-monospace, "SF Mono", monospace;
|
||||
background: #161616; color: #f5f5f5;
|
||||
border: 1px solid #232323; border-radius: 10px;
|
||||
padding: 12px; outline: none;
|
||||
}
|
||||
textarea:focus { border-color: #3a3a3a; }
|
||||
.actions { display: flex; gap: 8px; }
|
||||
button {
|
||||
flex: 1; padding: 12px 16px; font: 600 14px -apple-system, system-ui, sans-serif;
|
||||
background: #1a1a1a; color: #f5f5f5;
|
||||
border: 1px solid #2a2a2a; border-radius: 10px;
|
||||
cursor: pointer; transition: background 0.15s;
|
||||
}
|
||||
button.primary { background: #4f46e5; border-color: #6366f1; }
|
||||
button.primary:active { background: #4338ca; }
|
||||
button:active { background: #232323; }
|
||||
.status {
|
||||
font-size: 13px; color: #888;
|
||||
padding: 8px 12px; background: #131313;
|
||||
border: 1px solid #1f1f1f; border-radius: 8px;
|
||||
min-height: 38px; display: flex; align-items: center;
|
||||
}
|
||||
.status.ok { color: #4ade80; }
|
||||
.status.err { color: #f87171; }
|
||||
.feed { display: flex; flex-direction: column; gap: 6px; }
|
||||
.feed h2 { font-size: 11px; color: #888; letter-spacing: 0.5px; text-transform: uppercase; margin: 0; }
|
||||
.msg {
|
||||
background: #131313; border: 1px solid #1f1f1f; border-radius: 8px;
|
||||
padding: 10px 12px; font: 13px ui-monospace, "SF Mono", monospace;
|
||||
color: #d4d4d4; white-space: pre-wrap; word-break: break-word;
|
||||
max-height: 200px; overflow: auto;
|
||||
}
|
||||
.meta { font-size: 11px; color: #666; margin-top: 4px; }
|
||||
footer {
|
||||
margin-top: auto; padding-top: 8px;
|
||||
font-size: 11px; color: #555; text-align: center;
|
||||
}
|
||||
footer a { color: #888; text-decoration: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>tether</h1>
|
||||
<span class="tag">phone ↔ laptop</span>
|
||||
</header>
|
||||
|
||||
<div class="row">
|
||||
<label for="out">send to laptop</label>
|
||||
<textarea id="out" placeholder="paste or type something…"></textarea>
|
||||
<div class="actions">
|
||||
<button id="pasteBtn">paste clipboard</button>
|
||||
<button class="primary" id="sendBtn">send →</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status" id="status">idle</div>
|
||||
|
||||
<div class="feed">
|
||||
<h2>received from laptop</h2>
|
||||
<div id="incoming"></div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<a href="https://gitea.pecord.io/pecord/tether">tether on gitea</a> · v0.1
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const $ = (id) => document.getElementById(id);
|
||||
const status = (msg, cls) => {
|
||||
const s = $("status");
|
||||
s.textContent = msg;
|
||||
s.className = "status" + (cls ? " " + cls : "");
|
||||
};
|
||||
|
||||
$("pasteBtn").addEventListener("click", async () => {
|
||||
try {
|
||||
const text = await navigator.clipboard.readText();
|
||||
$("out").value = text;
|
||||
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; }
|
||||
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");
|
||||
}
|
||||
});
|
||||
|
||||
// SSE: receive incoming messages from clients
|
||||
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);
|
||||
} catch (e) {}
|
||||
});
|
||||
es.onerror = () => setTimeout(connectFeed, 2000);
|
||||
}
|
||||
connectFeed();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user