2017-08-26 15 views
0

私は、アプリケーションを使用しているユーザーの数を数えようとしているところで、 "フラスコを使ったWebソケット"を学ぶ小さなアプリケーションを構築しようとしています。私はMatt Makaiチュートリアルを使っていました。カウンターが増加していないので、私は何かを台無しにしていると思う。PythonのWebソケット(フラスコ使用)問題

は、ここに私の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> 

そして、これは私のPythonコードです:あなたは、あなたのHTML/JavaScriptで間違った要素を参照している

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) 

答えて

2

この行の値を更新したいと思っていますか?

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

、JavaScriptコードID connectedを持つ要素を更新しているのWebSocketに呼び出す:

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

だから、あなたはSPANタグIDがconnectedであることを更新するか、またはあなたが更新することができますあなたのソケットメッセージハンドラは$('#user-count').html(msg.count);を呼び出します。