Python 后端 Flask 使用 Flask-SocketIO、前端 Vue3 实现长连接 Websocket 通信详细教程(更新中)

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')])

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/503295.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

编程语言|C语言——C语言操作符的详细解释

这篇文章主要详细介绍了C语言的操作符,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 一、基础 1.1 算数操作符 - * / % - * / 这些操作符是我们…

【Redis】Redis 生产问题。如何确保缓存和数据库数据的一致性? 常见的缓存更新策略?

目录 缓存穿透 缓存穿透解决办法 缓存击穿 击穿解决办法? 缓存穿透和缓存击穿的区别? 缓存雪崩 雪崩解决办法? 如何确保缓存和数据库数据的一致性? 常见的缓存更新策略? 缓存穿透 定义:缓存穿透说…

[BT]BUUCTF刷题第11天(3.30)

第11天 Web(共3题) [网鼎杯 2018]Fakebook 打开是一个注册登录页面,包括用户、年龄和博客地址 查看题解知道存在robots.txt 访问http://c1392d44-63c3-4152-bf7e-89513eff1152.node5.buuoj.cn:81/robots.txt: User-agent: * D…

解决MySQL幻读?可重复读隔离级别背后的工作原理

什么是当前读和快照读 当前读:又称为 "锁定读",它会读取记录的最新版本(也就是最新的提交结果),并对读取到的数据加锁,其它事务不能修改这些数据,直到当前事务提交或回滚。"sele…

python统计分析——灵敏度、特异度和ROC曲线

参考资料:python统计分析【托马斯】 1、灵敏度和特异度 灵敏度:也叫作效能。被检验正确识别出来的阳性结果(病人中有疾病且检验结果是阳性的概率)。 特异度:被检验正确识别出来的阴性结果(病人健康且检验结…

mysqldump备份数据库提示ERROR 1064 (42000): You have an error in your SQL syntax

在dos下备份数据库的时候提示上面的错误信息 1 错误详情 ERROR 1064 (42000): You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near mysql-v at line 1错误示例图 2 解决办法 通过查资料…

vue2.0脚手架搭建

vue起步 文档 https://v2.cn.vuejs.org/ {{}} 变量、表达式渲染v-html html模板,渲染htmlv-model 绑定值(双向绑定)v-if 判断v-bind:href"地址" 简写:绑定属性 简写:href:"&qu…

OpenKylin安装Kafka

一、操作系统 openKylin 1.0.1 X86 二、下载安装包 # 安装依赖jdk sudo apt-get update sudo apt-get install default-jdk # 下载kafka mkdir -p /data/software/kafka wget https://archive.apache.org/dist/kafka/2.4.1/kafka_2.13-2.4.1.tgz三、解压安装 # 解压缩Kafka…

腾讯云2核2G服务器优惠价格,61元一年

腾讯云2核2G服务器多少钱一年?轻量服务器61元一年,CVM 2核2G S5服务器313.2元15个月,轻量2核2G3M带宽、40系统盘,云服务器CVM S5实例是2核2G、50G系统盘。腾讯云2核2G服务器优惠活动 txybk.com/go/txy 链接打开如下图:…

【2023】kafka入门学习与使用(kafka-2)

目录💻 一、基本介绍1、产生背景2、 消息队列介绍2.1、消息队列的本质作用2.2、消息队列的使用场景2.3、消息队列的两种模式2.4、消息队列选型: 二、kafka组件1、核心组件概念2、架构3、基本使用3.1、消费消息3.2、单播和多播消息的实现 4、主题和分区4.…

TypeScript编译器tsc的入门指南

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…

货物摆放例题——(求n的所有因子+foreach循环+set集合应用)

这里写目录标题 例题引入题目分析解题方法1.暴力求解2.求n的所有的因子foreach循环 3.利用 set集合 参考文章 例题引入 题目分析 - n个都是 V1 的小正方体---》去拼成一个大的长方体---》满足nLWH - 也就是,在小于等于n的所有数中,任取3个数&#xff08…

vitess执行计划缓存 测试

打开执行计划器缓存: sysbench /usr/local/share/sysbench/oltp_write_only.lua --mysql-host127.0.0.1 --mysql-port15306 --mysql-userroot --mysql-password --mysql-dbcustomer --report-interval10 100s sysbench /usr/local/share/sysbench/oltp_read_only.l…

前端三剑客 —— HTML (上)

前端 前端是什么? 把我们的数据以各种方式(如:表格、饼图、柱状图等)呈现给用户,我们就可以称之为前端。 做前端需要的工具? notepad、editplus、notepad、VS code、webstorm等,一般用于前端开…

嵌入式硬件中常见的面试问题与实现

1 01 请列举您知道的电阻、电容、电感品牌(最好包括国内、国外品牌) ▶电阻 美国:AVX、VISHAY威世 日本:KOA兴亚、Kyocera京瓷、muRata村田、Panasonic松下、ROHM罗姆、susumu、TDK 台湾:LIZ丽智、PHYCOM飞元、RALEC旺诠、ROYALOHM厚生、SUPEROHM美隆、TA-I大毅、TMT…

数据结构 - 算法效率|时间复杂度|空间复杂度

目录 1.算法效率 2.时间复杂度 2.1定义 2.2大O渐近表示法 2.3常见时间复杂度计算举例 3.空间复杂度 3.1定义 3.2常见空间复杂度计算举例 1.算法效率 算法的效率常用算法复杂度来衡量,算法复杂度描述了算法在输入数据规模变化时,其运行时间和空间…

路径规划——搜索算法详解(五):Dynamic A Star(D*)算法详解与Matlab代码

昨天休息了一天,今天继续学习搜索算法!前几天已经分别介绍了Dijkstra算法、Floyd算法、RRT算法、A*算法,无独有偶,上述算法都只适用于静态环境下两点规划的场景,但是大部分场景是实时变化的,这对规划算法提…

阿里云4核8G服务器ECS u1实例租用优惠价格955元一年

阿里云4核8G服务器优惠价格955元一年,配置为ECS通用算力型u1实例(ecs.u1-c1m2.xlarge)4核8G配置、1M到3M带宽可选、ESSD Entry系统盘20G到40G可选,CPU采用Intel(R) Xeon(R) Platinum处理器,阿里云活动链接 aliyunfuwuq…

手写红黑树【数据结构】

手写红黑树【数据结构】 前言版权推荐手写红黑树一、理论知识红黑树的特征增加删除 二、手写代码初始-树结点初始-红黑树初始-遍历初始-判断红黑树是否有效查找增加-1.父为黑,直接插入增加-2. 父叔为红,颜色调换增加-3. 父红叔黑,颜色调换&am…

相机标定学习记录

相机标定是计算机视觉和机器视觉领域中的一项基本技术,它的主要目的是通过获取相机的内部参数(内参)和外部参数(外参),以及镜头畸变参数,建立起现实世界中的点与相机成像平面上对应像素点之间准…