Socketio emit and on is not working properly in NodeJS - node.js

Question

Socket io.on is not working in NodeJS.
Front End - Angular 14x
socket io version - "socket.io-client": "^4.5.4",
BackEnd - Nodejs 14x
socket.io version - "socket.io": "^4.5.4",
FrontEnd Code -
import SocketClient from 'socket.io-client';
export class Customer_FileUpload implements OnInit {
#Input() io = SocketClient(environment.url, {
autoConnect: true
})
submitRequest() {
this.shared.submitRequest(data).subscribe({
next: (response) => {
const result = JSON.parse(JSON.stringify(response));
console.log(result);
this.io.emit('emit-data', "I am good");
this.io.on('data2', (msg) => {
console.log('message: ' + JSON.stringify(msg));
});
},
error: (error) => {
console.log(error);
}
})
}
}
Backend Code -
index.js
const express = require('express');
const bodyparser = require('body-parser');
const cors = require('cors');
const fileUpload = require('express-fileupload');
const http = require('http');
const { RealTime } = require('./utils/socket');
const socket = new RealTime();
const app = express();
app.use(cors())
app.options('*', cors());
app.use(bodyparser.json({limit: '5mb', extended: true}))
app.use(bodyparser.urlencoded({limit: '5mb', extended: true}))
const authRoutes = require('./routes/authRoutes');
const apiRoutes = require('./routes/routes');
// For File Upload
app.use(fileUpload({
limits: { fileSize: 5 * 1024 * 1024 },
}));
app.use('/auth', authRoutes);
app.use('/user', apiRoutes);
//Capture All 404 errors
app.use(function (req,res,next){
res.status(404).send('Error - Unable to find the requested resource!');
});
app.use((req, res, next) => {
req.socket.on('error', () => {});
next();
});
const server = http.createServer(app);
socket.intialized_connection(server);
socket.init();
module.exports = server;
Socket.js
let io = null;
class RealTime {
constructor() {
if (io) return io;
io = this;
return io;
}
intialized_connection(httpServer) {
return (io = require('socket.io')(httpServer, {
cors: {
origin: '*',
// methods: ['GET', 'POST', 'PUT', 'DELETE'],
},
}));
}
init() {
io.on("connection", function (socket) {
console.log("A user connected");
//Whenever someone disconnects this piece of code executed
socket.on('disconnect', function () {
console.log('A user disconnected');
});
});
}
getIO() {
if (!io) {
throw new Error('Socket.io is not initialized');
}
return io;
}
sendEvents(event, data) {
this.getIO().emit(event, data);
}
receivedEvents(event) {
console.log(event);
this.getIO().on(event, function(data) {
console.log("I am emiiting here, ")
console.log(data)
});
}
}
module.exports = {
RealTime
};
Controller.js
exports.submitRequest = async(req, res) => {
socket.receivedEvents('emit-data');
socket.sendEvents("data2", {
message: "hello from nodejs controller"
});
res.json("done");
}
I have 2 issues here. Issues are ---
socket.receivedEvents -- Is not working, Not getting any error message, Neither in the client side not server side.
socket.sendEvents, It is working fine, in the client side, when we click second time. Attach the screenshot below.
First Time when we click on the submit button --
First time when we click on the submit
Second Time when we click on the submit button --
Second time when we click on the submit
Third Time when we click on the submit button --
Getting 2 times the same result.
Third time when we click on the submit
Any idea what I am doing wrong?
Can you please give me these 2 solution's problem?