Fix showing "Connection Trouble" warning after fork (codesandbox#1234)

* Fixed showing "Connection Trouble" warning after fork.

* Preview: moved localClose to an instance field.

* Preview -> SSE socket: try websocket transport first, if not supported fall back to long polling.

Author: lbogdan

.eslintrc

@@ -27,6 +27,7 @@
     "no-underscore-dangle": "off",
     "no-nested-ternary": "warn",
     "react/require-default-props": "off",
-    "import/no-named-default": 0
+    "import/no-named-default": 0,
+    "no-param-reassign": ["error", { "props": false }]
   }
 }

packages/app/src/app/components/Preview/index.js

@@ -151,6 +151,9 @@ class BasePreview extends React.Component<Props, State> {
   };
   // TODO: Find typedefs for this
   $socket: ?any;
+  connectTimeout: ?number;
+  // indicates if the socket closing is initiated by us
+  localClose: boolean;
 
   constructor(props: Props) {
     super(props);
@@ -182,6 +185,8 @@ class BasePreview extends React.Component<Props, State> {
     };
 
     if (this.serverPreview) {
+      this.connectTimeout = null;
+      this.localClose = false;
       this.setupSSESockets();
     }
     this.listener = listen(this.handleMessage);
@@ -204,12 +209,11 @@ class BasePreview extends React.Component<Props, State> {
 
   setupSSESockets = async () => {
     const hasInitialized = !!this.$socket;
-    let connectTimeout = null;
 
-    function onTimeout(setServerStatus) {
-      connectTimeout = null;
-      if (setServerStatus) {
-        setServerStatus('disconnected');
+    function onTimeout(comp) {
+      comp.connectTimeout = null;
+      if (comp.props.setServerStatus) {
+        comp.props.setServerStatus('disconnected');
       }
     }
 
@@ -218,27 +222,30 @@ class BasePreview extends React.Component<Props, State> {
         frameInitialized: false,
       });
       if (this.$socket) {
+        this.localClose = true;
         this.$socket.close();
+        // we need this setTimeout() for socket open() to work immediately after close()
         setTimeout(() => {
-          if (this.$socket) {
-            connectTimeout = setTimeout(
-              () => onTimeout(this.props.setServerStatus),
-              3000
-            );
-            this.$socket.open();
-          }
+          this.connectTimeout = setTimeout(() => onTimeout(this), 3000);
+          this.$socket.open();
         }, 0);
       }
     } else {
       const socket = io(getSSEUrl(), {
         autoConnect: false,
+        transports: ['websocket', 'polling'],
       });
       this.$socket = socket;
       if (process.env.NODE_ENV === 'development') {
         window.$socket = socket;
       }
 
       socket.on('disconnect', () => {
+        if (this.localClose) {
+          this.localClose = false;
+          return;
+        }
+
         if (this.props.setServerStatus) {
           let status = 'disconnected';
           if (this.state.hibernated) {
@@ -252,9 +259,9 @@ class BasePreview extends React.Component<Props, State> {
       });
 
       socket.on('connect', async () => {
-        if (connectTimeout) {
-          clearTimeout(connectTimeout);
-          connectTimeout = null;
+        if (this.connectTimeout) {
+          clearTimeout(this.connectTimeout);
+          this.connectTimeout = null;
         }
 
         if (this.props.setServerStatus) {
@@ -352,10 +359,7 @@ class BasePreview extends React.Component<Props, State> {
         }
       });
 
-      connectTimeout = setTimeout(
-        () => onTimeout(this.props.setServerStatus),
-        3000
-      );
+      this.connectTimeout = setTimeout(() => onTimeout(this), 3000);
       socket.open();
     }
   };
@@ -378,6 +382,7 @@ class BasePreview extends React.Component<Props, State> {
     }
 
     if (this.$socket) {
+      this.localClose = true;
       this.$socket.close();
     }
   }