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 SocketIOapp = 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():passif __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')])

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

价值投资已死,MEME币永生?

BOME和SLERF结束了疯狂拉升,市场再次经历和见证了又一轮暴富「淘金」,尽管MEME的热浪尚未彻底退去,但市场也短暂恢复了一些冷静。 除了感慨 “币圈一天,传统金融一年” 的涨幅和收益之外,不少「老韭菜」都在讨论一个问…

基于微信小程序的自习室预约系统的设计与实现

基于微信小程序的自习室预约系统的设计与实现 文章目录 基于微信小程序的自习室预约系统的设计与实现1、前言介绍2、功能设计3、功能实现4、开发技术简介5、系统物理架构6、系统流程图7、库表设计8、关键代码9、源码获取10、 🎉写在最后 1、前言介绍 伴随着信息技术…

AR-Net网络(图像篡改检测)

AR-Net网络 摘要AbstractAR-Net1. 文献摘要2. 研究背景3. 创新点4. AR-Net 网络架构5. 实验6. 结论总结 摘要 AR-Net使用自适应注意力机制来融合位置和通道维度的特征,使网络能够充分利用不同维度的被篡改特征,此外,AR-Net 改进了预测掩模&a…

民宿预定(源码+文档)

民宿预定系统(小程序、ios、安卓都可部署) 文件包含内容程序简要说明含有功能项目截图客户端注册页学生特权介绍页我的界面登录界面民宿界面推荐房形已完成订单首页邀请好友待支付页全部订单进行中订单 管理端关键字管理用户管理订单管理民宿管理 文件包…

【春秋云镜】CVE-2023-27179靶标Wp

0x01:漏洞点 他的标题已经告诉我们路径在哪里,所以我们直接访问/_admin/imgdownload.php OK啊白白的一片,直接丢Yakit里面去 教训他。 0x02:操作部分 报告长官,一切正常!!未发现连接错误&#…

C语言-malloc(申请函数)free(释放函数)

malloc和free的语法格式 malloc 函数是 C 语言标准库中的一个重要函数,用于动态分配内存。其语法如下: void *malloc(size_t size);这里的 void * 表示返回的是一个 void 类型的指针,实际上这个指针指向的是一个 char 类型的内存块。size_t …

HTTP/1.1 如何优化?(计算机网络)

有三种方法: 第一个思路是,通过缓存技术来避免发送 HTTP 请求。客户端收到第一个请求的响应后,可以将其缓存在本地磁盘,下次请求的时候,如果缓存没过期,就直接读取本地缓存的响应数据。如果缓存过期&#…

GridLayoutManager 中的一些坑

前言 如果GridLayoutManager使用item的布局都是wrap_cotent 那么会在布局更改时会出现一些出人意料的情况。&#xff08;本文完全不具备可读性和说教性&#xff0c;仅为博主方便查找问题&#xff09; 布局item: <!--layout_item.xml--> <?xml version"1.0&qu…

DAY10,DAY11|逆波兰表达式,有效括号,删除字符串中重复项

文章目录 232.用栈实现队列225.用队列实现栈20.有效的括号1047.删除字符串中的所有重复项150.逆波兰表达式 232.用栈实现队列 文档讲解&#xff1a;用栈实现队列 视频链接&#xff1a;代码随想录-用栈实现队列 状态&#xff1a;ok 思路&#xff1a; 用两个栈实现队列操作&…

大模型面试准备(十一):怎样让英文大语言模型可以很好的支持中文?

节前&#xff0c;我们组织了一场算法岗技术&面试讨论会&#xff0c;邀请了一些互联网大厂朋友、参加社招和校招面试的同学&#xff0c;针对大模型技术趋势、大模型落地项目经验分享、新手如何入门算法岗、该如何备战、面试常考点分享等热门话题进行了深入的讨论。 合集在这…

设计模式(11):适配器模式

一.什么使适配器模式&#xff1f; 将一个类的接口转换成客户希望的另外一个接口&#xff0c;Adapter模式使得原本由于接口不兼容而不能一起工作的那些类可以在一起工作。 二.模式中的角色 目标角色(Target)&#xff1a; 客气所期待的接口。目标可以是具体的或抽象的类&#…

C++20中的jthread

一、多线程开发 c11以前&#xff0c;是不包含线程库的&#xff0c;开发多线程&#xff0c;必须使用OS系统自带的线程API&#xff0c;这就导致了很多问题&#xff0c;最主要的是&#xff0c;跨平台的开发&#xff0c;一般要保持几个主流应用的库的代码支持&#xff0c;特别是对…

关于缓存的一些问题

关于缓存的一些问题 1、缓存穿透 什么是缓存穿透&#xff1a; 缓存穿透指的是在使用缓存系统的过程中&#xff0c;对于不存在的数据不断地进行查询请求&#xff0c;导致这些请求都无法从缓存中获取到数据&#xff0c;最终达到了绕过缓存的目的&#xff0c;直接访问后端数据源…

C语言-文件操作函数基础+进阶标准输入流输出流

学习的流程 ———————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————…

RedisDesktopManager 安装

简介&#xff1a;安装redis可视化工具 一、下载压缩包 Redis 可视化工具 链接&#xff1a;https://pan.baidu.com/s/1P2oZx9UpQbXDsxJ3GPUeOQ 提取码&#xff1a;6rft Redis 命令窗口版本 链接&#xff1a;https://pan.baidu.com/s/1mIuxCEWwD__aoqp1Cx8MFQ 提取码&#xf…

Lucene及概念介绍

Lucene及概念介绍 基础概念倒排索引索引合并分析查询语句的构成 基础概念 Document&#xff1a;我们一次查询或更新的载体&#xff0c;对比于实体类 Field&#xff1a;字段&#xff0c;是key-value格式的数据&#xff0c;对比实体类的字段 Item&#xff1a;一个单词&#xff0…

如何做一个知识博主? 行动

任何事情都需要经过两次创造 提前做一个预演&#xff0c;计划 【以一个计划开始】 你的解决方案究竟将怎样应用? 要根据目标想到所有的关键因素并列出所有的步骤和所有重要的细节。 需要想清楚这个事情成事最核心的胜负手关键因素&#xff1f; 【抓关键】 涨粉&#xff1a…

Decoupled Multimodal Distilling for Emotion Recognition 论文阅读

Decoupled Multimodal Distilling for Emotion Recognition 论文阅读 Abstract1. Introduction2. Related Works2.1. Multimodal emotion recognition2.2. Knowledge distillation3. The Proposed Method3.1. Multimodal feature decoupling3.2. GD with Decoupled Multimodal …

简单易懂的SQL添加数据教程

1. 引言&#xff1a; SQL&#xff08;Structured Query Language&#xff09;是一种处理关系型数据库的标准语言&#xff0c;包括插入&#xff08;INSERT)、更新&#xff08;UPDATE&#xff09;、删除&#xff08;DELETE&#xff09;等操作。在数据库操作中&#xff0c;添加数…

基于muduo网络库实现的集群聊天服务器

目录 项目内容开发环境安装说明技术介绍项目目录数据库设计项目介绍启动服务器启动客户端注册账号登录成功一对一聊天业务创建群聊业务加入群聊业务群聊业务添加好友业务离线消息存储业务 特殊说明 &#xff01;&#xff01;&#xff01;项目是照着腾讯课堂施磊老师的视频学习&…