BuboBubo/sova-jam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat: flesh out

Browse Source
This commit is contained in:
Raphaël Forment
2026-03-14 14:42:40 +01:00
parent 5e7eae22e9
commit b569cfd5ad
6 changed files with 319 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -1 +1,2 @@
.env .env
node_modules/

23
docker-compose.yml
View File

@@ -22,3 +22,26 @@ services:
options: options:
max-size: "10m" max-size: "10m"
max-file: "3" max-file: "3"
sova-web:
build:
context: ./web
container_name: sova-web
restart: unless-stopped
ports:
- "3000:3000"
environment:
- SOVA_HOST=sova-server
- SOVA_PORT=8080
- SOVA_PASSWORD=${SOVA_PASSWORD}
depends_on:
- sova-server
deploy:
resources:
limits:
memory: 128M
cpus: '0.25'
logging:
driver: "json-file"
options:
max-size: "10m"
max-file: "3"

7
web/Dockerfile Normal file
View File

@@ -0,0 +1,7 @@
FROM node:22-slim
WORKDIR /app
COPY package.json .
RUN npm install --production
COPY server.js index.html .
EXPOSE 3000
CMD ["node", "server.js"]

110
web/index.html Normal file
View File

@@ -0,0 +1,110 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sova Jam</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwindcss.config = {
theme: {
extend: {
fontFamily: { mono: ['"JetBrains Mono"', 'monospace'] },
}
}
}
</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
</head>
<body class="bg-neutral-950 text-neutral-200 font-mono min-h-screen flex flex-col items-center justify-center p-6">
<main class="w-full max-w-lg space-y-8">
<header class="text-center space-y-2">
<h1 class="text-4xl font-bold text-white tracking-tight">Sova Jam</h1>
<p class="text-neutral-500 text-sm">live coding session</p>
</header>
<section id="status" class="border border-neutral-800 p-6 space-y-4">
<div class="flex items-center justify-between">
<span class="text-neutral-500 text-xs uppercase tracking-widest">Server</span>
<span id="server-status" class="text-xs px-2 py-0.5 border border-neutral-700 text-neutral-400">connecting...</span>
</div>
<div class="flex items-center justify-between">
<span class="text-neutral-500 text-xs uppercase tracking-widest">Tempo</span>
<span id="tempo" class="text-2xl font-bold text-white tabular-nums">--</span>
</div>
<div class="flex items-center justify-between">
<span class="text-neutral-500 text-xs uppercase tracking-widest">Playback</span>
<span id="playback" class="text-sm text-neutral-400">--</span>
</div>
</section>
<section class="border border-neutral-800 p-6 space-y-3">
<div class="flex items-center justify-between">
<span class="text-neutral-500 text-xs uppercase tracking-widest">Musicians</span>
<span id="peer-count" class="text-xs text-neutral-600">0</span>
</div>
<ul id="peers" class="space-y-1">
<li class="text-neutral-600 text-sm italic">No musicians connected</li>
</ul>
</section>
<section class="border border-neutral-800 p-6 space-y-3">
<h2 class="text-neutral-500 text-xs uppercase tracking-widest">How to join</h2>
<ol class="text-sm text-neutral-400 space-y-2 list-decimal list-inside">
<li>Download <a href="https://github.com/sova-org/Sova" class="text-blue-400 hover:text-blue-300 underline">Sova</a></li>
<li>Connect to <code class="text-white bg-neutral-900 px-1.5 py-0.5">this server's address</code> on port <code class="text-white bg-neutral-900 px-1.5 py-0.5">8080</code></li>
<li>Enter the session password</li>
<li>Start coding music</li>
</ol>
</section>
<footer class="text-center text-neutral-700 text-xs">
powered by <a href="https://github.com/sova-org/Sova" class="hover:text-neutral-500">sova</a>
</footer>
</main>
<script>
const $ = (id) => document.getElementById(id);
const ws = new WebSocket(`ws://${location.host}`);
ws.onmessage = (e) => {
const s = JSON.parse(e.data);
$("server-status").textContent = s.connected ? "connected" : "disconnected";
$("server-status").className = s.connected
? "text-xs px-2 py-0.5 border border-green-800 text-green-400"
: "text-xs px-2 py-0.5 border border-red-900 text-red-400";
$("tempo").textContent = s.tempo.toFixed(1) + " bpm";
$("playback").textContent = s.isPlaying ? "playing" : "stopped";
$("playback").className = s.isPlaying
? "text-sm text-green-400"
: "text-sm text-neutral-500";
const peersEl = $("peers");
$("peer-count").textContent = s.peers.length;
if (s.peers.length === 0) {
peersEl.innerHTML = '<li class="text-neutral-600 text-sm italic">No musicians connected</li>';
} else {
peersEl.innerHTML = s.peers
.map(p => `<li class="text-sm text-neutral-300 border-l-2 border-neutral-700 pl-3">${esc(p)}</li>`)
.join("");
}
};
ws.onclose = () => {
$("server-status").textContent = "disconnected";
$("server-status").className = "text-xs px-2 py-0.5 border border-red-900 text-red-400";
setTimeout(() => location.reload(), 5000);
};
function esc(s) {
const d = document.createElement("div");
d.textContent = s;
return d.innerHTML;
}
</script>
</body>
</html>

10
web/package.json Normal file
View File

@@ -0,0 +1,10 @@
{
"name": "sova-web",
"private": true,
"type": "module",
"dependencies": {
"@msgpack/msgpack": "^3.0.0",
"crc-32": "^1.2.2",
"ws": "^8.18.0"
}
}

168
web/server.js Normal file
View File

@@ -0,0 +1,168 @@
import { createServer } from "node:http";
import { readFileSync } from "node:fs";
import { Socket } from "node:net";
import { encode, decode } from "@msgpack/msgpack";
import CRC32 from "crc-32";
import { WebSocketServer } from "ws";
const SOVA_HOST = process.env.SOVA_HOST || "localhost";
const SOVA_PORT = parseInt(process.env.SOVA_PORT || "8080");
const SOVA_PASSWORD = process.env.SOVA_PASSWORD || null;
const WEB_PORT = parseInt(process.env.WEB_PORT || "3000");
const PROTOCOL_VERSION = 0x02;
const indexHtml = readFileSync(new URL("./index.html", import.meta.url));
let state = {
peers: [],
tempo: 120,
isPlaying: false,
connected: false,
};
// --- Wire protocol ---
function buildFrame(msg) {
const payload = encode(msg);
const crc = CRC32.buf(payload) >>> 0;
const len = payload.length;
const frame = Buffer.alloc(8 + len);
frame[0] = PROTOCOL_VERSION;
frame[1] = (len >> 16) & 0xff;
frame[2] = (len >> 8) & 0xff;
frame[3] = len & 0xff;
frame.writeUInt32BE(crc, 4);
Buffer.from(payload).copy(frame, 8);
return frame;
}
function parseFrames(buffer) {
const messages = [];
let offset = 0;
while (offset + 8 <= buffer.length) {
if (buffer[offset] !== PROTOCOL_VERSION) {
offset++;
continue;
}
const len = (buffer[offset + 1] << 16) | (buffer[offset + 2] << 8) | buffer[offset + 3];
if (len > 10 * 1024 * 1024) {
offset++;
continue;
}
if (offset + 8 + len > buffer.length) break;
const payload = buffer.subarray(offset + 8, offset + 8 + len);
const expectedCrc = buffer.readUInt32BE(offset + 4);
const actualCrc = CRC32.buf(payload) >>> 0;
if (expectedCrc !== actualCrc) {
offset++;
continue;
}
try {
messages.push(decode(payload));
} catch {
// skip malformed msgpack
}
offset += 8 + len;
}
return { messages, remaining: buffer.subarray(offset) };
}
// --- TCP client to sova-server ---
let tcp = null;
let reconnectTimer = null;
function connectToSova() {
if (tcp) return;
console.log(`Connecting to sova-server at ${SOVA_HOST}:${SOVA_PORT}`);
const sock = new Socket();
let recvBuf = Buffer.alloc(0);
sock.connect(SOVA_PORT, SOVA_HOST, () => {
console.log("Connected to sova-server");
const handshake = { SetName: { name: "Web Monitor", password: SOVA_PASSWORD } };
sock.write(buildFrame(handshake));
});
sock.on("data", (chunk) => {
recvBuf = Buffer.concat([recvBuf, chunk]);
const { messages, remaining } = parseFrames(recvBuf);
recvBuf = remaining;
for (const msg of messages) handleMessage(msg);
});
sock.on("close", () => {
console.log("Disconnected from sova-server");
tcp = null;
state.connected = false;
broadcast();
scheduleReconnect();
});
sock.on("error", (err) => {
console.error("TCP error:", err.message);
sock.destroy();
});
tcp = sock;
}
function scheduleReconnect() {
if (reconnectTimer) return;
reconnectTimer = setTimeout(() => {
reconnectTimer = null;
connectToSova();
}, 3000);
}
function handleMessage(msg) {
if (msg.Hello) {
state.connected = true;
state.peers = msg.Hello.peers || [];
state.isPlaying = msg.Hello.is_playing || false;
if (msg.Hello.link_state) state.tempo = msg.Hello.link_state[0];
broadcast();
} else if (msg.PeersUpdated) {
state.peers = msg.PeersUpdated;
broadcast();
} else if (msg.PlaybackStateChanged != null) {
state.isPlaying = !!msg.PlaybackStateChanged;
broadcast();
} else if (msg.ClockState) {
state.tempo = msg.ClockState[0];
broadcast();
} else if (msg.ConnectionRefused) {
console.error("Connection refused:", msg.ConnectionRefused);
}
}
// --- HTTP + WebSocket ---
const server = createServer((req, res) => {
if (req.url === "/" || req.url === "/index.html") {
res.writeHead(200, { "Content-Type": "text/html" });
res.end(indexHtml);
} else {
res.writeHead(404);
res.end();
}
});
const wss = new WebSocketServer({ server });
const clients = new Set();
wss.on("connection", (ws) => {
clients.add(ws);
ws.send(JSON.stringify(state));
ws.on("close", () => clients.delete(ws));
});
function broadcast() {
const data = JSON.stringify(state);
for (const ws of clients) ws.send(data);
}
server.listen(WEB_PORT, () => {
console.log(`Web server listening on port ${WEB_PORT}`);
connectToSova();
});