polling-xhr.js:157 Error 502 Bad Gateway While trying to establish connection between the client and the server using SocketIO #1804

bruceleeoo7 · 2022-03-17T17:52:38Z

bruceleeoo7
Mar 17, 2022

I'm trying to deploy a simple flask application where client and server can communicate with each other using SocketIO. Below code is working fine without any errors locally, but it's throwing errors while deploying. These are the only files I'm using,

app.py

from flask import Flask, render_template
from flask_socketio import SocketIO, send

app = Flask(__name__)
app.config["SECRET_KEY"] = "secret"
app.config["DEBUG"] = True
socketio = SocketIO(app)

@socketio.on("message")
def handleMessage(data):
    print("Message : " + data["data"]);
    data["data"] = "Hello"
    send(data)

@app.route('/')
def home():
    return render_template("home.html")

if __name__ == "__main__":
    socketio.run(app)

home.html

<!DOCTYPE html>

<html>
    <head>
        <title>Sockets</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.4/socket.io.js" integrity="sha512-aMGMvNYu8Ue4G+fHa359jcPb1u+ytAF+P2SCb+PxrjCdO3n3ZTxJ30zuH39rimUggmTwmh2u7wvQsDTHESnmfQ==" crossorigin="anonymous"></script>
    </head>

    <body>
        <script type = "text/javascript">
            $(document).ready(function() {
                var socket = io.connect(location.protocol + "//" + document.domain + ':' + location.port);

                socket.on("connect", function() {
                    socket.send({data : "Connected"});
                });

                socket.on("message", function(data) {
                    console.log(data.data);
                });
            });
        </script>
    </body>
</html>

I'm trying to deploy this on AWS ec2, I've used nginx web server and gunicorn3 as wsgi. I've followed this tutorial to deploy this application.

Versions

nginx - 1.14.0.
gunicorn3 - 19.7.1.
flask - 2.0.3.
flask_socketio - 5.1.1.

nginx configuration file

server{
        listen 80;
        listen 443 ssl;

        ssl_certificate /home/ubuntu/sockets-bundle/domain.cert.pem;
        ssl_trusted_certificate /home/ubuntu/sockets-bundle/intermediate.cert.pem;
        ssl_certificate_key /home/ubuntu/sockets-bundle/private.key.pem;

        server_name emoviz.biz;

        location / {
                proxy_pass http://127.0.0.1:8000;
        }

        location /static {
                alias /home/ubuntu/flaskapp/static;
                expires 30d;
        }

        location /socket.io {
                include proxy_params;
                proxy_http_version 1.1;
                proxy_buffering off;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "Upgrade";
                proxy_pass http://127.0.0.1:5000/socket.io;
        }
}

I've tried many solutions provided on stackoverflow and github related to this but couldn't make it work. I'm new to deployment, I don't know what exactly causing the below error I've tried cors, downgrading things but couldn't find a solution. Any help to make it work would be much appreciated.

Error
_

_

Thanks in advance.

miguelgrinberg · 2022-03-17T18:46:49Z

miguelgrinberg
Mar 17, 2022
Maintainer

502 errors come from nginx. The error means that nginx is unable to forward requests your application. Either your hostname and/or port are wrong, or the server isn't listening for requests for some reason.

2 replies

bruceleeoo7 Mar 18, 2022
Author

Can you please suggest different things to try out miguel.

miguelgrinberg Mar 18, 2022
Maintainer

I have nothing else to suggest. The 502 error happens when nginx cannot communicate with your application. You have to figure out why this is the case. Something in your set up is incorrect.

schen96 · 2022-03-18T02:09:17Z

schen96
Mar 18, 2022

Your Falsk server apparentely resides on http://127.0.0.1:8000; but for some reason you proxy your ws connections to http://127.0.0.1:5000/socket.io. They should be same location.

1 reply

bruceleeoo7 Mar 18, 2022
Author

I changed 5000 -> 8000 still getting errors.

traubt · 2023-08-21T11:06:31Z

traubt
Aug 21, 2023

Hi,
I have the same problem when deploying my application to Linode.
Have you managed to resolve this problem?

TraubT

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

polling-xhr.js:157 Error 502 Bad Gateway While trying to establish connection between the client and the server using SocketIO #1804

{{title}}

Replies: 3 comments 3 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

polling-xhr.js:157 Error 502 Bad Gateway While trying to establish connection between the client and the server using SocketIO #1804

bruceleeoo7 Mar 17, 2022

Replies: 3 comments · 3 replies

miguelgrinberg Mar 17, 2022 Maintainer

bruceleeoo7 Mar 18, 2022 Author

miguelgrinberg Mar 18, 2022 Maintainer

schen96 Mar 18, 2022

bruceleeoo7 Mar 18, 2022 Author

traubt Aug 21, 2023

bruceleeoo7
Mar 17, 2022

Replies: 3 comments 3 replies

miguelgrinberg
Mar 17, 2022
Maintainer

bruceleeoo7 Mar 18, 2022
Author

miguelgrinberg Mar 18, 2022
Maintainer

schen96
Mar 18, 2022

bruceleeoo7 Mar 18, 2022
Author

traubt
Aug 21, 2023