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.rhkb.cn/news/293257.html

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

相关文章

逐步学习Go-Select多路复用

概述 这里又有多路复用,但是Go中的这个多路复用不同于网络中的多路复用。在Go里,select用于同时等待多个通信操作(即多个channel的发送或接收操作)。Go中的channel可以参考我的文章:逐步学习Go-并发通道chan(channel)…

使用 Yoda 和 ClickHouse 进行实时欺诈检测

背景 Instacart 是北美领先的在线杂货公司,拥有数百万活跃的客户和购物者。在其平台上打击欺诈和滥用行为不仅对于维护一个值得信赖和安全的环境至关重要,也对保持Instacart的财务健康至关重要。在这篇文章中,将介绍了一个欺诈平台——Yoda,解释了为什么我们选择ClickHous…

【踩坑】荣耀系统Android8.0 system目录Read-only file system

本来以为直接把Charles证书改成系统证书格式,然后通过mt管理器root之后移动到系统证书目录就行了,结果访问baidu仍然显示网络错误,折腾一晚上。后来直接安装为用户证书,与系统证书冲突。 手机型号:荣耀v10 EMUI&…

升级程序到Java21的记录一(在先升级jdk到21)

背景:为了使用Java21的最新特性虚拟线程以及提高程序的整体性能,决定将一个程序A升级到Java21. 备注:程序A有很多文件操作因此使用虚拟线程对提升性能有帮助,如果读者的程序是其他类型,请参考虚拟线程的一些资料决定是…

STM32学习笔记(10_3)- 软件I2C读写MPU6050

无人问津也好,技不如人也罢,都应静下心来,去做该做的事。 最近在学STM32,所以也开贴记录一下主要内容,省的过目即忘。视频教程为江科大(改名江协科技),网站jiangxiekeji.com 本期开…

flutter官方案例context_menus

1:根据项目中的案例进行部署 2:运行查看有什么用,可不可以直接复制粘贴 案例地址 https://github.com/flutter/samples/tree/main/context_menus案例展示方法 直接把这个文件夹中的文件复制到lib文件夹中 3,19,4的fl…

Lazarus远控组件NukeSped分析

静态信息: 样本md5:9b656f5d7e679b94e7b91fc3c4f313e4 由此可见为假的Adobe Flash Player 的攻击样本 样本分析 通过五个函数,内部调用sub_40159D函数动态获取API函数 利用IDA python解密字符串。。 完整python代码 Python> idc.get_…

最优算法100例之18-列升序行升序的数组中查找元素

专栏主页:计算机专业基础知识总结(适用于期末复习考研刷题求职面试)系列文章https://blog.csdn.net/seeker1994/category_12585732.html 题目描述 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序。请完成一个函数,输入这样一…

LeetCode刷题【链表,图论,回溯】

目录 链表138. 随机链表的复制148. 排序链表146. LRU 缓存 图论200. 岛屿数量994. 腐烂的橘子207. 课程表 回溯 链表 138. 随机链表的复制 给你一个长度为 n 的链表,每个节点包含一个额外增加的随机指针 random ,该指针可以指向链表中的任何节点或空节…

计算机网络——32差错检测和纠正

差错检测和纠正 错误检测 EDC 差错检测和纠错位(冗余位) D 数据由差错检测保护,可以包含头部字段 错误检测不是100%可靠的 协议会泄露一些错误,但是很少更长的EDC字段可以得到更好的检测和纠正效果 奇偶校验 单bit奇偶校验 …

App推广新篇章:Xinstall助力精准分析与优化

在当前的移动应用市场中,App推广已成为每个开发者不可或缺的一环。然而,推广并非简单的投放广告与等待用户下载,而是需要一套科学、系统的分析与优化流程。这正是Xinstall作为国内专业的App全渠道统计服务商,能够为您带来的核心价…

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 …

【vue2+antvx6】报错Cannot read properties of undefined (reading ‘toUpperCase‘)

我的代码是这样的 <el-collapseref"collapse"v-model"active"accordionclass"collapseStart"change"collapsechange"><el-collapse-item:name"String(index 1)"v-for"(i, index) in List":key"in…

【PduR路由】IPduM模块详细介绍

目录 1.IpduM功能简介 2.IpduM模块依赖的其他模块 2.1RTE (BSW Scheduler) 2.2PDU Router 2.3COM 3.IpduM功能详解 3.1 功能概述 3.2 I-PDU多路复用I-PDU Multiplexing 3.2.1 Definitions and Layout 3.2.2通用功能描述 General 3.2.3模块初始化 Initialization 3.…

【b站李炎恢】Vue.js Element UI 下 | 十天技能课堂 | 更新中... | 李炎恢

课程地址&#xff1a;【Vue.js Element UI | 十天技能课堂 | 更新中... | 李炎恢】 https://www.bilibili.com/video/BV1U54y127GB/?share_sourcecopy_web&vd_sourceb1cb921b73fe3808550eaf2224d1c155 备注&#xff1a;虽然标题声明还在更新中&#xff0c;但是看一些常用…

python统计分析——双样本均值比较

参考资料&#xff1a;python统计分析【托马斯】 1、配对样本t检验 在进行两组数据之间的比较时&#xff0c;有两种情况必须区分开。在第一种情况中&#xff0c;同一对象在不同时候的两个记录值进行相互比较。例如&#xff0c;用学生们进入初中时的身高和他们一年后的身高&…

Python - 深度学习系列31 - ollama的搭建与使用

说明 做这个的主要目的是为了搭建Langchain的本地环境&#xff0c;使用LangChain让LLM具备调用自定义函数的功能。 内容 1 安装server 以下将ollama的安装方式&#xff0c;以及使用做一个简单的说明(记录&#xff09;。之前对这个工具没有了解&#xff0c;只是从快速实践的…

LoRa物联网行业解决方案 1

1 行业应用 智慧停车 智能抄表 智慧牧场 智能生产 智能物流 智能健康 2 物联网智慧农场项目需求 3 为什么选lora&#xff1f; 4 设计 5 模块性能参数 sx1278 lora扩频无线模块 SEMTECH公司SX1278芯片 LoRa 扩频技术 通信距离10000米 SPI通信接口 mcu选型 硬件平台介绍 …

速通汇编(三)寄存器及汇编mul、div指令

一&#xff0c;寄存器及标志 AH&ALAX(accumulator)&#xff1a;累加寄存器BH&BLBX(base)&#xff1a;基址寄存器CH&CLCX(count)&#xff1a;计数寄存器DH&DLDX(data)&#xff1a;数据寄存器SP(Stack Pointer)&#xff1a;堆栈指针寄存器BP(Base Pointer)&#…

【IC前端虚拟项目】mvu顶层集成的原则与技巧

【IC前端虚拟项目】数据搬运指令处理模块前端实现虚拟项目说明-CSDN博客 截止目前,所有的子模块编码均宣告完成,接下来就是封装顶层的时刻了。我自己规划和集成顶层一般有一个习惯,就是在top层下面封装core层和其他模块,比如mvu的top层下例化了mvu_reg和mvu_core两个模块,…