React Frontend is not receiving backend Socket.io emitted signals - reactjs

Question

I learned socket.io a few days ago and since I have been trying to build a global chat app. I have perfectly set up the backend as well as frontend but for some reason my frontend code isn't receiving the emitted signals from the backend, I checked the backend and yes the Signals are being passed over to the backend. Here's the Code, I will share the server index.js, redux slice, & also the frontend code which sends the request.
import express from 'express';
import cors from 'cors';
import http from 'http';
import dt from 'dotenv';
import {Server} from 'socket.io';
import userRoutes from './routes/userRoutes.js';
import {dbConnect} from './config/db.js'
import {errorHandler} from './middlewares/errorMiddleware.js'
const dotenv = dt.config();
import MSG from './models/messageModel.js';
const PORT = process.env.NODE_PORT || 5000;
const app = express();
app.use(express.urlencoded({extended : false}));
app.use(express.json());
app.use(cors());
const server = http.createServer(app);
dbConnect();
const io = new Server(server, {
cors : {
origin : "http://localhost:5173",
methods : ["GET","POST"]
}
});
io.on('connection', (socket) => {
socket.on('conn_made', async() => {
const messages = await MSG.find();
socket.emit('initload', {msg : messages});
})
socket.on('post', async(data) => {
const message = await MSG.create(data);
socket.emit('updatemsg', message);
})
});
app.use('/api/user', userRoutes);
app.use(errorHandler);
server.listen(PORT, () => {
console.log(`The Server is running on ${PORT}`);
});
This is the Index.js.
import { createSlice } from "#reduxjs/toolkit";
import io from 'socket.io-client';
const socket = io.connect('http://localhost:8000/');
const initState = {
messages : [],
isLoading : false
}
export const messageSlice = createSlice({
name : 'message',
initialState : initState,
reducers : {
resetmsg : (state) => {
state.messages = [];
state.isLoading = false;
},
addInit : (state,action) => {
state.isLoading = false;
console.log(action.payload);
},
connect : (state) => {
socket.emit('conn_made');
state.isLoading = true;
},
post : (state,action) => {
socket.emit('post', action.payload);
},
receive : (state,action) => {
state.messages.push(action.payload);
}
}
});
export const {resetmsg,addInit,connect,post,receive} = messageSlice.actions;
export default messageSlice.reducer;
This is the redux slice that emits some signals.
import React, { useState, useEffect } from 'react';
import {FaSignOutAlt, FaShare} from 'react-icons/fa';
import {logout} from '../features/auth/authSlice';
import { useNavigate } from 'react-router-dom';
import {useSelector, useDispatch} from 'react-redux';
import io from 'socket.io-client';
const socket = io.connect('http://localhost:8000/');
import {resetmsg , addInit , connect , post , receive } from '../features/messages/messageSlice';
const Mainchat = () => {
const [connected, setConnected] = useState(false);
const [text, setText] = useState("");
const {user} = useSelector((state) => state.auth);
const dispatch = useDispatch();
const navigate = useNavigate();
socket.on('initload', (data) => {
const {msg} = data;
dispatch(addInit(msg));
})
socket.on('updatemsg', (data) => {
dispatch(receive(data));
})
const handleConnect = () => {
dispatch(connect());
setConnected(true);
}
const handleLogout = async () => {
await dispatch(logout());
dispatch(resetmsg());
navigate('/login');
}
const onSend = () => {
const msg = {user : user._id , text : text};
dispatch(post(msg))
setText("");
}
return (
<section className='container flex flex-col p-4 mt-16 h-full w-[40vw] border-2 border-gray-300 rounded-lg'>
<div className='flex flex-row justify-between mb-5'>
<h1 className='text-3xl font-bold'>{connected ? "Connected." : "Disconnected."}</h1>
<button onClick={handleLogout}><FaSignOutAlt /></button>
</div>
{connected ? (
<div className='flex flex-col space-y-2'>
<div className='h-[400px] border-y-2 overflow-y-scroll'>
</div>
<div className='flex flex-row justify-between'>
<input value={text} onChange={(e) => setText(e.target.value)} className='w-96 border-2 border-black py-1 px-2 rounded-lg' type='text' placeholder='Type your Message...' />
<button onClick={onSend}><FaShare/></button>
</div>
</div>
) : (
<button onClick={handleConnect}>Connect</button>
)}
</section>
)
}
export default Mainchat
This is the frontend Code. I can't seem to find the issue anyhow, When I click 'Connect', it actually does emit the signal to the backend but the signal emitted from the backend is not read.
I can't seem to find the issue anyhow, When I click 'Connect', it actually does emit the signal to the backend but the signal emitted from the backend is not read.