I was developing an app which receives twitter feed in live format and everything worked fine untill i tested the production environment with docker.

The problem i have is that my client (react) does not want to connect to socket connection. (react code at the end)

This is my nginx.conf file

upstream client {
server client:3000;
}

upstream api {
server api:8080;
}

server{

listen 80;

location / {
proxy_pass http://client;
}

location /socket.io {
proxy_pass http://api;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
}

location /api{
rewrite /api/(.*) /$1 break;
proxy_pass http://api;
}
}
and this my docker compose

version: "3"
services:
nginx:
restart: always
image: coco/nginx
build:
dockerfile: Dockerfile.dev
context: ./nginx
ports:
- "3050:80"
api:
image: coco/server
build:
dockerfile: Dockerfile.dev
context: ./server
volumes:
- /app/node_modules
- ./server:/app
client:
image: coco/client
build:
dockerfile: Dockerfile.dev
context: ./client
volumes:
- /app/node_modules
- ./client:/app
THE QUESTION

In my react container i have the entire code which is responsible for websocket communication but the key problem is to setup the websocket itself with this line of code const socket = socketIOClient("http://localhost:8080");, When it was on localhost it worked fine, and now when i start docker-compose, nginx maps everything to associated with back-end to port 3050. But now even if i write "http://api/" or localhost:3050, it doesnt want to connect directly, so im not sure what to do at this stage.

in my app.js file i have this

// configuring the port which is from config folder
let server = app.listen(config.port, function (err) {
if (err) throw err;
console.log("Server started on port " + config.port);
});

const io = require('socket.io').listen(server)

require('./routes/routes')(app, io)
In my react component i have a button, and when pressed it executes the following logic

const socket = socketIOClient("http://localhost:3050");
socket.on("connect", () => {
console.log("Socket Connected");
socket.on("tweets", data => {
console.log(data)
});
});
but it doesnt display anything nor it connects to anything

Pleas help