diff --git a/frontend/src/background/constants.ts b/frontend/src/background/constants.ts index 34ed72d..30ea1c9 100644 --- a/frontend/src/background/constants.ts +++ b/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 }; diff --git a/frontend/src/hooks/useBackendData.ts b/frontend/src/hooks/useBackendData.ts new file mode 100644 index 0000000..ffd0640 --- /dev/null +++ b/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) + + } + ) + + +} diff --git a/frontend/src/hooks/useRoomData.ts b/frontend/src/hooks/useRoomData.ts new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/hooks/useWebSocketConnection.ts b/frontend/src/hooks/useWebSocketConnection.ts new file mode 100644 index 0000000..57f3811 --- /dev/null +++ b/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(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) => { messageHandler(ev.data) } + webSocketConnection.addEventListener('message', wsMessageHandler) + }, + [webSocketConnection] + ) + + return { onMessage, sendMessage } +} + +export default useWebSocketConnection; +