Python 后端 Flask 使用 Flask-SocketIO、前端 Vue3 实现长连接 Websocket 通信详细教程(更新中)
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
Flask 安装 Flask-Socketio
Flask-SocketIO 第三方库使 Flask 应用程序可以实现客户端和服务器之间的低延迟双向通信。客户端应用程序可以使用 Javascript、Python、C++、Java 和 Swift 中的任何 SocketIO 客户端库或任何其他兼容客户端来建立与服务器的永久连接。
Flask-Socketio 官方文档网站
网站地址:https://flask-socketio.readthedocs.io/en/latest/
初始化源码
from flask import Flask, request
from flask_socketio import SocketIO
app = Flask(__name__)
from flask_cors import *
CORS(app, supports_credentials=True)
app.config['SECRET_KEY'] = 'EDGEHACKER520!'
socketio = SocketIO(app, cors_allowed_origins='*')
name_space = '/echo'
@socketio.on('connect', namespace=name_space)
def champion_connect():
print(request)
return True
@socketio.on('disconnect', namespace=name_space)
def champion_disconnect():
pass
if __name__ == '__main__':
print("启动成功")
socketio.run(app, host='0.0.0.0', port=3000, debug=False)
常见报错:[2024-03-23 17:15:53,830] WARNING in __init__
: WebSocket transport not available. Install gevent-websocket for improved performance.
报错解决方案
pip install gevent-websocket
前端 socket.io-client 客户端
npm install socket.io-client
客户端连接案例源码
import io from 'socket.io-client';
export default {
data() {
return {
socket: null
};
},
mounted() {
this.socket = io.connect('ws://localhost:3000/echo?uid=helloworld', {
timeout: 300000, reconnectionDelayMax: 1000, reconnectionDelay: 500
})
}
}
服务器端读取连接请求
@socketio.on('connect', namespace=champion_space)
def champion_connect():
print(request.args)
return True
ImmutableMultiDict([('uid', 'helloworld'), ('EIO', '4'), ('transport', 'polling'), ('t', 'OvhXJvg')])
GitHub 加速计划 / vu / vue
80
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 6 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 6 个月前
更多推荐
已为社区贡献17条内容
所有评论(0)