From 60a18c138c51d3adcfeba7785315fc222cdfeb35 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 14 Apr 2021 07:41:05 -0700
Subject: [PATCH] Don't disconnect DevTools WebSocket connection on Cmd+D

Summary:
When the React Native Cmd+D menu is opened, something re-runs module initialization code (including DevTools backend initialization) which recreates the `WebSocket` and kills any already-connected frontend.

It's not clear to me why this is done. (Intentional? Accident?) But it makes it difficult to connect the React Native Inspector and DevTools together without multiple reloads. This Diff prevents the Cmd+D menu from killing the `WebSocket` connection as a workaround. A better long-term fix would (probably) be to not eagerly re-run these modules.

## Changelog

[General] [Fixed] - Don't disconnect DevTools WebSocket connection on Cmd+D

Reviewed By: fkgozali, sammy-SC

Differential Revision: D27742376

fbshipit-source-id: 60ab3e4763da6b055c28c7aafc6d460e7f4a601d
---
 Libraries/Core/setUpReactDevTools.js | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/Libraries/Core/setUpReactDevTools.js b/Libraries/Core/setUpReactDevTools.js
index 2ba4c5dc6a4..099f12242bc 100644
--- a/Libraries/Core/setUpReactDevTools.js
+++ b/Libraries/Core/setUpReactDevTools.js
@@ -11,8 +11,19 @@
 'use strict';
 
 if (__DEV__) {
+  let isWebSocketOpen = false;
+  let ws = null;
+
   const reactDevTools = require('react-devtools-core');
   const connectToDevTools = () => {
+    if (ws !== null && isWebSocketOpen) {
+      // If the DevTools backend is already connected, don't recreate the WebSocket.
+      // This would break the connection.
+      // If there isn't an active connection, a backend may be waiting to connect,
+      // in which case it's okay to make a new one.
+      return;
+    }
+
     // not when debugging in chrome
     // TODO(t12832058) This check is broken
     if (!window.document) {
@@ -39,7 +50,13 @@ if (__DEV__) {
           : 8097;
 
       const WebSocket = require('../WebSocket/WebSocket');
-      const ws = new WebSocket('ws://' + host + ':' + port);
+      ws = new WebSocket('ws://' + host + ':' + port);
+      ws.addEventListener('close', event => {
+        isWebSocketOpen = false;
+      });
+      ws.addEventListener('open', event => {
+        isWebSocketOpen = true;
+      });
 
       const viewConfig = require('../Components/View/ReactNativeViewViewConfig');
       reactDevTools.connectToDevTools({