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

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;