1

I am trying to build a small app to learn "web sockets with python using flask" where I am trying to count the number of user who are using the app. For that I was using Matt Makai tutorial. I guess I am messing up in something because the counter is not incrementing.

Here is my HTML:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Sockets</title> </head> <body> <h1>Welcome to sockets</h1> <br> <!--<h2> {{ counter }} visitors have seen this page!</h2>--> <h2><span id="user-count">0</span> visitors have seen this page! </h2> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.5/socket.io.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var url = "ws://localhost:5001"; var socket = new io.connect(url + "/dd"); socket.on('msg', function(msg) { $("#connected").html(msg.count); }); }); </script> </body> </html> 

And this is my python code:

from gevent import monkey monkey.patch_all() import redis from flask import Flask, render_template from flask_socketio import SocketIO app = Flask(__name__) db = redis.StrictRedis('localhost', 6379, 0) socketio = SocketIO(app) @app.route('/') def main(): # c = db.incr('counter') return render_template('main.html') @socketio.on('connect', namespace='/sockets') def ws_conn(): c = db.incr('user_count') socketio.emit('msg', {'count': c}, namespace="/sockets") @socketio.on('disconnect', namespace='/sockets') def ws_disconn(): c = db.decr('user_count') socketio.emit('msg', {'count': c}, namespace="/sockets") if __name__ == "__main__": # check only if this file is called directly (not by importing somewhere else) socketio.run(app) 

1 Answer 1

2

You are referencing the wrong element in your HTML/Javascript.

I'm guessing you want the value in this line to update, yes?

<h2><span id="user-count">0</span> visitors have seen this page! </h2> 

Yet, your Javascript code calling out to the websocket is updating an element with ID connected:

socket.on('msg', function(msg) { $("#connected").html(msg.count); // <--- this line is updating the wrong thing! }); 

So, you can either update the SPAN tag ID to be connected, or you can update your socket message handler to call $('#user-count').html(msg.count);.

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.