feat(remix-react): add WebSocket reconnect to LiveReload (#859)

Co-authored-by: Logan McAnsh <logan@mcan.sh>
remix-run · Jul 11, 2022 · 2d46b91 · 2d46b91
1 parent 7a4e17f
commit 2d46b91
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 3 deletions.
diff --git a/.changeset/fast-yaks-whisper.md b/.changeset/fast-yaks-whisper.md
@@ -0,0 +1,6 @@
+---
+"remix": patch
+"@remix-run/react": patch
+---
+
+feat(remix-react): add WebSocket reconnect to `LiveReload`
diff --git a/contributors.yml b/contributors.yml
@@ -390,3 +390,4 @@
 - zachdtaylor
 - zainfathoni
 - zhe
+- garand
diff --git a/packages/remix-react/components.tsx b/packages/remix-react/components.tsx
@@ -1491,7 +1491,7 @@ export const LiveReload =
             suppressHydrationWarning
             dangerouslySetInnerHTML={{
               __html: js`
-                (() => {
+                function remixLiveReloadConnect(config) {
                   let protocol = location.protocol === "https:" ? "wss:" : "ws:";
                   let host = location.hostname;
                   let socketPath = protocol + "//" + host + ":" + ${String(
@@ -1509,13 +1509,29 @@ export const LiveReload =
                       window.location.reload();
                     }
                   };
+                  ws.onopen = () => {
+                    if (config && typeof config.onOpen === "function") {
+                      config.onOpen();
+                    }
+                  };
+                  ws.onclose = (error) => {
+                    console.log("Remix dev asset server web socket closed. Reconnecting...");
+                    setTimeout(
+                      () =>
+                        remixLiveReloadConnect({
+                          onOpen: () => window.location.reload(),
+                        }),
+                      1000
+                    );
+                  };
                   ws.onerror = (error) => {
                     console.log("Remix dev asset server web socket error:");
                     console.error(error);
                   };
-                })();
+                }
+                remixLiveReloadConnect();
               `,
             }}
           />
         );
-      };
+      };