JS client not connecting to server #2040

SrBlank · 2024-02-22T22:27:40Z

SrBlank
Feb 22, 2024

I am having trouble with connecting my JS client to the socketio app.

app.py

from flask import Flask, request, Response, render_template
from flask_socketio import SocketIO

app = Flask(__name__)
socketio = SocketIO(app, cors_allowed_origins="*")#cors_allowed_origins="https://amritb.github.io")

@socketio.on('connect', namespace='/camera')
def handle_connect():
    print('Client connected')

@socketio.on('disconnect', namespace='/camera')
def handle_disconnect():
    print('Client disconnected')

@socketio.on_error(namespace='/camera')  # Handles the default namespace
def error_handler(e):
    print('An error has occurred: ' + str(e))

@socketio.on('message', namespace='/camera')
def handle_message(message):
    #print("got message")
    #print(message)
    socketio.emit('frame', message, namespace='/camera')

@app.route("/")
def index():
    return render_template("test.html")

if __name__ == '__main__':
    socketio.run(app, port="3000", debug=True)

test.html

<!DOCTYPE html>
<html>
<head>
    <title>Button Text Change</title>
    <!--<script src="{{ url_for('static', filename='js/socket.io.js') }}"></script>-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.3.1/socket.io.js"  crossorigin="anonymous"></script>
    <script type="text/javascript">
        // Connect to the "/camera" namespace
        var socket = io("http://127.0.0.1:3000/camera");
        
        socket.on('connect', function() {
            console.log('Web client connected to /camera');
        });

        socket.on('connect_error', function(error) {
            console.log('Connection failed: ', error);
        });

        socket.on('connect_timeout', function(timeout) {
            console.log('Connection timed out: ', timeout);
        });

        socket.on('error', function(error) {
            console.log('Error: ', error);
        });

        socket.on('reconnect_attempt', function() {
            console.log('Trying to reconnect to /camera');
        });

        socket.on('reconnect_failed', function() {
            console.log('Reconnection to /camera failed');
        });

        socket.on('frame', function(msg) {
            console.log('Received message on /camera: ' + msg);
            // Change the button text to the message received
            var btn = document.getElementById('change');
            btn.innerHTML = msg;
        });

        function changeButtonText() {
            var btn = document.getElementById('myButton');
            btn.innerHTML = 'Clicked';
        }       
    </script>
</head>
    <body>

        <p id="change">Change this</p>

    </body>
</html>

connectToSocket.py - this socket will eventually be used to transmit video data from several raspberry Pis

import cv2
import base64
import socketio
import time

sio = socketio.Client()

@sio.event
def connect():
    print("I'm connected to the server.")

@sio.event
def connect_error(data):
    print("The connection failed!")

@sio.event
def disconnect():
    print("I'm disconnected from the server.")

sio.connect('http://127.0.0.1:3000', namespaces=['/camera'])

counter = 0

while True:
    # Send the frame over the '/camera' namespace
    sio.emit('message', str(counter), namespace='/camera')

    # Add a small sleep to avoid overwhelming the server
    time.sleep(0.1)

    counter += 1

package versions

Werkzeug                             2.0.1
Flask-SocketIO                       4.3.1
python-engineio                      3.13.2

connectToSocket.py data is being transmitted to app.py, I have checked this with the print statements that are commented out. The JS code however is not connecting. I have tried a lot of different things such as different port numbers (5000, 3000), broadcasting only locally (i was doing 0.0.0.0 before), and different connection strings for var socket = io("http://127.0.0.1:3000/camera"); (var socket = io() and var socket = io("http://127.0.0.1:3000/");) did not work.

With the debug statements I have the console is outputting

Connection failed:  Error: server error
    at Socket.onPacket (socket.js:317:33)
    at Emitter.emit (index.js:143:20)
    at XHR.onPacket (transport.js:100:9)
    at callback (polling.js:83:18)
    at Array.forEach (<anonymous>)
    at XHR.onData (polling.js:86:53)
    at Emitter.emit (index.js:143:20)
    at Request.onData (polling-xhr.js:188:14)
    at Request.onLoad (polling-xhr.js:229:18)
    at xhr.onreadystatechange (polling-xhr.js:147:26)

and app.py is constantly outputting

127.0.0.1 - - [22/Feb/2024 16:26:53] "GET /socket.io/?EIO=4&transport=polling&t=OtIxSA8 HTTP/1.1" 200 371 0.000863
127.0.0.1 - - [22/Feb/2024 16:26:55] "GET /socket.io/?EIO=4&transport=polling&t=OtIxSWq HTTP/1.1" 200 371 0.000511
127.0.0.1 - - [22/Feb/2024 16:26:56] "GET /socket.io/?EIO=4&transport=polling&t=OtIxSoi HTTP/1.1" 200 371 0.000468

Any help is appreciated!

miguelgrinberg · 2024-02-22T23:08:05Z

miguelgrinberg
Feb 22, 2024
Maintainer

See the troubleshooting section of the Flask-SocketIO docs to learn how to enable more detailed logging for the server. Then add the logs here.

3 replies

SrBlank Feb 22, 2024
Author

Server initialized for eventlet.
 * Restarting with stat
Server initialized for eventlet.
 * Debugger is active!
 * Debugger PIN: 890-951-948
(22553) wsgi starting up on http://127.0.0.1:3000
(22553) accepted ('127.0.0.1', 39392)
837341d3dda241628922f10f2b638ac6: Sending packet OPEN data {'sid': '837341d3dda241628922f10f2b638ac6', 'upgrades': ['websocket'], 'pingTimeout': 60000, 'pingInterval': 25000}
837341d3dda241628922f10f2b638ac6: Sending packet MESSAGE data 0
127.0.0.1 - - [22/Feb/2024 17:30:08] "GET /socket.io/?transport=polling&EIO=3&t=1708644608.6867032 HTTP/1.1" 200 371 0.001294
(22553) accepted ('127.0.0.1', 39404)
837341d3dda241628922f10f2b638ac6: Received request to upgrade to websocket
837341d3dda241628922f10f2b638ac6: Upgrade to websocket successful
837341d3dda241628922f10f2b638ac6: Received packet MESSAGE data 0/camera
Client connected
837341d3dda241628922f10f2b638ac6: Sending packet MESSAGE data 0/camera
837341d3dda241628922f10f2b638ac6: Received packet PING data None
837341d3dda241628922f10f2b638ac6: Sending packet PONG data None
(22553) accepted ('127.0.0.1', 32986)
127.0.0.1 - - [22/Feb/2024 17:30:10] "GET / HTTP/1.1" 200 1770 0.007825
4cad8f5ef673498fab0d3d2df99d596e: Sending packet OPEN data {'sid': '4cad8f5ef673498fab0d3d2df99d596e', 'upgrades': ['websocket'], 'pingTimeout': 60000, 'pingInterval': 25000}
4cad8f5ef673498fab0d3d2df99d596e: Sending packet MESSAGE data 0
127.0.0.1 - - [22/Feb/2024 17:30:10] "GET /socket.io/?EIO=4&transport=polling&t=OtJ9x9F HTTP/1.1" 200 371 0.001091
26c3b89667f1409f9f021a62beb724e7: Sending packet OPEN data {'sid': '26c3b89667f1409f9f021a62beb724e7', 'upgrades': ['websocket'], 'pingTimeout': 60000, 'pingInterval': 25000}
26c3b89667f1409f9f021a62beb724e7: Sending packet MESSAGE data 0
127.0.0.1 - - [22/Feb/2024 17:30:11] "GET /socket.io/?EIO=4&transport=polling&t=OtJ9xJ3 HTTP/1.1" 200 371 0.001292
75b7dea099b841d7803ab1b640e15b4a: Sending packet OPEN data {'sid': '75b7dea099b841d7803ab1b640e15b4a', 'upgrades': ['websocket'], 'pingTimeout': 60000, 'pingInterval': 25000}
75b7dea099b841d7803ab1b640e15b4a: Sending packet MESSAGE data 0
127.0.0.1 - - [22/Feb/2024 17:30:13] "GET /socket.io/?EIO=4&transport=polling&t=OtJ9xxg HTTP/1.1" 200 371 0.000727
7038f1e44cee429d86a198cc971a3e79: Sending packet OPEN data {'sid': '7038f1e44cee429d86a198cc971a3e79', 'upgrades': ['websocket'], 'pingTimeout': 60000, 'pingInterval': 25000}
7038f1e44cee429d86a198cc971a3e79: Sending packet MESSAGE data 0
127.0.0.1 - - [22/Feb/2024 17:30:17] "GET /socket.io/?EIO=4&transport=polling&t=OtJ9yio HTTP/1.1" 200 371 0.000710

This is the output for the debugger on the server however I could not find a debugger for the JS. The "client connected" message is the message from connectToSocket.py not from the JS client.

miguelgrinberg Feb 22, 2024
Maintainer

Your python client and server is using a fairly old version of Socket.IO. Your JS client is a recent version that uses a newer version of the Socket.IO protocol. See the version compatibility table in the Flask-SocketIO documentation and pick versions that are compatible with each other.

SrBlank Feb 22, 2024
Author

That was it! I upgraded to

Flask_SocketIO-5.3.6
 python_socketio-5.11.1
python_engineio-4.9.0

I was having some comptability issues before so I copied someone else's versions.

Thank you!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

JS client not connecting to server #2040

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

JS client not connecting to server #2040

Uh oh!

SrBlank Feb 22, 2024

Replies: 1 comment · 3 replies

Uh oh!

miguelgrinberg Feb 22, 2024 Maintainer

Uh oh!

Uh oh!

SrBlank Feb 22, 2024 Author

Uh oh!

miguelgrinberg Feb 22, 2024 Maintainer

Uh oh!

SrBlank Feb 22, 2024 Author

SrBlank
Feb 22, 2024

Replies: 1 comment 3 replies

miguelgrinberg
Feb 22, 2024
Maintainer

SrBlank Feb 22, 2024
Author

miguelgrinberg Feb 22, 2024
Maintainer

SrBlank Feb 22, 2024
Author