Ensure only one instance of the client websocket exists and reduce reconnection attemps

packages/client/src/websocket.js

@@ -6,12 +6,14 @@ import {
 import { get } from "svelte/store"
 import { io } from "socket.io-client"
 
+let socket
+
 export const initWebsocket = () => {
   const { inBuilder, location } = get(builderStore)
   const { cloud } = get(environmentStore)
 
   // Only connect when we're inside the builder preview, for now
-  if (!inBuilder || !location || cloud) {
+  if (!inBuilder || !location || cloud || socket) {
     return
   }
 
@@ -20,16 +22,15 @@ export const initWebsocket = () => {
   const proto = tls ? "wss:" : "ws:"
   const host = location.hostname
   const port = location.port || (tls ? 443 : 80)
-  const socket = io(`${proto}//${host}:${port}`, {
+  socket = io(`${proto}//${host}:${port}`, {
     path: "/socket/client",
-    // Cap reconnection attempts to 10 (total of 95 seconds before giving up)
-    reconnectionAttempts: 10,
-    // Delay initial reconnection attempt by 5 seconds
+    // Cap reconnection attempts to 3 (total of 15 seconds before giving up)
+    reconnectionAttempts: 3,
+    // Delay reconnection attempt by 5 seconds
     reconnectionDelay: 5000,
-    // Then decrease to 10 second intervals
-    reconnectionDelayMax: 10000,
-    // Timeout after 5 seconds so we never stack requests
-    timeout: 5000,
+    reconnectionDelayMax: 5000,
+    // Timeout after 4 seconds so we never stack requests
+    timeout: 4000,
   })
 
   // Event handlers