Web Socket connection is failing between Flask and React container

[nuttysunday]

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

Guidelines

• I have read and understood this category's guidelines before making this post.

[nuttysunday]

The problem was browser still needs to access it as localhost because it does not know about the docker service name, and the socket is being formed using the browser and not the container.

// Changes in the backend 
CORS(app, origins=["*","http://localhost:5173"])
socketio = SocketIO(app, cors_allowed_origins=["*", "http://localhost:5173"], logger=True, engineio_logger=True)

// Changes in the frontend 
const socket = io('http://localhost:7784', {transports: ['websocket', 'polling', 'flashsocket']});

[github-actions[bot]]

💬 Your Product Feedback Has Been Submitted 🎉

Thank you for taking the time to share your insights with us! Your feedback is invaluable as we build a better GitHub experience for all our users.

Here's what you can expect moving forward ⏩

• Your input will be carefully reviewed and cataloged by members of our product teams. 
  • Due to the high volume of submissions, we may not always be able to provide individual responses.
  • Rest assured, your feedback will help chart our course for product improvements.
• Other users may engage with your post, sharing their own perspectives or experiences. 
• GitHub staff may reach out for further clarification or insight. 
  • We may 'Answer' your discussion if there is a current solution, workaround, or roadmap/changelog post related to the feedback.

Where to look to see what's shipping 👀

• Read the Changelog for real-time updates on the latest GitHub features, enhancements, and calls for feedback.
• Explore our Product Roadmap, which details upcoming major releases and initiatives.

What you can do in the meantime 💻

• Upvote and comment on other user feedback Discussions that resonate with you.
• Add more information at any point! Useful details include: use cases, relevant labels, desired outcomes, and any accompanying screenshots.

As a member of the GitHub community, your participation is essential. While we can't promise that every suggestion will be implemented, we want to emphasize that your feedback is instrumental in guiding our decisions and priorities.

Thank you once again for your contribution to making GitHub even better! We're grateful for your ongoing support and collaboration in shaping the future of our platform. ⭐