Why is Dockerized node.js Server with Vanija JS client not connecting over Socket.io

Git repo

I have an app, composed of:

1. MySQL server
2. scraper (node.js)
   • app parse data from website and save it to MySQL.
3. server (node.js)
   • listening for upcoming connections over socket.io and serving data to the client.
4. client (Vanilla JS/HTML)

server/controllers/SocketController.js

// Server: http server and socket init
const http = require('http').createServer();
const io = require('socket.io')(http, {
    cors: { origin: "*" }
});

http.listen(3001,() => console.log('Server listening on 3001'));

server/Dockerfile

FROM node:16

WORKDIR /server

COPY /server/package.json .

RUN npm install

COPY /server .

EXPOSE 3001
CMD [ "node", "index.js" ]

web/app.js

// Client listen on localhost:3001
const socket = io('ws://server:3001/');

When working locally everything worked fine, then I decided to make my life miserable and try to dockerize the whole thing (using docker the first time).
First, everything went smooth, made MySQL, scraper, and server up and working just fine.

Then it came to the point I would need to set up Nginx webserver I did so inside docker-compose.yml

docker-compose.yml

version: "3.7"

services:
  mysqldb:
    image: mysql:5.7
    container_name: mysql
    restart: unless-stopped
    env_file:
      - ./.env
    environment:
      MYSQL_DATABASE: ${MYSQL_DATABASE}
      MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}
      MYSQL_PASSWORD: ${MYSQL_ADMIN_PASSWORD}
      MYSQL_USER: ${MYSQL_ADMIN_USERNAME}
    ports:
      - $MYSQL_PORT:$MYSQL_PORT
    volumes:
      - ./db:/docker-entrypoint-initdb.d
    networks:
        - celtra_lottery_network

  scraper:
    restart: unless-stopped
    container_name: scraper
    build:
      context: .
      dockerfile: ./scraper/Dockerfile
    image: scraper
    env_file:
      - ./.env
    ports:
      - $NODE_SCRAPER_PORT:$NODE_SCRAPER_PORT
    volumes:
      - ./scraper:/scraper
      - /scraper/node_modules
    depends_on:
      - mysqldb
    stdin_open: true
    tty: true
    networks:
        - celtra_lottery_network

  server:
    restart: unless-stopped
    container_name: server
    build:
      context: .
      dockerfile: ./server/Dockerfile
    image: server
    env_file:
      - ./.env
    ports:
      - $NODE_SERVER_PORT:$NODE_SERVER_PORT
    volumes:
      - ./server:/server
      - /server/node_modules
    depends_on:
      - mysqldb
    stdin_open: true
    tty: true
    networks:
        - celtra_lottery_network

  client:
    image: nginx
    container_name: client
    ports:
        - 80:80
    volumes:
      - ./web:/usr/share/nginx/html
    networks:
      - celtra_lottery_network
    links:
      - server

volumes:
  db-config: null
  db-data:

networks:
   celtra_lottery_network:
      driver: bridge

When I open Nginx container in the browser, it shows the page but the data is not there. Strangely the console is not showing any error msg.

Already try it:

• Is the server inside docker running ✔️
• Is the server port exposed ✔️
• Change the client connection string to ‘0.0.0.0:3001’ ✔️

I assumed that I would connect to socket the same way I was connecting server and scraper to MySQL so:

• Host would be the docker-container-name
• Port would be the EXPOSE 3001 port that the server is listening on.

Question:
Can someone point out the problem in my code would be really grateful for any help.