Add API gateway support for websockets

Author: cheehongw

api_gateway/src/index.ts

@@ -1,23 +1,46 @@
 import express from 'express';
 import cookieParser from 'cookie-parser';
 import { setupProxies } from './proxy/proxy';
-import { routes_config } from './proxy/routes_config';
+import { routes_config, ws_collab_proxy_config, ws_match_proxy_config } from './proxy/routes_config';
 import { jwtCheck, onCredentialFailure } from './middleware/token_check';
 import { setupLogging } from './middleware/logging';
 import { isLocal } from './proxy/service_addresses';
+import { createProxyMiddleware } from 'http-proxy-middleware';
 
-const app = express();
-const port = process.env.PORT || 8000;
+const httpApp = express();
+const httpProxyPort: number = parseInt(process.env.PORT || "8000");
 
-app.use(cookieParser())
+const wsMatchMakeApp = express();
+const wsMatchMakePort : number = parseInt(process.env.PORT || "7999");
 
-setupLogging(app);
-app.use(jwtCheck.unless({ path: [/\/auth\//] }));
-app.use(onCredentialFailure);
+const wsCollabApp = express();
+const wsCollabAppPort : number = parseInt(process.env.PORT || "7998");
 
-setupProxies(app, routes_config);
 
-app.listen(port, () => {
+httpApp.use(cookieParser())
+
+setupLogging(httpApp);
+httpApp.use(jwtCheck.unless({ path: [/\/auth\//] }));
+httpApp.use(onCredentialFailure);
+
+setupProxies(httpApp, routes_config);
+setupProxies(wsMatchMakeApp, ws_match_proxy_config)
+setupProxies(wsCollabApp, ws_collab_proxy_config)
+
+
+
+
+httpApp.listen(httpProxyPort, () => {
+    console.log(`API Gateway running in ${isLocal ? "local" : "docker"} mode`)
+    console.log(`API Gateway listening at http://localhost:${httpProxyPort}`);
+})
+
+wsMatchMakeApp.listen(wsMatchMakePort, () => {
+    console.log(`API Gateway running in ${isLocal ? "local" : "docker"} mode`)
+    console.log(`API Gateway listening at http://localhost:${wsMatchMakePort}`);
+})
+
+wsCollabApp.listen(wsCollabAppPort, () => {
     console.log(`API Gateway running in ${isLocal ? "local" : "docker"} mode`)
-    console.log(`API Gateway listening at http://localhost:${port}`);
+    console.log(`API Gateway listening at http://localhost:${wsCollabAppPort}`);
 })

api_gateway/src/proxy/routes_config.ts

@@ -1,4 +1,4 @@
-import { matchServiceHostUrl, questionServiceUrl, userServiceHostUrl } from "./service_addresses";
+import { collabServiceHostUrl, matchServiceHostUrl, questionServiceUrl, userServiceHostUrl } from "./service_addresses";
 
 export const routes_config = [
     {
@@ -24,13 +24,26 @@ export const routes_config = [
                 '/auth': '/' }
         }
     },
+]
+
+export const ws_match_proxy_config = [
     {
-        url: "/matchmake",
+        url: "/",
         proxy: {
             target: matchServiceHostUrl,
             ws: true,
-            pathRewrite: { 
-                '/matchmake': '/' }
+            changeOrigin: true,
+        }
+    }
+]
+
+export const ws_collab_proxy_config = [
+    {
+        url: "/",
+        proxy: {
+            target: collabServiceHostUrl,
+            ws: true,
+            changeOrigin: true,
         }
     }
 ]

api_gateway/src/proxy/service_addresses.ts

@@ -3,4 +3,5 @@ export const isLocal = process.env.ENV_TYPE !== "docker";
 
 export const questionServiceUrl = isLocal ? "http://localhost:8080" : "http://question-service:8080/";
 export const userServiceHostUrl = isLocal ? "http://localhost:8081" : "http://user-service:8081/";
-export const matchServiceHostUrl = isLocal ? "ws://localhost:8082" : "ws://matching-service:8082"
+export const matchServiceHostUrl = isLocal ? "http://localhost:8082" : "http://matching-service:8082"
+export const collabServiceHostUrl = isLocal ? "http://localhost:8083" : "http://collab-service:8083"

docker_compose_dev.yml

@@ -9,9 +9,13 @@ services:
       ENV_TYPE: docker
     ports:
       - "8000:8000"
+      - "7999:7999"
+      - "7998:7998"
     depends_on:
       - question-service
       - user-service
+      - matching-service
+      - collab-service
 
   question-service:
     container_name: question-service

frontend/src/api/auth.ts

@@ -1,4 +1,4 @@
-import { apiGatewayClient } from "./server"
+import { apiGatewayClient } from "./gateway"
 
 /**
  * Makes a login request and sets the access_token if successful

frontend/src/api/server.ts renamed to frontend/src/api/gateway.ts

@@ -4,3 +4,6 @@ export const apiGatewayClient = axios.create({
     baseURL:'http://localhost:8000',
     withCredentials: true
 })
+
+export const wsMatchMakeURL = 'http://localhost:7999'
+export const wsCollabUrl = 'ws://localhost:7998'

frontend/src/api/questions.ts

@@ -1,9 +1,9 @@
 import { AxiosResponse } from "axios";
 import { Question } from "../models/Question.model";
-import { questionServiceClient } from "./server";
+import { apiGatewayClient } from "./gateway";
 
 export async function fetchAllQuestions() {
-    const response = await questionServiceClient.get('/api/questions');
+    const response = await apiGatewayClient.get('/api/questions');
 
     const resData = response.data;
     const questions : Question[] = resData.map((q : any) => new Question(q._id, q.id, q.title, q.description, q.topics, q.difficulty))
@@ -18,7 +18,7 @@ export async function fetchAllQuestions() {
  */
 export async function fetchQuestion(_id: string) {
     try {
-        const response = await questionServiceClient.get(`/api/questions/${_id}`);
+        const response = await apiGatewayClient.get(`/api/questions/${_id}`);
 
         const resData = response.data;
         const resQuestion : Question = new Question(
@@ -43,7 +43,7 @@ export async function fetchQuestion(_id: string) {
  */
 export async function addQuestion(question : Question) {
 
-    const response : AxiosResponse = await questionServiceClient.post('/api/questions', {
+    const response : AxiosResponse = await apiGatewayClient.post('/api/questions', {
         title: question.title,
         description: question.descMd,
         topics: question.topics,
@@ -67,7 +67,7 @@ export async function addQuestion(question : Question) {
  * @param _id The uuid identifying the question resource
  */
 export async function delQuestion(_id : string) {
-    const response = await questionServiceClient.delete(`/api/questions/${_id}`);
+    const response = await apiGatewayClient.delete(`/api/questions/${_id}`);
 
     return response;
 }
@@ -81,7 +81,7 @@ export async function delQuestion(_id : string) {
  * @returns
  */
 export async function updateQuestion(_id: string, question: Question) {
-    const response : AxiosResponse = await questionServiceClient.put(`/api/questions/${_id}`, {
+    const response : AxiosResponse = await apiGatewayClient.put(`/api/questions/${_id}`, {
         title: question.title,
         description: question.descMd,
         topics: question.topics,

frontend/src/api/user.ts

@@ -1,6 +1,6 @@
 import { AxiosResponse } from "axios";
 import { SolvedQuestion } from "../models/SolvedQuestion.model"; // Import the SolvedQuestion model
-import { userServiceClient } from "./server";
+import { apiGatewayClient } from "./gateway";
 
 /**
  * Fetch questions completed by the user.
@@ -11,7 +11,7 @@ export async function fetchUserCompletedQuestions(
   userId: String
 ): Promise<SolvedQuestion[]> { 
   try {
-    const response: AxiosResponse = await userServiceClient.get(
+    const response: AxiosResponse = await apiGatewayClient.get(
       `/api/users/${userId}/questions`
     );
 
@@ -53,7 +53,7 @@ export async function addUserQuestion(
   category: string[]
 ): Promise<SolvedQuestion> { 
   try {
-    const response: AxiosResponse = await userServiceClient.post(
+    const response: AxiosResponse = await apiGatewayClient.post(
       `/api/users/${userId}/addquestions`,
       {
         userId,

frontend/src/contexts/matchmake.context.tsx

@@ -10,6 +10,7 @@ import { selectUser } from "../reducers/authSlice";
 import { useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { useToast } from "@chakra-ui/react";
+import { wsMatchMakeURL } from "../api/gateway";
 
 interface RoomDetail {
   partner: string;
@@ -45,7 +46,7 @@ export const MatchmakeProvider = ({
   const toast = useToast();
 
   useEffect(() => {
-    const socket = io("ws://localhost:8082", {
+    const socket = io(wsMatchMakeURL, {
       autoConnect: false,
     });
     setSocket(socket);

frontend/src/contexts/sharededitor.context.tsx

@@ -16,6 +16,7 @@ import { useLoaderData } from "react-router-dom";
 import { Buffer } from "buffer";
 import data from "../data/lang_temps.json";
 import { ToastId, useToast } from "@chakra-ui/react";
+import { wsCollabUrl } from "../api/gateway";
 
 export type language = keyof typeof data;
 
@@ -295,7 +296,7 @@ export const SharedEditorProvider = ({
           "base64"
         );
     const provider = new WebrtcProvider(roomvalue, doc, {
-      signaling: ["ws://localhost:8083"],
+      signaling: [wsCollabUrl],
       filterBcConns: true,
     });
     setProvider(provider);