From a4ac2979c815d417e84699c2a764dbefa873776e Mon Sep 17 00:00:00 2001
From: advo-kat <119153319+advo-kat@users.noreply.github.com>
Date: Thu, 26 Jan 2023 21:27:41 +1100
Subject: [PATCH] Use ReconnectingWebSocket instead of vanilla WebSocket (#348)

---
 pynecone/.templates/web/package.json   | 1 +
 pynecone/.templates/web/utils/state.js | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/pynecone/.templates/web/package.json b/pynecone/.templates/web/package.json
index 82e38a378..fb0178ec7 100644
--- a/pynecone/.templates/web/package.json
+++ b/pynecone/.templates/web/package.json
@@ -24,6 +24,7 @@
     "react-markdown": "^8.0.3",
     "react-plotly.js": "^2.6.0",
     "react-syntax-highlighter": "^15.5.0",
+    "reconnecting-websocket": "^4.4.0",
     "rehype-katex": "^6.0.2",
     "rehype-raw": "^6.1.1",
     "remark-gfm": "^3.0.1",
diff --git a/pynecone/.templates/web/utils/state.js b/pynecone/.templates/web/utils/state.js
index 2b8a81039..9be177a94 100644
--- a/pynecone/.templates/web/utils/state.js
+++ b/pynecone/.templates/web/utils/state.js
@@ -1,4 +1,5 @@
 // State management for Pynecone web apps.
+import ReconnectingWebSocket from 'reconnecting-websocket';
 
 // Global variable to hold the token.
 let token;
@@ -136,7 +137,7 @@ export const updateState = async (state, setState, result, setResult, router, so
  */
 export const connect = async (socket, state, setState, result, setResult, router, endpoint) => {
   // Create the socket.
-  socket.current = new WebSocket(endpoint);
+  socket.current = new ReconnectingWebSocket(endpoint);
 
   // Once the socket is open, hydrate the page.
   socket.current.onopen = () => {