4

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!

SorenLantz
  • 177
  • 2
  • 14

1 Answers1

2

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
Matt Healy
  • 18,033
  • 4
  • 56
  • 56
  • Thank you for responding. I added the jQuery call to the scan.html file, but I still get the same output. When looking at the output you posted I noticed that my script is not performing (or at least not reporting) a GET for the css stylesheet or socket.io. What libraries do you have installed for your setup? – SorenLantz Feb 12 '18 at 02:28
  • 1
    I'm using Python 3.6.0 and have installed in my virtual environment: click==6.7 Flask==0.12.2 Flask-SocketIO==2.9.3 itsdangerous==0.24 Jinja2==2.10 MarkupSafe==1.0 python-engineio==2.0.2 python-socketio==1.8.4 six==1.11.0 Werkzeug==0.14.1 I'd recommend you check your web console to see why the JS and CSS files aren't being picked up – Matt Healy Feb 12 '18 at 02:34
  • 1
    I will try replicating those libraries in a new virtual env. Also, I'm ssh-ing into my raspberry pi to write this code and look at the output. How would I debug using a web console? – SorenLantz Feb 12 '18 at 02:44
  • 1
    To make use of websockets you'd need to be accessing your raspberry pi IP address remotely using a web browser - or are you using a web browser on the pi itself? Most web browsers come with a web console built in and this is what you'd use to see client-side errors (e.g. javascript errors, external resources not loading) – Matt Healy Feb 12 '18 at 03:04