Socket IO transport 404


I’m attempting to connect a simple socket-io application using server side react and python. I’m getting a 404 on the socket connect. The issue is that there are too many moving pieces for me to know what’s going on and debug the error (ie NGINX, python, react, Cloudflare). The code is as far as I can make a prototypical example as simple as I can make it.

Here’s the NGINX code –

server {
  
    listen 80;
    listen [::]:80;
    server_name abookoftwelveflowers.com www.abookoftwelveflowers.com;
    return 302 https://$server_name$request_uri;

}

server {

    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    ssl                    on;
    ssl_certificate         /etc/ssl/certs/cloudflare_book.pem;
    ssl_certificate_key     /etc/ssl/private/cloudflare_book.pem;

    server_name abookoftwelveflowers.com www.abookoftwelveflowers.com;

    location / {
            #root /NEST/stream/front/build;
            #index index.htl index.htm
            proxy_pass http://unix:/NEST/stream/back_flask/guni_one.sock;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
    }
}

Here’s the Python Code –

gunicorn

#!/bin/bash
cp -r /NEST/stream/front/files /NEST/stream/front/build/files
gunicorn --workers 3 --bind unix:guni_two.sock -m 007  wsgiapi:app --daemon

wsgi.py

#!/bin/env python
  

from my_app import app, sio

if __name__ == '__main__':
    sio.run(app, debug=True)
    #app.run(host="0.0.0.0", port=4000, debug=True, threaded=True, ssl_context="adhoc")

my_app.py

from flask import Flask, send_from_directory, request
from flask_cors import CORS
from flask_socketio import SocketIO

#import socketio
import requests
import json

app = Flask(__name__, static_folder="../front/build", static_url_path="/")
CORS(app)

sio = SocketIO()

@sio.on('connect')
def test_connect(auth):
    emit('my response', {'data': 'Connected'})

@sio.on('disconnect')
def test_disconnect():
    print('Client disconnected')

@sio.on('message')
def handle_message(data):
    print('received message: ' + data)

@app.route("/")
def hello_world():
    return app.send_static_file("index.html")

...other routes...

and on the main page of my application

import Navigation from "../components/Navigation.js"
import Webcounter from "../components/Webcounter.js"

import React, {useEffect, useState} from "react";
import {useHistory} from "react-router-dom";
import { io } from "socket.io-client";

function Main() {
  let history = useHistory();

  const socketfunc = () => {
    console.log('inside socketfunc in Main.js');
    const socket = io('https://www.abookoftwelveflowers.com')
    console.log('value of socket: ', socket);
    socket.on('connect', (socket) => {
      console.log('value of socket inside connect: ', socket);
    })
  }

  useEffect(()=>{
    console.log('inside useEffect for Main.js')
    socketfunc()
  }, []);

When I run the code the website works – I can access the front end and back end routes, however socket io repeatedly fails and the error that is in the web console is this –

GET https://www.abookoftwelveflowers.com/socket.io/?EIO=4&transport=polling&t=NrXngtX 404
            

And this matches the output from /var/log/nginx/ which looks like:

172.70.178.17 - - [27/Nov/2021:14:49:49 +0000] "GET /socket.io/?EIO=4&transport=polling&t=NrXtx0u HTTP/2.0" 502 568 "https://abookoftwelveflowers.com/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36"

So, I think that the issue is coming from NGINX in the way that I am using .sock as the proxy_pass but I’m not sure what exactly. It’s the way I (finally) was able to get NGINX to work, so I don’t want to necessarily change it to using a port number if I don’t have to. Any suggestions?

Any suggestions on how to debug this?

Source: React – Stack Overflow

November 27, 2021
Category : News
Tags: flask | nginx | reactjs | socket.io | sockets

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.