Flask SocketIO not working in Azure App Service

Question

Flask SocketIO not working in Azure App Service

Ziggy Zulueta 495 MVP

I have a simple chat app that works perfectly well in my localhost. It is a simple chat app that echoes whatever the user is inputting in the chat. When I deploy the deploy in Azure App Service the html page displays but nothing happens when the user inputs in the chat interface.

from flask import Flask, render_template
from flask_socketio import SocketIO
import os
from dotenv import load_dotenv

load_dotenv()

app = Flask(__name__)
app.config['SECRET_KEY'] = os.environ['SECRET_KEY']
socketio = SocketIO(app)

@app.route('/')
def index():
    return render_template('chat.html')

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

@socketio.on('connect')
def handle_connect():
    print('Client connected')

@socketio.on('disconnect')
def handle_disconnect():
    print('Client disconnected')

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

Here is the html page of chat.html

<!DOCTYPE html>
<html>
<head>
    <title>Chat Room</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Chat Room</h1>
    <ul id="messages"></ul>
    <form id="form" action="">
        <input id="input" autocomplete="off" autofocus/>
        <button>Send</button>
    </form>

    <script>
        var socket = io();
        socket.on('message', function(msg) {
            $('#messages').append($('<li>').text(msg));
        });
        $('#form').submit(function(e) {
            e.preventDefault();
            socket.send($('#input').val());
            $('#input').val('');
        });
    </script>
</body>
</html>

TP 124.7K Reputation points Volunteer Moderator

2024-03-31T06:12:24.9633333+00:00

Hi,

Please navigate to your web app in the portal, Configuration blade, and make sure that Web sockets is set to On and click Save.

Thanks.

-TP
Ziggy Zulueta 495 Reputation points MVP

2024-03-31T07:46:58.3+00:00

It is actually not located anymore in configuration:

But I did enable it via the CLI
TP 124.7K Reputation points Volunteer Moderator

2024-03-31T08:28:07.4233333+00:00

It's there on Windows. Regardless, you enabled it via CLI so that's all that matters.

What are you seeing in Fiddler when the app tries to send?

So you know I'm not making things up, below is from windows web app + new app service plan I created several minutes ago:
TP 124.7K Reputation points Volunteer Moderator

2024-03-31T08:30:46.8+00:00

I just read post from MS employee that says Linux apps always support websockets, so if that is true it should work even if you didn't enable it via CLI. No follow up on that post.
TP 124.7K Reputation points Volunteer Moderator

2024-03-31T08:48:03.6866667+00:00

For Node FAQ article says to disable perMessageDeflate. Unsure if this applies for your case. Have you tried disabling it?
Ziggy Zulueta 495 Reputation points MVP

2024-03-31T09:05:06.8166667+00:00

It took me a while to install Fiddler. It says this in the error:
Ziggy Zulueta 495 Reputation points MVP

2024-03-31T09:33:52.42+00:00
I setup the perMessageDeflate to false and still the same issue. nothing comes out

However, I did change the code and modified this statement. However the issue is the text comes out once in a blue moon. Like hard to replicate when the input text does come out

socketio = SocketIO(app, async_mode='eventlet')

Accepted answer

1 additional answer

Your answer

TP 124.7K Reputation points Volunteer Moderator

2024-03-31T06:12:24.9633333+00:00

Hi,

Please navigate to your web app in the portal, Configuration blade, and make sure that Web sockets is set to On and click Save.

Thanks.

-TP
Ziggy Zulueta 495 Reputation points MVP

2024-03-31T07:46:58.3+00:00

It is actually not located anymore in configuration:

But I did enable it via the CLI
TP 124.7K Reputation points Volunteer Moderator

2024-03-31T08:28:07.4233333+00:00

It's there on Windows. Regardless, you enabled it via CLI so that's all that matters.

What are you seeing in Fiddler when the app tries to send?

So you know I'm not making things up, below is from windows web app + new app service plan I created several minutes ago:
TP 124.7K Reputation points Volunteer Moderator

2024-03-31T08:30:46.8+00:00

I just read post from MS employee that says Linux apps always support websockets, so if that is true it should work even if you didn't enable it via CLI. No follow up on that post.
TP 124.7K Reputation points Volunteer Moderator

2024-03-31T08:48:03.6866667+00:00

For Node FAQ article says to disable perMessageDeflate. Unsure if this applies for your case. Have you tried disabling it?
Ziggy Zulueta 495 Reputation points MVP

2024-03-31T09:05:06.8166667+00:00

It took me a while to install Fiddler. It says this in the error:
Ziggy Zulueta 495 Reputation points MVP

2024-03-31T09:33:52.42+00:00

I setup the perMessageDeflate to false and still the same issue. nothing comes out

However, I did change the code and modified this statement. However the issue is the text comes out once in a blue moon. Like hard to replicate when the input text does come out

socketio = SocketIO(app, async_mode='eventlet')

Answer 1

Summarizing the answer shared by Ziggy Zulueta - Thanks for sharing the solution that worked for you with the community. It's much appreciated. Since the Microsoft Q&A community has a policy that "The question author cannot accept their own answer. They can only accept answers by others"

Scenario:

Provisioning simple chat app/Flask SocketIO to Azure App Service WebApp.

Issue:

Upon deploying the chat app to Azure App Service, the expected functionality, which echoes user inputs in the chat, is not working as intended. The app functions correctly on localhost. However, after deploying it to Azure App Service, while the HTML page displays, there is no response or functionality when users input messages in the chat interface.

Resolution:

Ziggy Zulueta was able to solve the problem by adding this line in the Startup command of the webapp: gunicorn -k eventlet -w 1 app:app as shown below:
User's image

In addition, SocketIO was modified accordingly in the code:

socketio = SocketIO(app, async_mode='eventlet')

Answer 2

Ziggy Zulueta 495 MVP

I was able to solve the problem by adding this line in the Startup command of the webapp: gunicorn -k eventlet -w 1 app:app as shown below:

User's image

In addition, SocketIO must be modified accordingly in the code:

socketio = SocketIO(app, async_mode='eventlet')

ajkuma 28,036 Reputation points Microsoft Employee Moderator

2024-04-01T18:41:56.4666667+00:00

@Ziggy Zulueta , Glad to know that the issue is resolved. Thanks for the follow-up and sharing the solution that worked for you.

Thanks to TP for providing pointers.

Since the Microsoft Q&A community has a policy that "The question author cannot accept their own answer. They can only accept answers by others ", I'll repost your solution in case you'd like to "Accept " the answer.

Share via

Flask SocketIO not working in Azure App Service

1 additional answer

Your answer