feat: remove socket.io and use server sent events

app/.env.example

@@ -1,3 +1,2 @@
 VITE_APP_BASE_URL=/dynamodb/
-VITE_API_SOCKET_URL=http://localhost:8080
 VITE_API_BASE_URL=http://localhost:8080/dynamodb/api

app/.env.local

@@ -1,3 +1,2 @@
 VITE_APP_BASE_URL=/dynamodb/
-VITE_API_SOCKET_URL=http://localhost:4567
 VITE_API_BASE_URL=http://localhost:4567/dynamodb/api

app/.env.production

@@ -1,3 +1,2 @@
-VITE_API_SOCKET_URL=/
 VITE_APP_BASE_URL=/dynamodb/
 VITE_API_BASE_URL=/dynamodb/api

app/package.json

@@ -22,7 +22,6 @@
     "codemirror": "^6.0.1",
     "darkreader": "^4.9.58",
     "lodash": "^4.17.21",
-    "socket.io-client": "^4.6.1",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6"
   },

app/src/constants/routes.ts

@@ -9,7 +9,8 @@ const routes = {
   },
   DATABASE: {
     ALL: "/database/tables",
-    RESTORE: "/database/restore",
+    RESTORE: "/database/restore/:uid",
+    STREAM: "/database/stream/:uid",
   },
   ITEM: {
     CREATE: "/tables/:tableName/items",

app/src/services/table.ts

@@ -41,8 +41,9 @@ export async function getRemoteTables(body: object) {
   return data;
 }
 
-export async function restoreTables(body: object) {
-  const { data } = await axios.post(ROUTES.DATABASE.RESTORE, body);
+export async function restoreTables(uid:string, body: object) {
+  const url = interpolate(ROUTES.DATABASE.RESTORE, { uid });
+  const { data } = await axios.post(url, body);
 
   return data;
 }

app/src/views/table/RestoreTables.vue

@@ -347,10 +347,12 @@
 </template>
 
 <script lang="ts" setup>
-import io from "socket.io-client";
+import axios from "axios";
 import * as bootstrap from "bootstrap";
 import { useRouter } from "vue-router";
+import ROUTES from "../../constants/routes";
 import { inject, reactive, ref } from "vue";
+import { generateString, interpolate } from "@/utils/string";
 import { getRemoteTables, restoreTables } from "@/services/table";
 
 const store: any = inject("store");
@@ -398,30 +400,40 @@ const explore = async () => {
   }
 };
 
-const socket = io(import.meta.env.VITE_API_SOCKET_URL);
+const sseOnMessageHandler = (sse, { data }) => {
+  const { event, tableName, error } = JSON.parse(data);
 
-socket.on("SUCCESS", ({ tableName }) => {
-  progress.done.push(tableName);
-  progress.queue = progress.queue.filter((e) => e !== tableName);
-});
+  if(event === 'END'){
+    return sse.close();
+  }
 
-socket.on("FAILED", ({ tableName, error }) => {
-  progress.failed.push(tableName);
-  progress.queue = progress.queue.filter((e) => e !== tableName);
+  if (error) {
+    progress.failed.push(tableName);
+    progress.queue = progress.queue.filter((e) => e !== tableName);
 
-  toast.className = "text-bg-danger";
-  toast.message = error.response?.data?.message ?? error.message;
-  const toastEl = new bootstrap.Toast(toastRef.value, { delay: 1000 });
-  setTimeout(() => toastEl.show(), 0);
-});
+    toast.className = "text-bg-danger";
+    toast.message = error.response?.data?.message ?? error.message;
+    const toastEl = new bootstrap.Toast(toastRef.value, { delay: 1000 });
+    setTimeout(() => toastEl.show(), 0);
+  } else {
+    progress.done.push(tableName);
+    progress.queue = progress.queue.filter((e) => e !== tableName);
+  }
+}
 
 const restore = async () => {
   progress.failed = [];
   progress.done = [];
   progress.queue = localTables.value;
 
+  const uid = generateString(32)
+  const eventSourceURL = interpolate(`${axios.defaults.baseURL}${ROUTES.DATABASE.STREAM}`, { uid });
+
+  const sse = new EventSource(eventSourceURL);
+  sse.onmessage = (payload) => sseOnMessageHandler(sse, payload);
+
   try {
-    await restoreTables({ credentials, tableNames: localTables.value });
+    await restoreTables(uid, { credentials, tableNames: localTables.value });
   } catch (error) {
     toast.className = "text-bg-danger";
     toast.message = error.response?.data?.message ?? error.message;

app/yarn.lock

@@ -586,11 +586,6 @@
   resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz#8be36a1f66f3265389e90b5f9c9962146758f728"
   integrity sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==
 
-"@socket.io/component-emitter@~3.1.0":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz#96116f2a912e0c02817345b3c10751069920d553"
-  integrity sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==
-
 "@types/bootstrap@^5.2.6":
   version "5.2.6"
   resolved "https://registry.yarnpkg.com/@types/bootstrap/-/bootstrap-5.2.6.tgz#e861b3aa1f4a1434da0bf50fbaa372b6f7e64d2f"
@@ -1167,7 +1162,7 @@ de-indent@^1.0.2:
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
   integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==
 
-debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.4, debug@~4.3.1, debug@~4.3.2:
+debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -1211,22 +1206,6 @@ electron-to-chromium@^1.4.251:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz#61046d1e4cab3a25238f6bf7413795270f125592"
   integrity sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==
 
-engine.io-client@~6.4.0:
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-6.4.0.tgz#88cd3082609ca86d7d3c12f0e746d12db4f47c91"
-  integrity sha512-GyKPDyoEha+XZ7iEqam49vz6auPnNJ9ZBfy89f+rMMas8AuiMWOZ9PVzu8xb9ZC6rafUqiGHSCfu22ih66E+1g==
-  dependencies:
-    "@socket.io/component-emitter" "~3.1.0"
-    debug "~4.3.1"
-    engine.io-parser "~5.0.3"
-    ws "~8.11.0"
-    xmlhttprequest-ssl "~2.0.0"
-
-engine.io-parser@~5.0.3:
-  version "5.0.6"
-  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-5.0.6.tgz#7811244af173e157295dec9b2718dfe42a64ef45"
-  integrity sha512-tjuoZDMAdEhVnSFleYPCtdL2GXwVTGtNjoeJd9IhIG3C1xs9uwxqRNEu5WpnDZCaozwVlK/nuQhpodhXSIMaxw==
-
 error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
@@ -2513,24 +2492,6 @@ slash@^3.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
-socket.io-client@^4.6.1:
-  version "4.6.1"
-  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-4.6.1.tgz#80d97d5eb0feca448a0fb6d69a7b222d3d547eab"
-  integrity sha512-5UswCV6hpaRsNg5kkEHVcbBIXEYoVbMQaHJBXJCyEQ+CiFPV1NIOY0XOFWG4XR4GZcB8Kn6AsRs/9cy9TbqVMQ==
-  dependencies:
-    "@socket.io/component-emitter" "~3.1.0"
-    debug "~4.3.2"
-    engine.io-client "~6.4.0"
-    socket.io-parser "~4.2.1"
-
-socket.io-parser@~4.2.1:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.2.2.tgz#1dd384019e25b7a3d374877f492ab34f2ad0d206"
-  integrity sha512-DJtziuKypFkMMHCm2uIshOYC7QaylbtzQwiMYDuCKy3OPkjLzu4B2vAhTlqipRHHzrI0NJeBAizTK7X+6m1jVw==
-  dependencies:
-    "@socket.io/component-emitter" "~3.1.0"
-    debug "~4.3.1"
-
 "source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
@@ -2828,21 +2789,11 @@ wrappy@1:
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
 
-ws@~8.11.0:
-  version "8.11.0"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-8.11.0.tgz#6a0d36b8edfd9f96d8b25683db2f8d7de6e8e143"
-  integrity sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==
-
 xml-name-validator@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-4.0.0.tgz#79a006e2e63149a8600f15430f0a4725d1524835"
   integrity sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==
 
-xmlhttprequest-ssl@~2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz#91360c86b914e67f44dce769180027c0da618c67"
-  integrity sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==
-
 yallist@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"

server/package.json

@@ -40,8 +40,7 @@
     "express": "^4.18.1",
     "joi": "^17.6.0",
     "morgan": "^1.10.0",
-    "open": "^8.4.0",
-    "socket.io": "^4.6.0"
+    "open": "^8.4.0"
   },
   "repository": {
     "type": "git",

server/src/bin/server.js

@@ -7,7 +7,6 @@ import routes from "../routes";
 import AWS from "../config/aws";
 import compression from "compression";
 import errorHandler from "../errors/handler";
-import SocketService from "../services/socket.service";
 
 AWS.initialize();
 
@@ -52,6 +51,4 @@ export default ({ port, host, debug, open: _open, prefix }) => {
       open(URL);
     }
   });
-
-  SocketService.initialize(server);
 };

server/src/constants/event.js

@@ -1,4 +1,5 @@
 export const EVENTS = {
   FAILED: 'FAILED',
   SUCCESS: 'SUCCESS',
+  END: 'END',
 };

server/src/controllers/database.controller.js

@@ -1,5 +1,9 @@
 import AWS from "../config/aws";
+import EventEmitter from 'events';
 import DatabaseServiceProvider from "../services/database.service";
+import { EVENTS } from "../constants/event";
+
+const eventEmitter = new EventEmitter();
 
 export async function index(req, res, next) {
   try {
@@ -13,12 +17,35 @@ export async function index(req, res, next) {
   }
 }
 
+export async function stream(req, res, next) {
+  const uid = req.params.uid;
+
+  res.writeHead(200, {
+    "Connection": "keep-alive",
+    "Content-Type": "text/event-stream",
+    "Cache-Control": "no-cache, no-transform",
+  });
+
+  const emit = (id, event, data = {}) => {
+    if (id !== uid) return;
+
+    res.write(`data: ${JSON.stringify({ ...data, event })}\n\n`);
+  }
+
+  eventEmitter.on(EVENTS.SUCCESS, (id, payload) => emit(id, EVENTS.SUCCESS, payload));
+  eventEmitter.on(EVENTS.FAILED, (id, payload) => emit(id, EVENTS.FAILED, payload));
+  eventEmitter.on(EVENTS.END, (id) => emit(id, EVENTS.END));
+}
+
 export async function restore(req, res, next) {
   try {
+    const uid = req.params.uid;
     const { credentials, tableNames } = req.body;
+
     const DatabaseService = new DatabaseServiceProvider(AWS, credentials);
-    const data = await DatabaseService.restore(tableNames);
+    const data = await DatabaseService.restore(tableNames, uid, eventEmitter);
 
+    eventEmitter.emit(EVENTS.END, uid);
     return res.json(data);
   } catch (error) {
     next(error);

server/src/index.js

@@ -7,7 +7,6 @@ import routes from "./routes";
 import AWS from "./config/aws";
 import compression from "compression";
 import errorHandler from "./errors/handler";
-import SocketService from "./services/socket.service";
 
 AWS.initialize();
 
@@ -40,5 +39,3 @@ const server = app.listen(4567, () => {
     `dynamodb-dashboard started at: http://127.0.0.1:4567/dynamodb\n`
   );
 });
-
-SocketService.initialize(server);

server/src/routes/database.routes.js

@@ -5,6 +5,7 @@ import { validateAll, validateRestore } from '../validators/database.validators.
 const router = Router();
 
 router.post("/tables", [validateAll], DatabaseController.index);
-router.post("/restore", [validateRestore], DatabaseController.restore);
+router.post("/restore/:uid", [validateRestore], DatabaseController.restore);
+router.get("/stream/:uid", [], DatabaseController.stream);
 
 export default router;

server/src/services/database.service.js

@@ -3,14 +3,11 @@ import { EVENTS } from "../constants/event";
 import { OPERATIONS } from "../constants/dynamodb";
 import { constructSchema } from "../utils/dynamodb";
 
-import SocketService from "./socket.service";
 import ItemServiceProvider from "./item.service";
 import TableServiceProvider from "./table.service";
 
 export default class DatabaseServiceProvider {
   constructor(_AWS_, credentials) {
-    this.io = SocketService.io;
-
     // TARGET
     this.TARGET = {
       AWS: _AWS_,
@@ -32,7 +29,7 @@ export default class DatabaseServiceProvider {
     return tables;
   }
 
-  async restore(tableNames) {
+  async restore(tableNames, uid, eventEmitter) {
     await Promise.all(tableNames.map(async (tableName) => {
       try {
         const { Table } = await this.SOURCE.TableService.describe(tableName);
@@ -52,10 +49,10 @@ export default class DatabaseServiceProvider {
         } while (params.ExclusiveStartKey);
 
         // SUCCESS
-        this.io.emit(EVENTS.SUCCESS, { tableName });
+        eventEmitter.emit(EVENTS.SUCCESS, uid, { tableName });
       } catch (error) {
         // ERROR
-        this.io.emit(EVENTS.FAILED, { tableName, error });
+        eventEmitter.emit(EVENTS.FAILED, uid, { tableName, error });
         console.error(error);
       }
     }));