flask - 如何在flask_socketio和socket io中的html上连续显示数据
问题描述
我需要通过 html 套接字 io(3.1.0) 上的烧瓶网络套接字 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>
解决方案
您的代码正是您现在需要的!您的问题出在前端部分,请将其更改为以下内容:
<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>
PS:如果您不想在前面部分苦苦挣扎,请在 chrome 上使用 Firecamp 扩展: FireCamp
推荐阅读
- amazon-web-services - 用户只能查看自己的实例的 IAM 权限
- celery - 芹菜接受比工人并发更多的任务
- python-3.x - 检查目标时出错:预期 dense_10 的形状为 (1,) 但得到的数组的形状为 (10,)
- reactjs - 如何访问 React 中存储中不存在的状态?
- javascript - 在某个子元素之后停止事件传播
- session - 如何使用烧瓶修复 json 中的会话
- arangodb - ArangoDB 的可视化查询支持
- c# - 如何在单击时将数据从数据网格行(form2)发送到已打开 form2 的用户控件(form1)中的另一个
- python - Pip 的 Python 问题,缺少已安装的模块?
- javascript - html2pdf.js 和 Webpack 出现“未安装 jsPDF 画布插件”错误