React Native Experiment: Native socket.io

Author: SupertigerDev

src/chat-api/socketClient.ts

@@ -70,11 +70,16 @@ import {
   onVoiceUserJoined,
   onVoiceUserLeft
 } from "./events/voiceEvents";
-
-const socket = io(env.WS_URL || env.SERVER_URL, {
-  transports: ["websocket"],
-  autoConnect: false
-});
+import { reactNativeAPI, ReactSocketIO } from "@/common/ReactNative";
+import { isExperimentEnabled } from "@/common/experiments";
+
+const socket =
+  reactNativeAPI()?.isReactNative && isExperimentEnabled("RN_NATIVE_WS")()
+    ? new ReactSocketIO(env.WS_URL || env.SERVER_URL)
+    : io(env.WS_URL || env.SERVER_URL, {
+        transports: ["websocket"],
+        autoConnect: false
+      });
 
 let token: undefined | string;
 

src/common/ReactNative.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { onCleanup, onMount } from "solid-js";
 
 interface CustomEventMap {
@@ -6,6 +7,7 @@ interface CustomEventMap {
   registerFCM: { token: string };
 
   openChannel: { userId: string; channelId: string; serverId?: string };
+  sio_event: { event: string; payload: any };
 }
 
 type EventByType<T extends CustomEventMap> = {
@@ -22,6 +24,7 @@ interface WindowAPI {
 
   authenticated(userId: string): string;
   logout(): void;
+  post(event: string, payload: any): void;
 
   on<K extends keyof CustomEventMap>(
     event: K,
@@ -63,3 +66,69 @@ export function useReactNativeEvent<K extends keyof CustomEventMap>(
     });
   });
 }
+
+export class ReactSocketIO {
+  url: string;
+  id?: string;
+  handlers: Record<string, Set<(data: any, ...args: any) => void>> = {};
+
+  io = {
+    on: (event: string, callback: (data: any) => void) => {
+      this.on(event, callback);
+    },
+    off: (event: string, callback: (data: any) => void) => {
+      this.off(event, callback);
+    }
+  };
+
+  constructor(url: string) {
+    this.url = url;
+
+    reactNativeAPI()?.on(
+      "sio_event",
+      (data: { event: string; payload: any; type?: "binary" }) => {
+        if (data.event === "connect") {
+          this.id = data.payload.id;
+        }
+        if (data.event === "disconnect") {
+          const handlers = this.handlers[data.event];
+          if (handlers) {
+            handlers.forEach((handler) =>
+              handler(data.payload.reason, data.payload.description)
+            );
+          }
+          return;
+        }
+        if (data.event === "reconnect_attempt") {
+          const handlers = this.handlers[data.event];
+          if (handlers) {
+            handlers.forEach((handler) => handler(data.payload.attempt));
+          }
+          return;
+        }
+
+        if (data.type === "binary") {
+          data.payload = new Uint8Array(data.payload).buffer;
+        }
+
+        const handlers = this.handlers[data.event];
+        if (handlers) {
+          handlers.forEach((handler) => handler(data.payload));
+        }
+      }
+    );
+  }
+  connect() {
+    reactNativeAPI()?.post("sio_connect", { url: this.url });
+  }
+  on(event: string, callback: (data: any) => void) {
+    if (!this.handlers[event]) this.handlers[event] = new Set();
+    this.handlers[event]?.add(callback);
+  }
+  off(event: string, callback: (data: any) => void) {
+    this.handlers[event]?.delete(callback);
+  }
+  emit(event: string, data: any) {
+    reactNativeAPI()?.post("sio_emit", { event, payload: data });
+  }
+}

src/common/experiments.tsx

@@ -6,6 +6,7 @@ export interface Experiment {
   name: string;
   description?: string;
   electron?: boolean;
+  reactNative?: boolean;
   reloadRequired?: boolean;
   onToggle?: () => void;
 }
@@ -22,6 +23,13 @@ export const Experiments = [
     name: "WebSocket Zstandard Compression",
     description:
       "Compress some events with Zstandard compression. This can reduce bandwidth usage."
+  },
+  {
+    id: "RN_NATIVE_WS",
+    name: "React Native Native WebSocket",
+    reactNative: true,
+    description:
+      "Use the socket.io in react native instead of webview. Will be needed for native WebRTC for stable video calls on the mobile app."
   }
 ] as const;
 

src/components/settings/ExperimentSettings.tsx

@@ -13,6 +13,7 @@ import LegacyModal from "../ui/legacy-modal/LegacyModal";
 import { useCustomPortal } from "../ui/custom-portal/CustomPortal";
 
 import { useTransContext } from "@nerimity/solid-i18lite";
+import { reactNativeAPI } from "@/common/ReactNative";
 
 const Container = styled("div")`
   display: flex;
@@ -65,6 +66,9 @@ const ExperimentItem = (props: { experiment: Experiment }) => {
     if (props.experiment.electron && !electronWindowAPI()?.isElectron) {
       return true;
     }
+    if (props.experiment.reactNative && !reactNativeAPI()?.isReactNative) {
+      return true;
+    }
     return false;
   };