目前版本如下 Flask-Cors 4.0.0 Flask-SocketIO 5.3.6 from flask_socketio import SocketIO, emit
跨域问题网上的普通方法无法解决。
参考这篇文章解决
Flask教程(十九)SocketIO - 迷途小书童的Note迷途小书童的Note (xugaoxiang.com)
app = Flask(__name__) socketio = SocketIO(app) socketio.init_app(app, cors_allowed_origins='*')
如果用了eventlet，在while true中，emit数据不在前端web页面显示，可参考这篇文章的解决方案，加定时器。
javascript - Flask-websocket Emit主动发送消息失败 - SegmentFault 思否
【精选】flask-socketio使用遇到的坑，版本兼容问题和while True堵塞信息问题_flasksocketio的坑-CSDN博客
Vue3 组合式API写法，需要安装
npm install socket.io-client<template>
<div>
<button @click="sendMessage1">发送消息到 test1</button>
<button @click="sendMessage2">发送消息到 test2</button>
</div>
</template>
<script>
import { ref, onMounted } from 'vue';
import { io } from 'socket.io-client';
export default {
setup() {
const socket = io('http://127.0.0.1:5000');
const message = ref('');
// 监听连接事件
socket.on('connect', () => {
console.log('已连接至WebSocket服务器');
});
// 监听回应事件
socket.on('my-response', (data) => {
console.log('收到来自服务器的回应事件:', data);
});
// 发送消息到 test1
const sendMessage1 = () => {
socket.emit('test', '这是来自客户端的消息！');
};
// 发送消息到 test2
const sendMessage2 = () => {
socket.emit('my-event', '这是来自客户端的消息！');
};
// 在组件挂载时连接到服务器
onMounted(() => {
socket.connect();
});
return {
message,
sendMessage1,
sendMessage2,
};
},
};
</script>
<style>
</style>没有加namespace，因为加了就读不出。
后端flask代码：
@socketio.on('test')
def test(data):
print('触发test函数',data)
socketio.emit('my-response', {'data': 'test_OK'})前端emit的第一个参数是event，所以后端也要用 @socketio.on('test') 绑定一个event。前端emit的第二个参数是传给服务器的data，所以后端绑定的def也要有参数接收。文章来源：https://www.toymoban.com/news/detail-732388.html
后端给前端传值，也是通过event 'my-response'，前端监听这个event，就能收到值了文章来源地址https://www.toymoban.com/news/detail-732388.html
到了这里，关于flask socketio 实时传值至html上【需补充实例】的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
