CODEWITHSUNDEEP
pythonflaskflask-socketiogevent-socketio
SorenLantz
SorenLantz

Reputation: 177

Basic flask-socketio implementation not working; no output or errors

I'm trying to incorporate socketio with my flask project. Right now I am trying to get a simple "Connected" or "Disconnected" output from the server. However when I run the app script with "python app.py" I don't get these messages nor any errors pointing me in any direction.

I never thought I would miss errors!

app.py

from flask import Flask, render_template, request, url_for, copy_current_request_context
from flask_socketio import SocketIO, emit
import logging

logging.basicConfig()

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

@app.route('/scan/')
def waitForRFID():
    return render_template('scan.html')    

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

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

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

scan.html

<!doctype html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
    <script src="{{ url_for('static', filename = 'js/scan.js') }}"></script>
    <link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/scan.css') }}" />
</head>

scan.js

$(document).ready(function(){
    //connect to the socket server.
    var socket = io.connect('http://' + document.domain + ':' + location.port + '/test');
});

When I run the app.py file and visit "127.0.0.1:5000/scan/", I get the following output in terminal:

127.0.0.1 - - [2018-02-11 16:42:10] "GET /scan/ HTTP/1.1" 200 812 0.010323

The web-page loads properly, and I get the same output if I run this in or out of a virtual environment.

With a setup as simple as this, what could be wrong? Thank you in advance!

Upvotes: 4

Views: 7238

Answers (1)

Matt Healy
Matt Healy

Reputation: 18531

In trying to reproduce your problem with the setup given, I noticed the following error in the Javascript console:

scan.js:1 Uncaught ReferenceError: $ is not defined
    at scan.js:1

Your example doesn't have jQuery loaded, so your scan.js isn't able to connect to the socket when the document is finished loading.

You can add jQuery by including the CDN reference below:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

And then we see the example works:

127.0.0.1 - - [2018-02-12 07:53:58] "GET /scan/ HTTP/1.1" 200 521 0.010458
127.0.0.1 - - [2018-02-12 07:53:58] "GET /static/css/scan.css HTTP/1.1" 404 342 0.001086
127.0.0.1 - - [2018-02-12 07:53:58] "GET /static/css/scan.css HTTP/1.1" 404 342 0.000776
127.0.0.1 - - [2018-02-12 07:53:58] "GET /socket.io/?EIO=3&transport=polling&t=1518393238311-0 HTTP/1.1" 200 345 0.000879
Client connected
127.0.0.1 - - [2018-02-12 07:53:58] "POST /socket.io/?EIO=3&transport=polling&t=1518393238776-1&sid=7d98901d0ef74164975ee5464879ba19 HTTP/1.1" 200 195 0.000818
127.0.0.1 - - [2018-02-12 07:53:58] "GET /socket.io/?EIO=3&transport=polling&t=1518393238778-2&sid=7d98901d0ef74164975ee5464879ba19 HTTP/1.1" 200 198 0.000201

Upvotes: 2

Related Questions