feat: use separate websocket to handle velocity and orientation streams

src/deviceOrientation.ts

@@ -1,21 +1,16 @@
 import { onUnmounted } from "vue";
 import { BehaviorSubject, fromEvent } from "rxjs";
 import { map, share, take } from "rxjs/operators";
-import { behaviorSubjectToRef } from "@/utilities";
 
 export interface DeviceOrientation {
   alpha: number | null;
   beta: number | null;
 }
 
-const deviceOrientationGrantedSubject = new BehaviorSubject(
+export const deviceOrientationGrantedSubject = new BehaviorSubject(
   typeof DeviceOrientationEvent.requestPermission !== "function"
 );
 
-export const isDeviceOrientationGranted = behaviorSubjectToRef(
-  deviceOrientationGrantedSubject
-);
-
 export async function requestDeviceOrientation(): Promise<boolean> {
   let granted;
 

src/pages/Stack.vue

@@ -27,7 +27,7 @@ import Compass from "@/components/Compass.vue";
 import { makeStack } from "@/stack.ts";
 import {
   getDeviceOrientationSubject,
-  isDeviceOrientationGranted,
+  deviceOrientationGrantedSubject,
   requestDeviceOrientation,
 } from "@/deviceOrientation.ts";
 import { type2PortraitImageUrl, ImageType } from "@/images.ts";
@@ -52,6 +52,9 @@ export default defineComponent({
 
     const orientationSubject = getDeviceOrientationSubject();
     const orientation = behaviorSubjectToRef(orientationSubject);
+    const isDeviceOrientationGranted = behaviorSubjectToRef(
+      deviceOrientationGrantedSubject
+    );
 
     async function requestDeviceOrientationOrAlert() {
       if (!(await requestDeviceOrientation())) {

src/socket.ts

@@ -1,37 +1,42 @@
 import { onUnmounted } from "vue";
-import { BehaviorSubject, merge } from "rxjs";
+import { BehaviorSubject } from "rxjs";
 import { DeviceOrientation } from "@/deviceOrientation";
 import { webSocket } from "rxjs/webSocket";
-import { map } from "rxjs/operators";
 
 export function pipeToPi(
   velocity: BehaviorSubject<number>,
   orientation: BehaviorSubject<DeviceOrientation>
 ) {
-  const socketSubject = webSocket("wss:https://localhost:7777");
+  const registry = [
+    {
+      url: "wss:https://localhost/velocity",
+      subject: velocity as BehaviorSubject<unknown>,
+    },
+    {
+      url: "wss:https://localhost/orientation",
+      subject: orientation as BehaviorSubject<unknown>,
+    },
+  ].map(({ url, subject }) => {
+    const socket = webSocket(url);
 
-  merge(
-    velocity.pipe(
-      map((velocity) => ({
-        velocity,
-      }))
-    ),
-    orientation.pipe(
-      map((orientation) => ({
-        orientation,
-      }))
-    )
-  ).subscribe(socketSubject);
+    subject.subscribe(socket);
 
-  const subscription = socketSubject.subscribe(
-    () => {},
-    (error) => {
-      console.log(error);
-    }
-  );
+    const subscription = socket.subscribe(
+      () => {},
+      (error) => console.log(error),
+      () => console.log("Server closed the connection")
+    );
+
+    return {
+      socket,
+      subscription,
+    };
+  });
 
   onUnmounted(() => {
-    socketSubject.error({ code: 1000, reason: "Stack.vue is unmounted" });
-    subscription.unsubscribe();
+    registry.forEach(({ socket, subscription }) => {
+      socket.error({ code: 1000, reason: "Stack.vue is unmounted" });
+      subscription.unsubscribe();
+    });
   });
 }

src/utilities.ts

@@ -10,6 +10,7 @@ export function behaviorSubjectToRef<T>(
   const subscription = s.subscribe((v: T) => {
     reference.value = v as UnwrapRef<T>;
   });
+
   onUnmounted(() => subscription.unsubscribe());
 
   return readonly(reference);