From 21735a236a0e954d5ae001e8eb6d3fb8dc08377a Mon Sep 17 00:00:00 2001 From: Karma Riuk Date: Wed, 7 May 2025 17:29:21 +0200 Subject: [PATCH] created a websocket to witness the progress of the processing --- package.json | 7 ++++--- public/css/style.css | 4 ++++ public/index.html | 9 ++++++++- public/js/socket.js | 26 ++++++++++++++++++++++++++ src/routes/answers.js | 11 +++++++---- src/server.js | 2 +- src/socket.js | 17 +++++++++++++++++ src/utils/process_data.js | 29 +++++++++++++++++++++++++++++ 8 files changed, 96 insertions(+), 9 deletions(-) create mode 100644 public/js/socket.js create mode 100644 src/socket.js create mode 100644 src/utils/process_data.js diff --git a/package.json b/package.json index 061361d..93f6a76 100644 --- a/package.json +++ b/package.json @@ -9,14 +9,15 @@ "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js" }, "dependencies": { - "express": "^4.18.2", "cors": "^2.8.5", "dotenv": "^16.3.1", - "multer": "^1.4.5-lts.1" + "express": "^4.18.2", + "multer": "^1.4.5-lts.1", + "socket.io": "^4.8.1" }, "devDependencies": { - "nodemon": "^3.0.2", "jest": "^29.7.0", + "nodemon": "^3.0.2", "supertest": "^6.3.4" } } diff --git a/public/css/style.css b/public/css/style.css index 908bc2b..eba9de4 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -25,3 +25,7 @@ h1 { /* adjust size as you like */ height: auto; } + +#progress-container { + display: none; +} diff --git a/public/index.html b/public/index.html index a0a7bab..26ab09e 100644 --- a/public/index.html +++ b/public/index.html @@ -7,6 +7,8 @@ Dataset Downloader & Answer Uploader + + @@ -42,9 +44,14 @@

+ -
+ +
+ + 0% +
diff --git a/public/js/socket.js b/public/js/socket.js new file mode 100644 index 0000000..aad9f7a --- /dev/null +++ b/public/js/socket.js @@ -0,0 +1,26 @@ +const socket = io(); + +// 2) Grab our new DOM elements +const progressContainer = document.getElementById("progress-container"); +const progressBar = document.getElementById("progress-bar"); +const progressText = document.getElementById("progress-text"); +const statusEl = document.getElementById("status"); + +function setProgress(percent) { + progressBar.value = percent; + progressText.textContent = `${percent}%`; +} + +// 3) Update UI on each progress message +socket.on("progress", (data) => { + setProgress(data.percent); + if (data.percent == 100) { + statusEl.style.color = "green"; + statusEl.textContent = "Processing complete!"; + } +}); + +socket.on("started-processing", () => { + progressContainer.style.display = "block"; + setProgress(0); +}); diff --git a/src/routes/answers.js b/src/routes/answers.js index 6397278..6b032ff 100644 --- a/src/routes/answers.js +++ b/src/routes/answers.js @@ -1,6 +1,8 @@ import { Router } from "express"; import multer from "multer"; import { InvalidJsonFormatError } from "../utils/errors.js"; +import { io as socket } from "../socket.js"; +import { evaluate_comments } from "../utils/process_data.js"; const router = Router(); @@ -72,8 +74,9 @@ router.post("/submit/comments", upload.single("file"), async (req, res) => { throw error; } - // TODO: Save the file or process it further - // For now, just return success + socket.emit("started-processing"); + evaluate_comments(validatedData); + res.status(200).json({ message: "Answer submitted successfully", data: validatedData, @@ -105,8 +108,8 @@ router.post("/submit/refinement", upload.single("file"), async (req, res) => { throw error; } - // TODO: Save the file or process it further - // For now, just return success + socket.emit("started-processing"); + evaluate_comments(validatedData); res.status(200).json({ message: "Answer submitted successfully", data: validatedData, diff --git a/src/server.js b/src/server.js index 4d9ef8f..bcd407b 100644 --- a/src/server.js +++ b/src/server.js @@ -2,7 +2,7 @@ import express, { json } from "express"; import cors from "cors"; import dotenv from "dotenv"; import routes from "./routes/index.js"; -import createSocketServer from "./socket.js"; +import { createSocketServer } from "./socket.js"; dotenv.config(); diff --git a/src/socket.js b/src/socket.js new file mode 100644 index 0000000..49e580a --- /dev/null +++ b/src/socket.js @@ -0,0 +1,17 @@ +import http from "http"; +import { Server } from "socket.io"; + +function onConnect(socket) { + console.log("Websocket client connected:", socket.id); +} + +let io; + +function createSocketServer(app) { + const httpServer = http.createServer(app); + io = new Server(httpServer); + io.on("connection", onConnect); + return httpServer; +} + +export { createSocketServer, io }; diff --git a/src/utils/process_data.js b/src/utils/process_data.js new file mode 100644 index 0000000..5ce7dc4 --- /dev/null +++ b/src/utils/process_data.js @@ -0,0 +1,29 @@ +import { io as socket } from "../socket.js"; + +export const evaluate_comments = async (answers) => { + const total = Object.keys(answers).length; + let i = 0; + for (const [key, value] of Object.entries(answers)) { + console.log(`Processing ${key}: ${value}...`); + await new Promise((res) => setTimeout(res, 500)); + console.log("Done"); + const data = { + percent: Math.floor((++i / total) * 100), + }; + socket.emit("progress", data); + } +}; + +export const evaluate_refinement = async (answers) => { + const total = Object.keys(answers).length; + let i = 0; + for (const [key, value] of Object.entries(answers)) { + console.log(`Processing ${key}: ${value}...`); + await new Promise((res) => setTimeout(res, 500)); + console.log("Done"); + const data = { + percent: Math.floor((++i / total) * 100), + }; + socket.emit("progress", data); + } +};