Use ReconnectingWebSocket instead of vanilla WebSocket (#348)

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",

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 = () => {