Web Socket connection is failing between Flask and React container

General
, ,
1

I am trying to setup a dockerized development for ReactJS and Flask

  1. My all other api are working correctly but the socket connection is failing.
  2. When i sh into react container, and try to form socket connection with flask, it’s working, but when using react app on localhost, the socket connection is failing.
  3. CORs is allowed on the flask server
  4. Accessing the flask server using docker service name
  5. Everything (API + web sockets) seems to be working fine when running outside docker containers.
  6. Tried to create a docker-network in the compose file as well
  7. Tried disabling the Firewall on my MacBook as well
// React Comp accessing flask service
const socket = io('http://pythonapp-dev:7784');
socket.on('connect', () => console.log('Connected:', socket.id));
socket.on('connect_error', (err) => console.error('Connection error:', err));

// Error message in the browser 
Cross-Origin Request Blocked: 
The Same Origin Policy disallows reading the remote resource at 
http://pythonapp-dev:7784/socket.io/?EIO=4&transport=polling&t=lb67pv7p. 
(Reason: CORS request did not succeed). Status code: (null).

Connection error: Error: xhr poll error
    TransportError transport.js:7
    onError transport.js:39
    doPoll polling-xhr.js:55
    emit index.js:136
    _onError polling-xhr.js:161
    onreadystatechange polling-xhr.js:135
CertiTesterDevicePage.jsx:30:48

// All API call work properly
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

export default defineConfig({
  plugins: [react()],
  server: {
    host: '0.0.0.0',
    proxy: {
      '/api': {
        target: 'http://pythonapp-dev:7784',
        changeOrigin: true,
        secure: false
      }
    },
  },
})


// test.js runs successfully when running it inside of reactjs container
// Can see client connected as well in the server log  
import { io } from "socket.io-client";

const socket = io("http://pythonapp-dev:7784");

socket.on("connect", () => {
    console.log("Successfully connected to the server!");
    socket.emit("message", "Hello from React app!");
});

// app.py
CORS(app, origins="*")
socketio = SocketIO(app, cors_allowed_origins="*", logger=True, engineio_logger=True)
.
.
if __name__ == "__main__":
    socketio.run(app, debug=True, port=7784, host="0.0.0.0")

// docker-compose file
services:
  pythonapp-dev:
    build:
      context: ./server
      dockerfile: Dockerfile.python.socat
    ports:
      - '7784:7784'
    command: sh -c "sleep 10s; python3 certi_tester/send_data.py & sleep 30s; gunicorn -w 1 -k eventlet -b 0.0.0.0:7784 app:app"
    privileged: true

  reactapp-dev:
    build:
      context: ./client
      dockerfile: Dockerfile.reactapp
    ports:
      - '5173:5173'
    command: sh -c "sleep 40s; npm run dev --host"
    depends_on:
      - pythonapp-dev
    privileged: true


// Dockerfile.react
FROM node:20.11.1-alpine
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
EXPOSE 5173

//Dockerfile.python.socat
FROM python:3.9
WORKDIR /usr/app
COPY . ./
RUN pip install --upgrade pip
RUN apt-get update && \
    apt-get install -y gnupg && \
    apt-get update && \
    apt-get install -y socat
RUN pip install -r ./requirements.txt
EXPOSE 7784
2

You are running react and flask in container, but the app is called by a client/browser? Did you check browsers developer tools network tab?

3

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.