From 5111939f335f8ea7207bb45cd88715ae07928000 Mon Sep 17 00:00:00 2001
From: Kevin Farrugia <hello@imkev.dev>
Date: Mon, 24 Nov 2025 16:43:50 +0100
Subject: [PATCH 1/2] Improve reconnection logic for websocket example

---
 websockets/client.js | 76 ++++++++++++++++++++++++--------------------
 1 file changed, 41 insertions(+), 35 deletions(-)

diff --git a/websockets/client.js b/websockets/client.js
index e9630788..f1ec51b6 100644
--- a/websockets/client.js
+++ b/websockets/client.js
@@ -5,45 +5,51 @@ let counter = 0;
 
 const logElement = document.querySelector("#log");
 function log(text) {
-	logElement.innerText = `${logElement.innerText}${text}\n`;
-	logElement.scrollTop = logElement.scrollHeight;
+  logElement.innerText = `${logElement.innerText}${text}\n`;
+  logElement.scrollTop = logElement.scrollHeight;
 }
 
-// Open the websocket when the page is shown
-window.addEventListener("pageshow", () => {
-	log("OPENING");
-
-	websocket = new WebSocket(wsUri);
-
-	websocket.addEventListener("open", () => {
-		log("CONNECTED");
-		pingInterval = setInterval(() => {
-			log(`SENT: ping: ${counter}`);
-			websocket.send("ping");
-		}, 1000);
-	});
-
-	websocket.addEventListener("close", () => {
-		log("DISCONNECTED");
-		clearInterval(pingInterval);
-	});
-
-	websocket.addEventListener("message", (e) => {
-		log(`RECEIVED: ${e.data}: ${counter}`);
-		counter++;
-	});
-
-	websocket.addEventListener("error", (e) => {
-		log(`ERROR: ${e.data}`);
-	});
+function initializeWebSocketListeners(ws) {
+  ws.addEventListener("open", () => {
+    log("CONNECTED");
+    pingInterval = setInterval(() => {
+      log(`SENT: ping: ${counter}`);
+      ws.send("ping");
+    }, 1000);
+  });
+
+  ws.addEventListener("close", () => {
+    log("DISCONNECTED");
+    clearInterval(pingInterval);
+  });
+
+  ws.addEventListener("message", (e) => {
+    log(`RECEIVED: ${e.data}: ${counter}`);
+    counter++;
+  });
+
+  ws.addEventListener("error", (e) => {
+    log(`ERROR`);
+  });
+}
+
+window.addEventListener("pageshow", (event) => {
+  if (event.persisted) {
+    websocket = new WebSocket(wsUri);
+    initializeWebSocketListeners(websocket);
+  }
 });
 
+log("OPENING");
+websocket = new WebSocket(wsUri);
+initializeWebSocketListeners(websocket);
+
 // Close the websocket when the user leaves.
 window.addEventListener("pagehide", () => {
-	if (websocket) {
-		log("CLOSING");
-		websocket.close();
-		websocket = null;
-		window.clearInterval(pingInterval);
-	}
+  if (websocket) {
+    log("CLOSING");
+    websocket.close();
+    websocket = null;
+    window.clearInterval(pingInterval);
+  }
 });

From aa2f11e5646fbf652a8f828781305af0da407c90 Mon Sep 17 00:00:00 2001
From: Kevin Farrugia <hello@imkev.dev>
Date: Mon, 24 Nov 2025 16:49:35 +0100
Subject: [PATCH 2/2] Replace space with tabs

---
 websockets/client.js | 66 ++++++++++++++++++++++----------------------
 1 file changed, 33 insertions(+), 33 deletions(-)

diff --git a/websockets/client.js b/websockets/client.js
index f1ec51b6..af21d18f 100644
--- a/websockets/client.js
+++ b/websockets/client.js
@@ -5,39 +5,39 @@ let counter = 0;
 
 const logElement = document.querySelector("#log");
 function log(text) {
-  logElement.innerText = `${logElement.innerText}${text}\n`;
-  logElement.scrollTop = logElement.scrollHeight;
+	logElement.innerText = `${logElement.innerText}${text}\n`;
+	logElement.scrollTop = logElement.scrollHeight;
 }
 
 function initializeWebSocketListeners(ws) {
-  ws.addEventListener("open", () => {
-    log("CONNECTED");
-    pingInterval = setInterval(() => {
-      log(`SENT: ping: ${counter}`);
-      ws.send("ping");
-    }, 1000);
-  });
-
-  ws.addEventListener("close", () => {
-    log("DISCONNECTED");
-    clearInterval(pingInterval);
-  });
-
-  ws.addEventListener("message", (e) => {
-    log(`RECEIVED: ${e.data}: ${counter}`);
-    counter++;
-  });
-
-  ws.addEventListener("error", (e) => {
-    log(`ERROR`);
-  });
+	ws.addEventListener("open", () => {
+		log("CONNECTED");
+		pingInterval = setInterval(() => {
+			log(`SENT: ping: ${counter}`);
+			ws.send("ping");
+		}, 1000);
+	});
+
+	ws.addEventListener("close", () => {
+		log("DISCONNECTED");
+		clearInterval(pingInterval);
+	});
+
+	ws.addEventListener("message", (e) => {
+		log(`RECEIVED: ${e.data}: ${counter}`);
+		counter++;
+	});
+
+	ws.addEventListener("error", (e) => {
+		log(`ERROR`);
+	});
 }
 
 window.addEventListener("pageshow", (event) => {
-  if (event.persisted) {
-    websocket = new WebSocket(wsUri);
-    initializeWebSocketListeners(websocket);
-  }
+	if (event.persisted) {
+		websocket = new WebSocket(wsUri);
+		initializeWebSocketListeners(websocket);
+	}
 });
 
 log("OPENING");
@@ -46,10 +46,10 @@ initializeWebSocketListeners(websocket);
 
 // Close the websocket when the user leaves.
 window.addEventListener("pagehide", () => {
-  if (websocket) {
-    log("CLOSING");
-    websocket.close();
-    websocket = null;
-    window.clearInterval(pingInterval);
-  }
+	if (websocket) {
+		log("CLOSING");
+		websocket.close();
+		websocket = null;
+		window.clearInterval(pingInterval);
+	}
 });