Setting up websocket with docker nginx and react

Docker Hub
1

0down votefavorite

1

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

2

Hi,

Did you solve the issue? Having a similar issue now :confused:

3

If someone still need it I found this and it work for me :slight_smile: https://stackoverflow.com/questions/52808580/establish-web-socket-communication-with-react-and-express-nginx-docker#=