Start with websocket backend connection

frontend/src/background/constants.ts

@@ -1,3 +1,4 @@
 const JITSI_DOMAIN = "thisisnotajitsi.filefighter.de";
+const WEBSOCKET_URL = "ws" + (window.location.protocol == "https:" ? "s" : "") + "://" + window.location.host + "/ws"
 
-export { JITSI_DOMAIN };
+export { JITSI_DOMAIN, WEBSOCKET_URL };

frontend/src/hooks/useBackendData.ts

@@ -0,0 +1,20 @@
+import useWebSocketConnection from "./useWebSocketConnection";
+
+function useBackendData() {
+
+  const { onMessage, sendMessage } = useWebSocketConnection();
+
+  const { roomData, setRoomData } = useRoomData()
+
+
+  onMessage(
+    (messageString) => {
+      const messageObject = JSON.parse(messageString)
+
+      !!messageObject.roomData && setRoomData(messageObject.roomData)
+
+    }
+  )
+
+
+}

frontend/src/hooks/useWebSocketConnection.ts

@@ -0,0 +1,34 @@
+import { useCallback, useState } from "react";
+import { WEBSOCKET_URL } from "../background/constants";
+
+function useWebSocketConnection() {
+
+  const createWebSocketConnection = () => {
+    const webSocket = new WebSocket(WEBSOCKET_URL);
+    return webSocket
+  }
+
+  const [webSocketConnection] = useState<WebSocket>(createWebSocketConnection())
+
+  const sendMessage = useCallback((message: string) => {
+    //if the socket's open, send a message:
+    if (webSocketConnection.readyState === WebSocket.OPEN) {
+      webSocketConnection.send(message);
+    }
+  },
+    [webSocketConnection]
+  )
+
+  const onMessage = useCallback(
+    (messageHandler: (messageHandler: string) => void) => {
+      const wsMessageHandler = (ev: MessageEvent<any>) => { messageHandler(ev.data) }
+      webSocketConnection.addEventListener('message', wsMessageHandler)
+    },
+    [webSocketConnection]
+  )
+
+  return { onMessage, sendMessage }
+}
+
+export default useWebSocketConnection;
+