feat: Allow for additional types of connections

BREAKING CHANGES: This changes how communication works slightly. This should not cause any issues but we are marking it breaking just to be on the safe side.

Author: rmevans9

src/connection-manager.ts

@@ -0,0 +1,39 @@
+import { NativeModules } from "react-native"
+
+export default class ConnectionManager {
+  private webSocket: any
+  private flipperConnection: any
+
+  constructor(path?: string) {
+    this.webSocket = new WebSocket(path)
+    this.flipperConnection = NativeModules.Reactotron
+  }
+
+  send(payload: any) {
+    if (this.webSocket.readyState === 1) {
+      this.webSocket.send(payload)
+    }
+
+    if (this.flipperConnection) {
+      this.flipperConnection.sendCommand("command", JSON.parse(payload))
+    }
+  }
+
+  on(event: "open" | "close" | "message", callback: any) {
+    if (event === "open") {
+      if (this.flipperConnection) {
+        callback()
+      }
+
+      this.webSocket.onopen = callback
+    } else if (event === "close") {
+      this.webSocket.onclose = callback
+    } else if (event === "message") {
+      this.webSocket.onmessage = evt => callback(evt.data)
+    }
+  }
+
+  close() {
+    this.webSocket.close()
+  }
+}

src/reactotron-react-native.ts

@@ -11,6 +11,7 @@ import trackGlobalErrors, { TrackGlobalErrorsOptions } from "./plugins/trackGlob
 import networking, { NetworkingOptions } from "./plugins/networking"
 import storybook from "./plugins/storybook"
 import devTools from "./plugins/devTools"
+import ConnectionManager from "./connection-manager"
 
 const constants = NativeModules.PlatformConstants || {}
 
@@ -19,7 +20,7 @@ const REACTOTRON_ASYNC_CLIENT_ID = "@REACTOTRON/clientId"
 let tempClientId = null
 
 const DEFAULTS = {
-  createSocket: (path: string) => new WebSocket(path), // eslint-disable-line
+  createSocket: (path: string) => new ConnectionManager(path), // eslint-disable-line
   host: getHost("localhost"),
   port: 9090,
   name: "React Native App",