Kevin Powell - CommunityKP-C
Kevin Powell - Community•14mo ago•
19 replies
chikanlegbees

Socket.io on backend and socket.io client on react front end issue

// front end
import { io } from "socket.io-client";

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

socket.on("connect", () => {
  console.log("Connected to the server with ID:", socket.id);
});

// Export the socket instance to use it in components
export default socket;


anybody here familiar with socket.io and socket.client??

// backend
const app = express();
const server = createServer(app);
const io = new Server(server, { cors: { origin: "http://localhost:5178" } });

io.on("connection", (socket) => {
  console.log("A user connected:", socket.id);
});

app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
export { server, app };


import { server } from "./app.js";
import "dotenv/config";
server.listen(process.env.PORT, () => console.log("listening on port 3000"));


for some reason when i run both my server and front end i dont see any console logs 😦

Request URL:
ws://localhost:5178/
Request Method:
GET
Status Code:
101 Switching Protocols

this is what i see in the network tab

my backend is running on port 3000

I’m new to socket.io and I’m not understanding why I’m not seeing my console logs on the front end or backend I’m not seeing any cors errors in the console either

For some reason my network tab logs the above sending a request to a different port even tho my server is on port 3000

My app.js file contains the server creation and everything I’m exporting the server to server.js file where I’m listening to the app I did this as I was testing my express app using super test

I’d love some guidance

https://github.com/moahnaf11/Messaging-App-Backend

Relevant field app.js and server.js
Was this page helpful?