Socket.io is not connecting to my Express.js server - node.js

Question

I am trying to get Socket.io to connect to my Express.js server but I haven't been able to successfully connect them despite closely following the examples given on the Socket.io website and other code I have been using for reference.
When I try socket.on('connect', console.log(socket.connected)) on the client side it always returns false and when I log the connect_error it returns server error with the following traceback:
Error: server error
at Socket.onPacket (socket.js:317:1)
at XHR.push../node_modules/#socket.io/component-emitter/index.js.Emitter.emit (index.js:143:1)
at XHR.onPacket (transport.js:100:1)
at callback (polling.js:83:1)
at Array.forEach (<anonymous>)
at XHR.onData (polling.js:86:1)
at Request.push../node_modules/#socket.io/component-emitter/index.js.Emitter.emit (index.js:143:1)
at Request.onData (polling-xhr.js:188:1)
at Request.onLoad (polling-xhr.js:229:1)
at XMLHttpRequest.xhr.onreadystatechange (polling-xhr.js:147:1)
These are the relevant parts of my index.js server file on the backend:
const express = require('express');
const cors = require('cors');
const app = express();
// /db/session is express-session related code
const session = require('./db/session');
const { createServer } = require('http');
const { Server } = require('socket.io');
const PORT = process.env.PORT || 5000;
const httpServer = createServer(app);
app.use(cors({
// DEV_ORIGIN is http://localhost:3000
origin: process.env.DEV_ORIGIN,
credentials: true,
}));
const io = new Server(httpServer, {
cors: {
origin: process.env.DEV_ORIGIN,
methods: ["GET", "POST"],
credentials: true
}
});
app.use(session);
io.use((socket, next) => {
session(socket.request, {}, next);
});
httpServer.listen(PORT, () => console.log(`Server running on port ${PORT}`));
// this never seems to do anything
io.on('connection', function() {
console.log('Connected')
});
Here is the main file I have on the client side for the Socket.io connection:
import io from 'socket.io-client';
// API_ORIGIN is http://localhost:5000
export let socket = io(process.env.API_ORIGIN, {
withCredentials: true,
autoConnect: true,
});
I am testing using the socket from this file in a component like so:
import { socket } from '../../services/socket.js';
import React, { useEffect } from 'react';
export default function Lobby() {
useEffect(() => {
socket.on('connect',
console.log(socket.connected)
)
socket.on('connect_error', (err) => {
console.log(err)
});
}, [])
}
But as I mentioned above, socket.connected always returns false. I would really appreciate your help!

Answer 1

I managed to resolve it. The issue was caused by process.env.API_ORIGIN. By changing the code as follows, I was able to get it to work.
The new client side socket.io file:
import { io } from "socket.io-client";
import { serverAddress } from "../settings";
export let socket = io(serverAddress, {
withCredentials: true,
autoConnect: true,
});
and the settings file I created:
const LOCAL_ADDRESS = 'http://localhost:5000';
const PRODUCTION_ADDRESS = [PRODUCTION URL HERE]
export const devEnv = process.env.REACT_APP_ENV === 'development';
export const serverAddress = devEnv? LOCAL_ADDRESS : PRODUCTION_ADDRESS;