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,一经查实,立即删除!

相关文章

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

基于微信小程序的自习室预约系统的设计与实现 文章目录 基于微信小程序的自习室预约系统的设计与实现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…

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…

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 …

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

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

docker部署DOS游戏

下载镜像 docker pull registry.cn-beijing.aliyuncs.com/wuxingge123/dosgame-web-docker:latestdocker-compose部署 vim docker-compose.yml version: 3 services:dosgame:container_name: dosgameimage: registry.cn-beijing.aliyuncs.com/wuxingge123/dosgame-web-docke…

How to install JDK on mac

文章目录 1. Install JDK on mac2. zshenv, zshrc, zprofile3. 查看java环境变量配置 1. Install JDK on mac Installation of the JDK on macOS 2. zshenv, zshrc, zprofile How Do Zsh Configuration Files Work? 3. 查看java环境变量配置 open Terminal&#xff0c;cd…

02-JDK新特性-Lambda表达式

JDK新特性 Lambda表达式 什么是Lambda表达式 Lambda表达式是一个匿名代码块&#xff0c;用于简单的传递一段代码片段。 Lambda表达式标准格式 格式&#xff1a;(形式参数) -> {代码块} 形式参数 如果有多个参数&#xff0c;参数只见用逗号隔开&#xff1b;如果没有&…

【Linux 10】环境变量

文章目录 &#x1f308; Ⅰ 命令行参数⭐ 1. main 函数的参数⭐ 2. main 函数参数的意义⭐ 3. 查看 argv 数组的内容⭐ 4. 命令行参数结论⭐ 5. 为什么要有命令行参数⭐ 6. 命令行参数传递由谁执行 &#x1f308; Ⅱ 环境变量基本概念⭐ 1. 常见环境变量 &#x1f308; Ⅲ 查看…

macOS Catalina for mac (macos 10.15系统)v10.15.7正式版

macOS Catalina是苹果公司专为麦金塔电脑推出的桌面操作系统&#xff0c;是macOS的第16个主要版本。它继承了苹果一贯的优雅与高效&#xff0c;不仅引入了分割视图和侧边栏&#xff0c;还带来了全新的音乐和播客应用&#xff0c;极大地提升了用户体验。在隐私保护和安全性方面&…

【Laravel】07 快速套用一个网站模板

【Laravel】07 快速套用一个网站模板 1. 新增post表2.补充 &#xff1a;生成Model、Controller、迁移文件3. 使用php artisan tinker4. 网站模板下载 课程地址 1. 新增post表 在Model中创建Post (base) ➜ example-app php artisan make:model Post Model created successfu…

练习3-2 计算符号函数的值

对于任一整数n&#xff0c;符号函数sign(n)的定义如下&#xff1a; 请编写程序计算该函数对任一输入整数的值。 输入格式: 输入在一行中给出整数n。 输出格式: 在一行中按照格式“sign(n) 函数值”输出该整数n对应的函数值。 输入样例1: 10 输出样例1: sign(10) 1 输入样例…

pytest--python的一种测试框架--pytest常用断言类型

一、pytest常用断言类型 等于: 不等于&#xff1a;&#xff01; 大于&#xff1a;> 小于&#xff1a;< 属于&#xff1a;in 不属于&#xff1a;not in 大于等于&#xff1a;> 小于等于&#xff1a;< 是&#xff1a;is 不是&#xff1a;is not def test_two():ass…