Javascript – socket.io server not working in docker-compose environment

I’m creating a website using vite/React for the frontend and socket.io for the backend server in two separate docker containers, and I have an issue, I can’t connect to the socket.io server, I get this error: Firefox can’t establish a connection to the server at ws://localhost:6666/socket.io/?EIO=4&transport=websocket.
I manage my containers using docker-compose, I use the right port in my socket.io server and the frontend and backend containers are in the same docker network.
Here is my docker-compose:

version: '3.3'

services:

  backend:
    build: ./backend
    working_dir: /app
    environment:
      PORT: ${BACK_PORT}
      JWT_SECRET: ${JWT_SECRET}
    ports:
      - ${BACK_PORT}:${BACK_PORT}
    volumes:
      - ./backend:/app
      - ./shared_types:/app/src/shared_types
    networks:
      - all
    restart: unless-stopped
    command: sh start.sh

  frontend:
    depends_on:
      - backend
    image: node:lts-alpine
    working_dir: /app
    environment:
      PORT: ${FRONT_PORT}
      VITE_BACK_PORT: ${BACK_PORT}
    ports:
      - ${FRONT_PORT}:${FRONT_PORT}
    volumes:
      - ./frontend:/app
      - ./shared_types:/app/src/shared_types
    networks:
      - all
    restart: unless-stopped
    command: sh start.sh

networks:
  all:
    driver: bridge

The backend Dockerfile:

FROM node:lts-alpine

RUN npm i -g npm@latest

CMD ["npm", "run", "dev"]

the .env file:

BACK_PORT=6666
FRONT_PORT=8080
JWT_SECRET=ilovecandies

and I have a basic socket.io server like this:

import type { ServerOptions, Socket } from './types/server';
import { Server } from 'socket.io';
import http from 'http';
import { SignJWT, jwtVerify } from 'jose';
import express from 'express';

const createServerOptions = (options?: Partial<ServerOptions>): ServerOptions => {
  return {
    port: 3000,
    ...options,
  };
};

export const createServer = (options?: Partial<ServerOptions>) => {
  const serverOptions = createServerOptions(options);
  const app = express();
  const httpServer = http.createServer(app);
  const server: Socket = new Server(httpServer, {
    cors: {
      origin: '*',
    },
    transports: ['websocket'],
  });
  const secret = new TextEncoder().encode(process.env.JWT_SECRET!);

  server.on('connection', async socket => {
    console.log(`Client ${socket.id} connected!`);

    const verify = await jwtVerify(socket.handshake.auth.token, secret);

    console.log(verify);
    socket.on('disconnect', () => {
      console.log(`Client ${socket.id} disconnected!`);
    });
  });

  return {
    start: () => {
      console.log(`Server: listening on port ${serverOptions.port}.`);
      server.listen(serverOptions.port);
    }
  };
};

and the main.ts:

import { createServer } from './server';

(() => {
  const server = createServer({
    port: +process.env.PORT!,
  });
  server.start();
})();

(The Socket type is a custom socket.io Server with custom events map)

and in my frontend, when I’m trying to connect like this:

const socket = io(`http://localhost:${import.meta.env.VITE_BACK_PORT!}`, {
  transports: ["websocket"],
  reconnection: false,
  auth: {
    token:
      document.cookie
        .split("; ")
        .find(x => x.startsWith("snet-token="))
        ?.split("=")[1] ?? "",
  },
});

It doesn’t work, I don’t know why. Instead of localhost I also tried 0.0.0.0, and backend, and I also tried everything without the http:// prefix, but none of that worked.