Merge pull request #3 from oofnish/claude/fix-asset-cache-busting

oofnish · web-flow · commit aff415404c8f · 2026-06-01T14:45:54.000-04:00
Fix stale-cache asset loading; add broker connection watchdog
diff --git a/app.js b/app.js
@@ -78,6 +78,25 @@ function brokerAvailable() {
   return typeof Peer !== 'undefined';
 }
 
+// If the broker never confirms our registration, surface an error instead of
+// hanging silently on the placeholder.
+const BROKER_TIMEOUT_MS = 15000;
+let brokerTimer = null;
+
+function armBrokerWatchdog(statusId) {
+  clearTimeout(brokerTimer);
+  brokerTimer = setTimeout(() => {
+    $(statusId).textContent =
+      'Could not reach the signaling broker. Check your internet, or use the manual code.';
+    setStatus('Connection error', 'error');
+  }, BROKER_TIMEOUT_MS);
+}
+
+function clearBrokerWatchdog() {
+  clearTimeout(brokerTimer);
+  brokerTimer = null;
+}
+
 // Create side: register a code and wait for the other device to connect.
 function startEasyHost() {
   if (!brokerAvailable()) {
@@ -91,8 +110,10 @@ function startEasyHost() {
 
   const code = randomCode();
   peer = new Peer(PEER_PREFIX + code, { debug: 1 });
+  armBrokerWatchdog('create-easy-status');
 
   peer.on('open', () => {
+    clearBrokerWatchdog();
     $('my-code').textContent = code;
     setStatus('Waiting for the other device…', 'connecting');
     $('create-easy-status').textContent = 'Waiting for the other device to join…';
@@ -105,6 +126,7 @@ function startEasyHost() {
   });
 
   peer.on('error', (err) => {
+    clearBrokerWatchdog();
     if (err.type === 'unavailable-id') {
       // Rare clash on the shared broker — try a fresh code.
       peer.destroy();
@@ -129,13 +151,18 @@ function startEasyJoin() {
   $('join-easy-status').textContent = 'Connecting…';
   setStatus('Connecting…', 'connecting');
   peer = new Peer({ debug: 1 });
+  armBrokerWatchdog('join-easy-status');
 
   peer.on('open', () => {
-    const conn = peer.connect(PEER_PREFIX + code, { reliable: true, serialization: 'none' });
+    clearBrokerWatchdog();
+    // 'raw' passes strings and binary through untouched; we do our own
+    // chunking. (Note: PeerJS has no 'none' serializer despite the enum.)
+    const conn = peer.connect(PEER_PREFIX + code, { reliable: true, serialization: 'raw' });
     adoptPeerConnection(conn);
   });
 
   peer.on('error', (err) => {
+    clearBrokerWatchdog();
     if (err.type === 'peer-unavailable') {
       $('join-easy-status').textContent = 'No device is waiting on that code. Double-check it.';
       setStatus('Not connected', 'idle');
@@ -452,6 +479,7 @@ function addOutgoingNote(text) {
 // ---- Mode toggles & reset -------------------------------------------------
 
 function teardownConnections() {
+  clearBrokerWatchdog();
   if (channel) try { channel.close(); } catch (_) {}
   if (pc) try { pc.close(); } catch (_) {}
   if (peer) try { peer.destroy(); } catch (_) {}
diff --git a/index.html b/index.html
@@ -4,7 +4,9 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>FileDropper — LAN file &amp; clipboard transfer</title>
-  <link rel="stylesheet" href="style.css" />
+  <!-- Bump the ?v= version whenever style.css / app.js change so browsers
+       don't run a stale cached copy against fresh HTML. -->
+  <link rel="stylesheet" href="style.css?v=3" />
 </head>
 <body>
   <header>
@@ -126,7 +128,7 @@ <h3>Sending</h3>
     <p>Runs in your browser via WebRTC. <a href="https://github.com/oofnish/filedropper" target="_blank" rel="noopener">Source</a></p>
   </footer>
 
-  <script src="vendor/peerjs.min.js"></script>
-  <script src="app.js"></script>
+  <script src="vendor/peerjs.min.js?v=1.5.4"></script>
+  <script src="app.js?v=3"></script>
 </body>
 </html>
