Can't Access Flask Routes with SocketIO

[esot0]

Hi there! I realized that I can't connect to my routes when I run it with flask-socketIO. Removing it, my project worked as intended. I'm a little stumped here, as I'm not quite sure what happened. They flip between CORS errors in the log, to just giving me error code 500. However, I have CORS setup extensively already, so I'm not even sure where that's coming from. Double checked my mongoDB and it does have my current IP address listed.

Here's a bit of what my backend looks like:

socketio = SocketIO(app,cors_allowed_origins="http://localhost:3000", logger=True, engineio_logger=True)
/*flask stuff*/

@app.route('/user/<username>/tutoring_history', methods=['GET'])
@cross_origin(supports_credentials=True)
def tutoring_history(username):
           /* function stuff*/

@socketio.on('msg')
def handle_message(msg):
    print('received message: ' + msg)


@socketio.on('image')
def handle_image(img):
    print('received img path: ' + img)

@socketio.on('connect')
def connect():
    print("Connected")

And frontend (react):

Socket Context

import React from 'react'
import io from 'socket.io-client'

export const socket = io.connect("http://127.0.0.1:5000");
export const SocketContext = React.createContext();

Index.js

export const axios_instance = axios.create({
  baseURL: 'http://127.0.0.1:5000'
});

axios_instance.interceptors.request.use(
  function (config) {
    const token = localStorage.getItem("token");
    if (token) {
      config.headers["Authorization"] = 'Bearer ' + token;
    }
    return config;
  },
  function (error) {
    return Promise.reject(error);
  }
);


ReactDOM.render(
  <SocketContext.Provider value={socket}>
    <React.StrictMode>
      <AppRouter />
    </React.StrictMode>
  </SocketContext.Provider>,
  document.getElementById('root')
);

Chat.js

import { SocketContext } from '../Hooks/socketContext';
  const handleSubmit = (e) => {

    e.preventDefault();
    const config = {
      headers: {
        'Content-Type': 'application/json'
      }
    }

    const message = {
      recipient: recipient._id.$oid,
      body: e.target.message.value,
      sender: jwt_decode(localStorage.getItem("token")).id
    }

    axios_instance.post(`route here`)
      .then((res) => {
        socket.emit("msg", res.data)
       /*stuff*/
      })
      .catch((err) => {
        console.log(err)
      })
  }

Logs
(Files so this post doesn't get annoyingly long)
Server:
server_log.txt

Client:
client_log.txt

Thank you so much for any help!

[miguelgrinberg]

Are you monkey patching eventlet? I don't think pymongo will work under eventlet without monkey patching.

[esot0]

Sorry for leaving that part out, yes, I am now monkey patching at the very top above all my imports. I unfortunately still get err connection refused from mongoDB. Previously I did the monkey patch at the bottom, so that may be why I got the extra stuff

localhost:27017: [Errno 111] ECONNREFUSED, Timeout: 30s, Topology Description: <TopologyDescription id: 

6081863cc18a4ed95fd1b33e, topology_type: Single, servers: [<ServerDescription ('localhost', 27017) server_type: Unknown, rtt:

 None, error=AutoReconnect('localhost:27017: [Errno 111] ECONNREFUSED')>]>

[miguelgrinberg]

Unfortunately I don't use pymongo so I don't really know how to help. This could be an incompatibility between eventlet and pymongo, Socket.IO can't really cause this. Maybe try removing eventlet while keeping Socket.IO to see if that makes a difference, because your assessment that Socket.IO is causing this problem is really not possible.

[esot0]

It's okay, thank you for the help. I'm using mongoengine instead of pymongo if it makes a difference? Unfortunately, even without gevent and eventlet, the app does not work. Tinkered with MongoDB and got a little closer to finding the root; now, requests are going through on every page except the page I have my socket_io requests on. I investigated a bit with Postman and it seems that the backend is the root of the problem, as no matter what I do now, the program simply hangs when I send out a request to my DB while a socket connection is open.

[miguelgrinberg]

I'm using mongoengine instead of pymongo

Your log shows that you are using pymongo. This is a dependency of mongoengine. In general problems with eventlet and third party libraries happen at the bottom of the chain on the lowest level dependencies, which are often the ones that send requests out to the network.

Feel free to attach a new log session that runs without eventlet and hangs. I'm pretty sure this package has no side effects that can cause your database connections to fail, but happy to take a quick look if you provide the logs.

[esot0]

Thank you so much for everything again, but unfortunately, my logs are clear on both the front and backend. The most I have is the ECONN refused. I was wondering though, upon closer inspection one of the modules I'm using has an init_app function I call near the top; would that conflict in any way, since socketio wraps the app?

init_app.txt

[miguelgrinberg]

@esot0 Flask-SocketIO does not wrap the Flask app. It just adds a middleware that acts as a request router between the Flask and Socket.IO sides. An init_app() method is a standard part of a Flask extension, that should not present any problem.

[esot0]

Got it, thanks for everything :)

[esot0]

Hey there! I ended up fixing the prior error with the database (dotenv was simply too low), but now I'm getting actual errors from socketio when I go to the page where I initialize socketio on the frontend. The session becomes invalid, and the request does not go through.

Backend Log:

Invalid session 4mzWaXkylL5uLCfTAAAM (further occurrences of this error will be logged with level INFO)
127.0.0.1 - - [25/Apr/2021 22:37:49] "GET /socket.io/?EIO=4&transport=polling&t=NaC2UVZ&sid=4mzWaXkylL5uLCfTAAAM HTTP/1.1" 400 -
127.0.0.1 - - [25/Apr/2021 22:37:49] "POST /socket.io/?EIO=4&transport=polling&t=NaC2UVY&sid=4mzWaXkylL5uLCfTAAAM HTTP/1.1" 500 -
bi0bFSB_acSluT-xAAAN: Received packet PONG data 
127.0.0.1 - - [25/Apr/2021 22:37:49] "POST /socket.io/?EIO=4&transport=polling&t=NaC2UVi&sid=bi0bFSB_acSluT-xAAAN HTTP/1.1" 200 -
Error on request:
Traceback (most recent call last):
  File "/home/emily/anaconda3/lib/python3.8/site-packages/werkzeug/serving.py", line 323, in run_wsgi
    execute(self.server.app)
  File "/home/emily/anaconda3/lib/python3.8/site-packages/werkzeug/serving.py", line 312, in execute
    application_iter = app(environ, start_response)
  File "/home/emily/anaconda3/lib/python3.8/site-packages/flask/app.py", line 2464, in __call__
    return self.wsgi_app(environ, start_response)
  File "/home/emily/anaconda3/lib/python3.8/site-packages/flask_socketio/__init__.py", line 45, in __call__
    return super(_SocketIOMiddleware, self).__call__(environ,
  File "/home/emily/anaconda3/lib/python3.8/site-packages/engineio/middleware.py", line 60, in __call__
    return self.engineio_app.handle_request(environ, start_response)
  File "/home/emily/anaconda3/lib/python3.8/site-packages/socketio/server.py", line 571, in handle_request
    return self.eio.handle_request(environ, start_response)
  File "/home/emily/anaconda3/lib/python3.8/site-packages/engineio/server.py", line 410, in handle_request
    socket = self._get_socket(sid)
  File "/home/emily/anaconda3/lib/python3.8/site-packages/engineio/server.py", line 612, in _get_socket
    raise KeyError('Session is disconnected')
KeyError: 'Session is disconnected'
sQzhNwbWWkkpQL0yAAAA: Received packet PONG data 
127.0.0.1 - - [25/Apr/2021 22:37:49] "POST /socket.io/?EIO=4&transport=polling&t=NaC2a6E&sid=sQzhNwbWWkkpQL0yAAAA HTTP/1.1" 200 -
5dfjk43OVOcMIQxDAAAD: Sending packet PING data None
127.0.0.1 - - [25/Apr/2021 22:37:49] "GET /socket.io/?EIO=4&transport=polling&t=NaC2T_i.0&sid=5dfjk43OVOcMIQxDAAAD HTTP/1.1" 200 -
dLpEhTDqvjwuq0ieAAAB: Received packet PONG data 
127.0.0.1 - - [25/Apr/2021 22:37:49] "POST /socket.io/?EIO=4&transport=polling&t=NaC2a6M&sid=dLpEhTDqvjwuq0ieAAAB HTTP/1.1" 200 -
sd05Nt9h36U438UuAAAC: Sending packet PING data None
127.0.0.1 - - [25/Apr/2021 22:37:49] "GET /socket.io/?EIO=4&transport=polling&t=NaC2T_j.0&sid=sd05Nt9h36U438UuAAAC HTTP/1.1" 200 -
F8NWEP0kplNBH9UsAAAS: Received packet PONG data 
127.0.0.1 - - [25/Apr/2021 22:37:49] "POST /socket.io/?EIO=4&transport=polling&t=NaC2a6O.0&sid=F8NWEP0kplNBH9UsAAAS HTTP/1.1" 200 -
-oMF-u87v_LMwFIrAAAI: Sending packet PING data None
127.0.0.1 - - [25/Apr/2021 22:37:51] "GET /socket.io/?EIO=4&transport=polling&t=NaC2U17&sid=-oMF-u87v_LMwFIrAAAI HTTP/1.1" 200 -
TjtLavxSpH_aN3JwAAAT: Received packet PONG data 
127.0.0.1 - - [25/Apr/2021 22:37:51] "GET /socket.io/?EIO=4&transport=polling&t=NaC2U1F&sid=kMbMvf_pggsBx1azAAAJ HTTP/1.1" 200 -
kMbMvf_pggsBx1azAAAJ: Sending packet PING data None
127.0.0.1 - - [25/Apr/2021 22:37:51] "POST /socket.io/?EIO=4&transport=polling&t=NaC2a6P&sid=TjtLavxSpH_aN3JwAAAT HTTP/1.1" 200 -
Invalid session 4mzWaXkylL5uLCfTAAAM
127.0.0.1 - - [25/Apr/2021 22:37:51] "POST /socket.io/?EIO=4&transport=polling&t=NaC2a6U&sid=4mzWaXkylL5uLCfTAAAM HTTP/1.1" 400 -
5dfjk43OVOcMIQxDAAAD: Received packet PONG data 
127.0.0.1 - - [25/Apr/2021 22:37:51] "POST /socket.io/?EIO=4&transport=polling&t=NaC2a8V&sid=5dfjk43OVOcMIQxDAAAD HTTP/1.1" 200 -

Frontend Log:

XHRPOSThttp://127.0.0.1:5000/socket.io/?EIO=4&transport=polling&t=NaC2sVY&sid=AVaLeq5yOGQ2kZixAAAX
CORS Missing Allow Origin

XHRGEThttp://127.0.0.1:5000/socket.io/?EIO=4&transport=polling&t=NaC2sVZ&sid=AVaLeq5yOGQ2kZixAAAX
[HTTP/1.0 400 BAD REQUEST 24959ms]

XHRPOSThttp://127.0.0.1:5000/socket.io/?EIO=4&transport=polling&t=NaC2sVf&sid=fF4TeM-1qAtF5vH2AAAY
CORS Missing Allow Origin

XHRGEThttp://127.0.0.1:5000/socket.io/?EIO=4&transport=polling&t=NaC2sVh&sid=fF4TeM-1qAtF5vH2AAAY
[HTTP/1.0 400 BAD REQUEST 24977ms]

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:5000/socket.io/?EIO=4&transport=polling&t=NaC2sVY&sid=AVaLeq5yOGQ2kZixAAAX. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:5000/socket.io/?EIO=4&transport=polling&t=NaC2sVf&sid=fF4TeM-1qAtF5vH2AAAY. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

XHRPOSThttp://127.0.0.1:5000/socket.io/?EIO=4&transport=polling&t=NaC2ydT&sid=zXg9dJ77VyHlGbhQAAAh
CORS Missing Allow Origin

XHRGEThttp://127.0.0.1:5000/socket.io/?EIO=4&transport=polling&t=NaC2ydV&sid=zXg9dJ77VyHlGbhQAAAh
[HTTP/1.0 400 BAD REQUEST 24675ms]

XHRPOSThttp://127.0.0.1:5000/socket.io/?EIO=4&transport=polling&t=NaC2yeQ&sid=51gDMdO99e8G-Vh3AAAq
CORS Missing Allow Origin

XHRGEThttp://127.0.0.1:5000/socket.io/?EIO=4&transport=polling&t=NaC2yeS&sid=51gDMdO99e8G-Vh3AAAq
[HTTP/1.0 400 BAD REQUEST 24651ms]

XHRPOSThttp://127.0.0.1:5000/socket.io/?EIO=4&transport=polling&t=NaC2ysK&sid=AVaLeq5yOGQ2kZixAAAX
[HTTP/1.0 400 BAD REQUEST 23810ms]

XHRPOSThttp://127.0.0.1:5000/socket.io/?EIO=4&transport=polling&t=NaC2z61&sid=fF4TeM-1qAtF5vH2AAAY
[HTTP/1.0 400 BAD REQUEST 22807ms]

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:5000/socket.io/?EIO=4&transport=polling&t=NaC2ydT&sid=zXg9dJ77VyHlGbhQAAAh. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:5000/socket.io/?EIO=4&transport=polling&t=NaC2yeQ&sid=51gDMdO99e8G-Vh3AAAq. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

XHRPOSThttp://127.0.0.1:5000/socket.io/?EIO=4&transport=polling&t=NaC32jd&sid=zXg9dJ77VyHlGbhQAAAh
[HTTP/1.0 400 BAD REQUEST 97ms]

XHRPOSThttp://127.0.0.1:5000/socket.io/?EIO=4&transport=polling&t=NaC32zJ&sid=51gDMdO99e8G-Vh3AAAq
[HTTP/1.0 400 BAD REQUEST 24193ms]

[miguelgrinberg]

You haven't configured CORS properly. Add cors_allowed_origins='http://127.0.0.1:5000' to your server.