flask-socketIO looks work, but events not! (in my project)

[98arYan13]

Hi,
I don't know why socketio events in my project doesn't work. I think it may be due to incompability of packages in my machine. Would you please help? In client side seems every thing is fine, but tried a lot of sockets in server and no events triggered.
I apologize in advance for the length of this.

Here is terminal log (ps on windows):

(venv) PS C:\Users\...\src> py main.py
Server initialized for eventlet.
Server initialized for eventlet.
Server initialized for eventlet.
 * Restarting with stat
Server initialized for eventlet.
Server initialized for eventlet.
Server initialized for eventlet.
 * Debugger is active!
 * Debugger PIN: 820-624-001
(1016) wsgi starting up on http://127.0.0.1:5000
(1016) accepted ('127.0.0.1', 8173)
AEdjN2unT1LRDzZSAAAA: Sending packet OPEN data {'sid': 'AEdjN2unT1LRDzZSAAAA', 'upgrades': ['websocket'], 'pingTimeout': 20000, 'pingInterval': 25000}
127.0.0.1 - - [13/Aug/2021 00:15:27] "GET /socket.io/?EIO=4&transport=polling&t=NixvUM7 HTTP/1.1" 200 278 0.002999
AEdjN2unT1LRDzZSAAAA: Received packet MESSAGE data 0/users,
AEdjN2unT1LRDzZSAAAA: Sending packet MESSAGE data 0/users,{"sid":"7tlV8IMGEKeEGVLRAAAB"}
127.0.0.1 - - [13/Aug/2021 00:15:27] "POST /socket.io/?EIO=4&transport=polling&t=NixvUMM&sid=AEdjN2unT1LRDzZSAAAA HTTP/1.1" 200 219 0.002998
(1016) accepted ('127.0.0.1', 14275)
AEdjN2unT1LRDzZSAAAA: Received request to upgrade to websocket
127.0.0.1 - - [13/Aug/2021 00:15:27] "GET /socket.io/?EIO=4&transport=polling&t=NixvUMQ&sid=AEdjN2unT1LRDzZSAAAA HTTP/1.1" 200 181 0.000999 
AEdjN2unT1LRDzZSAAAA: Upgrade to websocket successful
AEdjN2unT1LRDzZSAAAA: Received packet MESSAGE data 2/users,["my event",{"data":"I'm connected!"}]
AEdjN2unT1LRDzZSAAAA: Sending packet PING data None
AEdjN2unT1LRDzZSAAAA: Received packet PONG data 
AEdjN2unT1LRDzZSAAAA: Sending packet PING data None
AEdjN2unT1LRDzZSAAAA: Received packet PONG data 

requirements.txt:

bidict==0.21.2
click==8.0.1
colorama==0.4.4
dnspython==1.16.0
eventlet==0.31.1
Flask==2.0.1
Flask-Login==0.5.0
Flask-SocketIO==5.1.1
Flask-SQLAlchemy==2.5.1
greenlet==1.1.1
itsdangerous==2.0.1
Jinja2==3.0.1
MarkupSafe==2.0.1
python-engineio==4.2.1
python-socketio==5.4.0
six==1.16.0
SQLAlchemy==1.4.22
Werkzeug==2.0.1

layout:

/src
    __init__.py
    auth.py
    main.py
    models.py
    /templates
        base.html
        login.html
        profile.html
        signup.html
        users.html

init.py:

from flask import Flask
from flask_sqlalchemy import SQLAlchemy
from flask_login import LoginManager
from flask_socketio import SocketIO


db = SQLAlchemy()
login_manager = LoginManager()

socketio = SocketIO(engineio_logger=True)

def create_app(debug=False):
    app = Flask(__name__)

    app.config.update(SECRET_KEY='top_secret')
    app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///db.sqlite'
    app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
    app.debug = debug

    db.init_app(app)
    login_manager = LoginManager()
    login_manager.login_view = 'auth.login'
    login_manager.init_app(app)

    from models import User
    @login_manager.user_loader
    def load_user(user_id):
        return User.query.get(int(user_id))
    
    # blueprint for auth routes
    from auth import auth as auth_blueprint
    app.register_blueprint(auth_blueprint)
    
    # blueprint for non-auth parts of app
    from main import main as main_blueprint
    app.register_blueprint(main_blueprint)

    socketio.init_app(app)

    return app

auth.py:

from flask import Blueprint, render_template, redirect, url_for, request, flash
from werkzeug.security import generate_password_hash, check_password_hash
from models import User
from flask_login import login_user, logout_user, login_required
from __init__ import db


auth = Blueprint('auth', __name__)

@auth.route('/login', methods=['GET', 'POST']) # define login page path
def login(): # define login page fucntion
    if request.method=='GET': # if the request is a GET we return the login page
        return render_template('login.html')
    else: # if the request is POST then check if the user exist and with te right password
        email = request.form.get('email')
        password = request.form.get('password')
        remember = True if request.form.get('remember') else False
        user = User.query.filter_by(email=email).first()
        # check if the user actually exists
        # take the user-supplied password, hash it, and compare it to the hashed password in the database
        if not user:
            flash('Please sign up before!')
            return redirect(url_for('auth.signup'))
        elif not check_password_hash(user.password, password):
            flash('Please check your login details and try again.')
            return redirect(url_for('auth.login')) # if the user doesn't exist or password is wrong, reload the page
        # if the above check passes, then we know the user has the right credentials
        login_user(user, remember=remember)
        return redirect(url_for('main.profile'))

@auth.route('/signup', methods=['GET', 'POST'])# we define the sign up path
def signup(): # define the sign up function
    if request.method=='GET': # If the request is GET we return the sign up page and forms
        return render_template('signup.html')
    else: # if the request is POST, then we check if the email doesn't already exist and then we save data
        email = request.form.get('email')
        name = request.form.get('name')
        password = request.form.get('password')
        user = User.query.filter_by(email=email).first() # if this returns a user, then the email already exists in database
        if user: # if a user is found, we want to redirect back to signup page so user can try again
            flash('Email address already exists')
            return redirect(url_for('auth.signup'))
        # create a new user with the form data. Hash the password so the plaintext version isn't saved.
        new_user = User(email=email, name=name, password=generate_password_hash(
            password, method='sha256'))
        # add the new user to the database
        db.session.add(new_user)
        db.session.commit()
        return redirect(url_for('auth.login'))

@auth.route('/logout') # define logout path
@login_required
def logout(): #define the logout function
    logout_user()
    return redirect(url_for('main.index'))

main.py:

import functools
from flask import Blueprint, render_template
from flask_login import login_required, current_user
from flask_socketio import disconnect, emit
from __init__ import create_app, db, socketio


# main blueprint
main = Blueprint('main', __name__)


@main.route('/')
@login_required
def index():
    return render_template('users.html')


@main.route('/profile')
@login_required
def profile():
    return render_template('profile.html', name=current_user.name)


def authenticated_only(f):
    @functools.wraps(f)
    def wrapped(*args, **kwargs):
        if not current_user.is_authenticated:
            disconnect()
        else:
            return f(*args, **kwargs)
    return wrapped

@socketio.on('my event')
@authenticated_only
def handle_my_custom_event(data):
    emit('my response', {'message': '{0} has joined'.format(current_user.name)},
         broadcast=True)
         

app = create_app(debug=True)
if __name__ == '__main__':
    db.create_all(app=create_app())
    socketio.run(app)

models.py:

from __init__ import db
from flask_login import UserMixin

class User(UserMixin, db.Model):

    __tablename__ = 'flasklogin-users'
    id = db.Column(
        db.Integer,
        primary_key=True
    )
    name = db.Column(
        db.String(100),
        nullable=False,
        unique=False
    )
    email = db.Column(
        db.String(40),
        unique=True,
        nullable=False
    )
    password = db.Column(
        db.String(200),
        primary_key=False,
        unique=False,
        nullable=False
	)

base.html:

<!DOCTYPE html>
<html>

<head>
	{% block head %}
	<meta charset="utf-8">
	<title>{% block title %}{% endblock %}</title>

	<!-- JQuery -->
	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	
	<!-- Bootstrap -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" id="bootstrap-css">
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>

	<!-- Bluma -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" />
	
	{% endblock %}
</head>

<body>
<section>
	<div class="container-fluid has-text-centered">
		<header id="top">
			<nav class="navbar navbar-expand">
				<ul class="navbar-nav">
					<a href="{{ url_for('main.index') }}" class="navbar-item">
						Home
					</a>
					{% if current_user.is_authenticated %}
					<a href="{{ url_for('main.profile') }}" class="navbar-item">
						Profile
					</a>
					{% endif %}
					{% if not current_user.is_authenticated %}
					<a href="{{ url_for('auth.login') }}" class="navbar-item">
						Login
					</a>
					<a href="{{ url_for('auth.signup') }}" class="navbar-item">
						Sign Up
					</a>
					{% endif %}
					{% if current_user.is_authenticated %}
					<a href="{{ url_for('auth.logout') }}" class="navbar-item">
						Logout
					</a>
					{% endif %}
				</ul>
			</nav>
		</header>
				{% block content %}{% endblock %}
	</div>
</section>

	<div id="footer" class="card-footer">
		{% block footer %}
		{% endblock %}
	</div>

</body>
</html>

.
.
.

users.html:

{% extends "base.html" %}
{% block title %}User{% endblock %}
{% block head %}
  {{ super() }}
  
  <!--socket.io-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
	<script type="text/javascript" charset="utf-8">
		var socket;
    $(document).ready(function(){
      socket = io.connect('http://' + document.domain + ':' + location.port + '/users');
      socket.on('connect', () => {
        socket.emit('my event', {data: 'I\'m connected!'})
      });
      socket.on('my response', (data) => {
        console.log(data) // nothing show on console
      });
    });
	</script>

{% endblock %}
{% block content %}
  <h1>users page loaded</h1>
{% endblock %}

Thanks for your help.

[miguelgrinberg]

Your client is connecting to a /users namespace, but your server is used the default namespace.

[98arYan13]

I renamed users.html to index.html and changed

@main.route('/')
@login_required
def index():
    return render_template('users.html')

to

@main.route('/')
@login_required
def index():
    return render_template('index.html')

and socket = io.connect('http://' + document.domain + ':' + location.port + '/');
but same problem.

[miguelgrinberg]

Sorry this is not what I'm saying. Are you familiar with Socket.IO namespaces? This has nothing to do with your Flask application.

[98arYan13]

Well, ok.
I take a closer look at it.