diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 11c92b7035..635b95557e 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -5,6 +5,7 @@ on:
branches:
- main
- staging
+ - frontend-websocket-test
pull_request:
branches:
- main
@@ -27,6 +28,7 @@ jobs:
env:
QUESTION_SERVICE_URL: ${{ vars.QUESTION_SERVICE_URL }}
USER_SERVICE_URL: ${{ vars.USER_SERVICE_URL }}
+ MATCHING_SERVICE_URL: ${{ vars.MATCHING_SERVICE_URL }}
JWT_SECRET: ${{ secrets.JWT_SECRET }}
FIREBASE_CREDENTIAL_PATH: ${{ vars.QUESTION_SERVICE_FIREBASE_CREDENTIAL_PATH }}
DB_CLOUD_URI: ${{ secrets.USER_SERVICE_DB_CLOUD_URI }}
@@ -35,6 +37,7 @@ jobs:
cd ./apps/frontend
echo "NEXT_PUBLIC_QUESTION_SERVICE_URL=$QUESTION_SERVICE_URL" >> .env
echo "NEXT_PUBLIC_USER_SERVICE_URL=$USER_SERVICE_URL" >> .env
+ echo "NEXT_PUBLIC_MATCHING_SERVICE_URL=$MATCHING_SERVICE_URL" >> .env
cd ../question-service
echo "FIREBASE_CREDENTIAL_PATH=$FIREBASE_CREDENTIAL_PATH" >> .env
diff --git a/apps/frontend/.env.example b/apps/frontend/.env.example
index a6c274c271..547a68c4c0 100644
--- a/apps/frontend/.env.example
+++ b/apps/frontend/.env.example
@@ -1,3 +1,4 @@
# URL endpoints of the services
NEXT_PUBLIC_QUESTION_SERVICE_URL="http://localhost:8080/"
-NEXT_PUBLIC_USER_SERVICE_URL="http://localhost:3001/"
\ No newline at end of file
+NEXT_PUBLIC_USER_SERVICE_URL="http://localhost:3001/"
+NEXT_PUBLIC_MATCHING_SERVICE_URL="ws://localhost:8081/match"
\ No newline at end of file
diff --git a/apps/frontend/README.md b/apps/frontend/README.md
index 9012775719..280e388d75 100644
--- a/apps/frontend/README.md
+++ b/apps/frontend/README.md
@@ -25,6 +25,7 @@ Then, follow the `.env.example` file and create a `.env` file in the current dir
```bash
NEXT_PUBLIC_QUESTION_SERVICE_URL="http://localhost:8080"
NEXT_PUBLIC_USER_SERVICE_URL="http://localhost:3001/"
+NEXT_PUBLIC_MATCHING_SERVICE_URL="wss://localhost:8081"
```
First, run the development server:
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 14c855521f..97d014fb96 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -16,6 +16,8 @@
"next": "14.2.13",
"react": "^18.2.0",
"react-dom": "^18.2.0",
+ "react-timer-hook": "^3.0.7",
+ "react-use-websocket": "^4.9.0",
"sass": "^1.79.2",
"typeface-montserrat": "^1.1.13"
},
diff --git a/apps/frontend/pnpm-lock.yaml b/apps/frontend/pnpm-lock.yaml
index 31ded77ff4..7e165fe896 100644
--- a/apps/frontend/pnpm-lock.yaml
+++ b/apps/frontend/pnpm-lock.yaml
@@ -29,6 +29,12 @@ importers:
react-dom:
specifier: ^18.2.0
version: 18.2.0(react@18.2.0)
+ react-timer-hook:
+ specifier: ^3.0.7
+ version: 3.0.7(react@18.2.0)
+ react-use-websocket:
+ specifier: ^4.9.0
+ version: 4.9.0
sass:
specifier: ^1.79.2
version: 1.79.2
@@ -1462,6 +1468,14 @@ packages:
react-is@18.3.1:
resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
+ react-timer-hook@3.0.7:
+ resolution: {integrity: sha512-ATpNcU+PQRxxfNBPVqce2+REtjGAlwmfoNQfcEBMZFxPj0r3GYdKhyPHdStvqrejejEi0QvqaJZjy2lBlFvAsA==}
+ peerDependencies:
+ react: '>=16.8.0'
+
+ react-use-websocket@4.9.0:
+ resolution: {integrity: sha512-/6OaCMggQCTnryCAsw/N+/wfH7bBfIXk5WXTMPdyf0x9HWJXLGUVttAT5hqAimRytD1dkHEJCUrFHAGzOAg1eg==}
+
react@18.2.0:
resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
engines: {node: '>=0.10.0'}
@@ -3536,6 +3550,12 @@ snapshots:
react-is@18.3.1: {}
+ react-timer-hook@3.0.7(react@18.2.0):
+ dependencies:
+ react: 18.2.0
+
+ react-use-websocket@4.9.0: {}
+
react@18.2.0:
dependencies:
loose-envify: 1.4.0
diff --git a/apps/frontend/src/app/layout.tsx b/apps/frontend/src/app/layout.tsx
index 0f28b2dbb9..61070cf842 100644
--- a/apps/frontend/src/app/layout.tsx
+++ b/apps/frontend/src/app/layout.tsx
@@ -1,6 +1,7 @@
import React from "react";
import { AntdRegistry } from "@ant-design/nextjs-registry";
import { ConfigProvider } from "antd";
+import WebSocketProvider from "@/components/WebSocketProvider/websocketprovider";
const RootLayout = ({
children,
@@ -23,7 +24,11 @@ const RootLayout = ({
},
}}
>
- {children}
+
+
+ {children}
+
+