reactjs – Getting a lot of errors in this aws-sdk server mainly in websockets

I am getting multiple warning and errors but I am not able to debug them

  1. The delay between the input submitted and the server is extremely long (approx 90 sec) with increases with more emit functions given to it

  2. As I am putting a console.log to see the socket. connection.. there are multiple socket connections happening and then it is showing this error on the console.log of the front end

    WebSocket connection to ‘ws://localhost:3000/socket.io/?EIO=4&transport=websocket&sid=6So5fa_va5oXey7JAABA’ failed:

  3. The getProjectFunction is not giving any output as an array

Index.js (server side)

const http = require('http');
const express  = require('express');
const {Server: SocketServer } = require('socket.io');
const cors = require("cors");
// const { Socket } = require('socket.io');
const { copyS3Folder, fetchS3Folder, saveToS3, getprojectfolders } = require('./awsStart.js');
// const { stringify } = require('querystring');
const {fetchDir, fetchFileContent, saveFile} = require('./fs');
// const path = require("path");
// const fs = require('fs/promises');

const app = express()
app.use(cors());
const server = http.createServer(app)
const io = new SocketServer(server, {
    cors:{
        origin: "http://localhost:3001",
        methods: ["GET", "POST"]
    }
})

io.attach(server);
io.on("connection", (socket) => {
    // console.log("Someone is here")
    // console.log(socket.id, 'connected');

    socket.on("createStartUp", async (data) => {
        console.log(data)
        await copyS3Folder(`group-source`, `main-dir/${data}`)
    })

    socket.on("fetchStartUpProjects", async (data) => {
        console.log("Fetch Function Recieved",data)
        await getprojectfolders(data, (err, directories) => {
            if(err){
                console.error("There was some error")
            }else{
                socket.emit('directories', directories);
            }
        })
        // await fetchS3Folder(`code/${data}`, path.join(__dirname, `../tmp/${data}`));
    });

    socket.on('disconnect', () => {
        // console.log('User disconnected');
      });

})

// io.on("connection", (socket) => {
   
// })


server.listen(3000, () => console.log("Server is Running"));

This is the function I am calling (awsStart.js)

async function getprojectfolders(Prefix, callback){
    var params = {
        Bucket: process.env.S3_BUCKET || "",
        Delimiter: "https://stackoverflow.com/",
        Prefix: Prefix,
    };

    s3.listObjectsV2(params, function(err, data) {
        if (err) {
          return 'There was an error viewing your album: ' + err.message
        } else {
        console.log(data.CommonPrefixes, "<<< directories");
                      

        var directories = data.CommonPrefixes.map(function(prefix) {
            return prefix.Prefix;
          });
       }
        if (err) {
            callback(err, null);
          } else {
            const directories = data.CommonPrefixes.map(prefix => prefix.Prefix).sort();
            console.log(directories, "<<< directories array");
            callback(null, directories)}
      })

    console.log(directories)

}

This is the front-end which is emitting the function fetchStartupProject

import { useNavigate } from 'react-router-dom';
import io from 'socket.io-client';

export const Login = () => {
    const [name, setName] = useState('');
    const [startupId, setStartupId] = useState('');
    const socket = io.connect("localhost:3000");
const navigateRoom = () => {
        socket.emit("fetchStartUpProjects", startupId)
        navigate(`/projectroom/${startupId}`)
    }

}

Finally this is the js file which is supposed to receive the data which is given by the function which is in server-side and map it

import logo from "./logo-closeup-tp.png";
import "./ProjectRoom.scss";
import io from 'socket.io-client';
import toast, { Toaster }  from 'react-hot-toast';
import { useState } from "react";

const socket = io('http://localhost:3000');

export const ProjectRoom = () => {  

    const [directories, setDirectories] = useState([]);

    socket.on('directories', (directories) => {
        setDirectories(directories);
      });
}

I tried Chatgpt and it told me to change the getProjectFolders function it is showing a different error

Unexpected end of input

Read more here: Source link