如何在flask_socketio和socket io中的html上连续显示数据答案

【问题标题】：How to show data continuously on html in flask_socketio and socket io如何在flask_socketio和socket io中的html上连续显示数据
【发布时间】：2021-01-21 08:13:48
【问题描述】：

我需要通过 html 套接字 io(3.1.0) 上的烧瓶 web 套接字 flask_socketio(5.0.1) 连续显示 html 上的数据。

from flask import Flask, render_template
from flask_socketio import SocketIO

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

@app.route('/')
def stock_view():
   return render_template('index.html')

@socketio.on('message')
def handle_message(data):
      emit('message', json_data, broadcast=True, include_self=False)

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

######### index.html #########

<html>
<head>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.1.0/socket.io.js" 
     integrity="sha512-   
  +l9L4lMTFNy3dEglQpprf7jQBhQsQ3/WvOnjaN/+/L4i0jOstgScV0q2TjfvRF4V+ZePMDuZYIQtg5T4MKr+MQ==" 
  crossorigin="anonymous"></script>

<script type="text/javascript" charset="utf-8">
   var socket = io();
   socket.on('connect', function() {
    socket.emit('my event', {data: 'I\'m connected!'});
 });
 </script>
 </body>
 </html>

【问题讨论】：

标签： flask socket.io flask-socketio

【解决方案1】：

您的代码正是您现在所需要的！你的问题出在前端，改成这样：

<html>
<head>
<title>Chat Room</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.1.0/socket.io.js" 
     integrity="sha512-   
  +l9L4lMTFNy3dEglQpprf7jQBhQsQ3/WvOnjaN/+/L4i0jOstgScV0q2TjfvRF4V+ZePMDuZYIQtg5T4MKr+MQ=="></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {

    var socket = io.connect('http://127.0.0.1:5000');

    socket.on('connect', function() {
        socket.send('User has connected!');
    });

    socket.on('message', function(msg) {
        $("#messages").append('<li>'+msg+'</li>');
        console.log('Received message');
    });

    $('#sendbutton').on('click', function() {
        socket.send($('#myMessage').val());
        $('#myMessage').val('');
    });

});
</script>
<ul id="messages"></ul>
<input type="text" id="myMessage">
<button id="sendbutton">Send</button>
</body>
</html>

P.S：如果您不想在前面部分苦苦挣扎，请在 chrome 上使用 Firecamp 扩展： FireCamp

【讨论】：