Python3 flask-socketio 整合vue

1. 前端说明

前端追加了vue-socket.io的依赖

更新package.json及package-lock.json后，需要补充库

2. 后端说明

服务端需要安装的python包

  • suse python 3.6.12
Flask_SocketIO-4.3.1-py2.py3-none-any.whl
python_socketio-4.6.0-py2.py3-none-any.whl
python_engineio-3.13.2-py2.py3-none-any.whl
cffi-1.15.1-cp36-cp36m-manylinux_2_5_x86_64.manylinux1_x86_64.whl
zope.event-4.6-py2.py3-none-any.whl
zope.interface-5.5.2-cp36-cp36m-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_12_x86_64.manylinux2010_x86_64.whl
greenlet-1.1.3-cp36-cp36m-manylinux1_x86_64.whl
gevent_websocket-0.10.1-py3-none-any.whl
gevent-20.12.1.tar.gz
  • windows python 3.8.10
Flask_SocketIO-4.3.1-py2.py3-none-any.whl
python_socketio-4.6.0-py2.py3-none-any.whl
python_engineio-3.13.2-py2.py3-none-any.whl
zope.event-4.6-py2.py3-none-any.whl
zope.interface-6.0-cp38-cp38-win_amd64.whl
cffi-1.15.1-cp38-cp38-win_amd64.whl
greenlet-2.0.2-cp38-cp38-win_amd64.whl
gevent_websocket-0.10.1-py3-none-any.whl
 其中gevent-20.12.1.tar.gz 需要最后手动解压然后 执行setup.py

3. whl依赖包下载

https://pypi.org/

如有网环境，可以采用以下安装方式：

先在有网环境下,PyCharm工具里面下载，如下图：

在这里插入图片描述
在这里插入图片描述

然后在无网环境下直接使用现成的即可：
在这里插入图片描述

备注：有网环境下也可采用下面的方式按照依赖

# 后端依赖安装
pip install flask-socketio
pip install flask-cors

# 前端依赖安装
npm install socket.io-client --also=dev
npm install  vue-socket.io --also=dev
npm install  echarts --also=dev

后端依赖安装

pip install flask-socketio
pip install flask-cors

前端依赖安装

npm install socket.io-client --also=dev
npm install vue-socket.io --also=dev
npm install echarts --also=dev

4. 报错问题

Linux 手动安装python setuptools时报错缺少zlib模块解决办法

python操作kafka报错：return ‘＜SimpleProducer batch=%s＞‘ % self.async

python ERROR: Could not find a version that satisfies the requirement XXX解决方法

【frida】lxhToolHTTPDecrypt安装使用问题

Python ThreadPoolExecutor线程池：
Python ThreadPoolExecutor线程池

5. 实现过程

前端代码

vue.config.js (只列出相关代码)

'use strict'
const path = require('path')
const defaultSettings = require('./src/settings.js')

function resolve(dir) {
  return path.join(__dirname, dir)
}

const name = defaultSettings.title || 'vue Admin Template' // page title



// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {
  /**
   * You will need to set publicPath if you plan to deploy your site under a sub path,
   * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
   * then publicPath should be set to "/bar/".
   * In most cases please use '/' !!!
   * Detail: https://cli.vuejs.org/config/#publicpath
   */
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  devServer: {
    host: '0.0.0.0',
    port: port,
    overlay: {
      warnings: false,
      errors: true
    },
    before: require('./mock/mock-server.js'),
    proxy: {
      // 本地使用代理  线上使用nginx
      '/dev-api/api': {
        target: `http://127.0.0.1:5100`,
        changeOrigin: true,
        onProxyReq:function (proxyReq, req, res, options) {
          if (req.body) {
            let bodyData = JSON.stringify(req.body);
            // incase if content-type is application/x-www-form-urlencoded -> we need to change to application/json
            proxyReq.setHeader('Content-Type','application/json');
            proxyReq.setHeader('Content-Length', Buffer.byteLength(bodyData));
            // stream the content
            proxyReq.write(bodyData);
          }
        },
        pathRewrite: {
          '^/dev-api/api': '/api'
        }
      },
      '/dev-api/upload/api': {
        target: `http://127.0.0.1:5100`,
        changeOrigin: true,
        onProxyReq:function (proxyReq, req, res, options) {
          if (req.body) {
            let bodyData = JSON.stringify(req.body);
            proxyReq.write(bodyData);
          }
        },
        pathRewrite: {
          '^/dev-api/upload/api': '/api'
        }
      },
      '/socket.io': {
        target: `http://127.0.0.1:5100`,
        ws: true,
        changeOrigin: true
       },
    }
  },
  
}

页面发起请求的按钮示例代码：

        <!-- 从架构平台同步应用系统数据-->
        <el-button type="primary" icon="el-icon-refresh" @click="updateAppList()">从架构平台同步</el-button>


import { getApplicationList, putApplicationItem, UpdateApplicationList, getApplicationDetail } from '@/api/organization'
import VueSocketIO from 'vue-socket.io'

后端代码

flask main.py

import os
import sys
import json
import time
# from crypt import methods
import queue
import xlrd
import threading
from concurrent.futures import ThreadPoolExecutor

from flask import Flask, Response, make_response, send_file, send_from_directory
from flask import request
from flask_socketio import SocketIO, send, emit

# sys.path.append("/app/app")

from service.service_websocket import update_business_list_webscoket, import_duty_info_websocket

app = Flask(__name__, instance_relative_config=True)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app, cors_allowed_origins="*")
executor = ThreadPoolExecutor(max_workers=2)
Swagger(app)

def update_business_list_thread(msg_queue):
    update_business_list_webscoket(msg_queue)
    
@socketio.on('connect', namespace='/update_application_list')
def connect_update_application_list():
    print("=============================update_application_list connect..")
    token = request.headers.get('X-Token')  # 获取token
    condition = {'update_by': ""}
    if token and token != '':
        user_info = get_user_data(token)
        user_id = user_info['id']
        condition['update_by'] = user_id
    print(condition)
    timeout = 120
    msg_queue = queue.Queue()
    # 在上面最开始程序中，executor = ThreadPoolExecutor(max_workers=2)
    # 表示创建一个线程池，而它的管理者就是实例对象executor，executor有一个submit() 方法，
    # 它会将线程提交给线程池，与原本直接使用Thread类的多线程编程不同，线程池中的线程提交后，若线程数量不超过max_workers，就会启动新提交的线程，
    # 而使用Thread类需要调用start() 方法去启动

    # 在执行update_business_list_webscoket(msg_queue)任务期间，实时的向队列msg_queue放入当前的执行状态信息
    thread = executor.submit(update_business_list_thread, msg_queue)
    #  threading.Timer 是 threading.Thread 的一个派生类，是在指定的时间 n 秒后执行一个函数功能。它会集成 threading.Thread 的很多属性和方法。
    threading.Timer(timeout, thread_timeout, args=(thread, msg_queue, ))

    # 使用 flask_socketio 默认提供的方法 start_background_task 伪同步的执行一个后台任务，该任务需要持续存在
    # 由于 app 上下文在伪同步中被保持，所以可以正确主动执行发送 emit / send
    socketio.start_background_task(target=handle_queue, namespace='update_application_list', msg_queue=msg_queue)


def thread_timeout(thread, msg_queue):
    try:
        if not thread.done():
            thread.cancel()
            msg_queue.put({'message': '应用信息同步超时', 'status': 'error'})   
    except Exception as r:
        print('未知错误 %s' % (r))

# 同时在执行的这个后台任务，一旦发现msg_queue里面有更新的状态信息，就会立即将响应返回给前端予以展示
def handle_queue(namespace, msg_queue):
    while True:
        socketio.sleep(1)
        while msg_queue.empty() == False:
            msg = msg_queue.get()
            socketio.emit(namespace, msg, namespace='/' + namespace)
            if msg['status'] == 'finished':
                print(namespace + ' is finished.')
                return

@socketio.on('connect')
def connect():
    print("=============================connect..")
    # socketio.emit("response", {'percentage': 18})

@socketio.on('disconnect')
def disconnect():
    print("===========================disconnect...")
    
@socketio.on_error()        # Handles the default namespace
def error_handler(e):
    print('=====================received error: ' + str(e))
    pass

@socketio.on_error_default  # handles all namespaces without an explicit error handler
def default_error_handler(e):
    print('=====================received error: ' + str(e))
    pass




if __name__ == '__main__':

    app.config.from_mapping(
        SECRET_KEY='dev',
        # DATABASE=os.path.join(app.instance_path, 'flaskr.sqlite'),
    )

    # if test_config is None:
    #     # load the instance config, if it exists, when not testing
    #     app.config.from_pyfile('config.py', silent=True)
    # else:
    #     # load the test config if passed in
    #     app.config.from_mapping(test_config)

    # ensure the instance folder exists
    try:
        os.makedirs(app.instance_path)
    except OSError:
        pass

    socketio.run(app, port=port_flask, host="0.0.0.0")

6. 效果演示：

先简单构造一个测试数据：
在这里插入图片描述

下面开始发起请求：
在这里插入图片描述

后端代码Print打印出来日志如下：
在这里插入图片描述

前端请求栏详细信息如下：
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

可以看到下面的时间间隔为15秒左右：
在这里插入图片描述

7. 参考文章：

vue使用 vue-socket.io三种方式及踩坑实例解析

https://github.com/xugaoxiang/FlaskTutorial

python socketio 服务器编程：

http://www.taodudu.cc/news/show-5726096.html?action=onClick

python socketio 服务器编程 源码：

https://github.com/yicaifenchen8/socketio

其他了解一下：

Flask教程(十九)SocketIO:

https://blog.csdn.net/djstavaV/article/details/112261889

Flask-SocketIO 中文文档：

http://juzizhou.net/article/112

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

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

相关文章

python爬虫学习简记

python爬虫学习简记

目录 页面结构的简单认识 爬虫概念理解 urllib库使用 爬虫解析工具xpath JsonPath Selenium requests基本使用 scrapy 页面结构的简单认识 如图是我们在pycharm中创建一个HTML文件后所看到的内容 这里我们需要认识的是上图的代码结构&#xff0c;即html标签包含了hea…
阅读更多...
前端页面的性能测试

前端页面的性能测试

目录 前言&#xff1a; 介绍 Lighthouse Cypress和Lighthouse 总结 前言&#xff1a; 前端页面性能测试是指对前端页面的响应时间、加载速度、页面交互性等方面进行测试和评估。 介绍 随着 Web 应用的空前发展&#xff0c;前端业务逐渐复杂&#xff0c;为了处理这些复杂…
阅读更多...
编程的未来 - 还有未来么？

编程的未来 - 还有未来么？

缘起 唐门教主上个月某天深夜写了一篇博客 --《编程的未来》&#xff0c;要我谈谈感想。 这也是最近软件工程师们聊得比较多的问题&#xff0c;上周&#xff0c;在上海的 “关东小磨” 和十多位 CSDN 博主聚会的时候&#xff0c;大家也稍微谈了一下这个话题&#xff0c;但是谈…
阅读更多...
Vue-全局事件总线(GlobalEventBus)

Vue-全局事件总线(GlobalEventBus)

全局事件总线(GlobalEventBus) 全局事件总线是vue中特别厉害的一种组件中通信的方式&#xff0c;它可以实现任意组件中通信&#xff0c;随便拿出来两个组件就能互通数据&#xff0c;就像对讲机一样&#xff0c;它在开发中用的也是特别的多 1 编写案例 首先准备两个组件&…
阅读更多...
diffusion model（三）—— classifier guided diffusion model

diffusion model（三）—— classifier guided diffusion model

classifier guided diffusion model 背景 对于一般的DM&#xff08;如DDPM&#xff0c; DDIM&#xff09;的采样过程是直接从一个噪声分布&#xff0c;通过不断采样来生成图片。但这个方法生成的图片类别是随机的&#xff0c;如何生成特定类别的图片呢&#xff1f;这就是clas…
阅读更多...
【Vue】Vite基础学习

【Vue】Vite基础学习

文章目录 Vite 基础学习一、单页面应用程序二、Vite 基本使用2.1 创建 vite 项目2.2 项目结构2.3 项目运行流程 Vite 基础学习 一、单页面应用程序 单页面应用程序&#xff08;英文名&#xff1a;Single Page Application&#xff09;简称 SPA&#xff0c;顾名思义&#xff0c…
阅读更多...
Server - 配置安装 Git LFS | BWM-NG | Tmux | BOS 等命令

Server - 配置安装 Git LFS | BWM-NG | Tmux | BOS 等命令

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://blog.csdn.net/caroline_wendy/article/details/131302104 构建实验Docker&#xff1a; nvidia-docker run -it --name git-lfs-[your name] --nethost -p [port]:[port] -v [nfs path…
阅读更多...
基于Python+Django+mysql+html图书管理系统

基于Python+Django+mysql+html图书管理系统

基于PythonDjangomysqlhtml图书管理系统 一、系统介绍二、功能展示1.用户登陆2.用户注册3.密码修改4.图书查询5.图书添加6.图书修改7.图书删除 三、其它系统四、获取源码 一、系统介绍 该系统实现了 用户登陆、用户注册、密码修改、图书查询、图书添加&#xff0c;图书修改、图…
阅读更多...
大厂OKR管理法：公开透明是最大特点

大厂OKR管理法：公开透明是最大特点

大厂OKR管理法&#xff1a;公开透明是最大的特点 仔细想&#xff0c;这是一件破天荒的事情 企业内部大部分的任务“公开透明” 公开透明会减少巨大的沟通成本 每个人的关键任务几乎是全部公开 估计少数的财务、人事、公关方面的不会 趣讲大白话&#xff1a;公开透明损耗少 【趣…
阅读更多...
尚硅谷甄选--（暂时不更新，实习，后期有时间更）

尚硅谷甄选--（暂时不更新，实习，后期有时间更）

文章目录 搭建后台管理系统模板项目的资源地址项目初始化2.1.1环境准备2.1.2初始化项目2.2项目配置一、eslint配置1.1vue3环境代码校验插件1.2修改.eslintrc.cjs配置文件1.3.eslintignore忽略文件1.4运行脚本 二、配置**prettier**2.1安装依赖包2.2.prettierrc.json添加规则2.3…
阅读更多...
高速电路设计系列分享-熟悉JESD204B（上）

高速电路设计系列分享-熟悉JESD204B（上）

目录 概要 整体架构流程 技术名词解释 技术细节 1.应用层 2.传输层 小结 基本概要 随着高速ADC跨入GSPS范围&#xff0c;与FPGA(定制ASIC)进行数据传输的首选接口协JESD204B。为了捕捉频率范围更高的RF频谱&#xff0c;需要宽带RFADC。在其推动下&#xff0c;对于能够捕捉更宽带…
阅读更多...
SpringBoot3 快速入门及原理分析

SpringBoot3 快速入门及原理分析

1. 环境要求 环境&工具版本SpringBoot3.0.5IDEA2021.2.1Java17Maven3.5Tomcat10.0 2. SpringBoot是什么 SpringBoot 能帮我们简单、快速地创建一个独立的、生产级别的 Spring 应用&#xff08;说明&#xff1a;SpringBoot底层是Spring&#xff09; SpringBoot 应用只需…
阅读更多...
【复杂网络建模】——基于微博数据的影响力最大化算法(PageRank)

【复杂网络建模】——基于微博数据的影响力最大化算法(PageRank)

&#x1f935;‍♂️ 个人主页&#xff1a;Lingxw_w的个人主页 ✍&#x1f3fb;作者简介&#xff1a;计算机科学与技术研究生在读 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4a…
阅读更多...
【吴恩达deeplearning.ai】基于LangChain开发大语言应用模型（下）

【吴恩达deeplearning.ai】基于LangChain开发大语言应用模型（下）

以下内容均整理来自deeplearning.ai的同名课程 Location 课程访问地址 DLAI - Learning Platform Beta (deeplearning.ai) LangChain for LLM Application Development 基于LangChain开发大语言应用模型&#xff08;上&#xff09; 一、LangChain: Q&A over Documents基于文…
阅读更多...
MySQL进阶SQL语句2之表连接

MySQL进阶SQL语句2之表连接

目录 1.连接查询 1.1inner&#xff08;内连接&#xff09; 1.2left join&#xff08;左连接&#xff09; 1.3right join&#xff08;右连接&#xff09; 1.4直接查询两个表相同的字段值的数据 2. VIEW&#xff08;视图&#xff09; 2.1create view&#xff08;创建视图…
阅读更多...
3.CSS 的背景

3.CSS 的背景

通过CSS背景属性&#xff0c;可以给页面元素添加背景样式。 背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。 3.1背景颜色 background-color属性定义了元素的背景颜色 background-color:颜色值;一般情况下元素背景颜色默认值是transparent(透…
阅读更多...
MySQL数据库主从复制与读写分离（图文详解！）

MySQL数据库主从复制与读写分离（图文详解！）

目录 前言 一&#xff1a;MySQL数据库主从复制与读写分离 1、什么是读写分离&#xff1f; 2、为什么要读写分离呢&#xff1f; 3、什么时候要读写分离&#xff1f; 4、主从复制与读写分离 5、mysql支持的复制类型 &#xff08;1&#xff09;STATEMENT &#xff08;2&…
阅读更多...
云原生时代数据治理的变革与创新

云原生时代数据治理的变革与创新

随着数字化进程的深入&#xff0c;企业对数据的依赖日益加深&#xff0c;数据资源的重要性愈发凸显。如何管好、用好数据&#xff0c;做好数据治理工作&#xff0c;发挥数据资源价值&#xff0c;成为企业提质增效过程中的重要议题。 在本次直播中&#xff0c;我们介绍了数据治…
阅读更多...
计算机网络管理- SNMP协议报文和报文格式分析，SNMP PDU分析

计算机网络管理- SNMP协议报文和报文格式分析，SNMP PDU分析

⬜⬜⬜ &#x1f430;&#x1f7e7;&#x1f7e8;&#x1f7e9;&#x1f7e6;&#x1f7ea;(*^▽^*)欢迎光临 &#x1f7e7;&#x1f7e8;&#x1f7e9;&#x1f7e6;&#x1f7ea;&#x1f430;⬜⬜⬜ ✏️write in front✏️ &#x1f4dd;个人主页&#xff1a;陈丹宇jmu &am…
阅读更多...
【MongoDB】五、MongoDB分片集群的部署

【MongoDB】五、MongoDB分片集群的部署

【MongoDB】五、MongoDB分片集群的部署 实验目的实验内容实验步骤环境准备部署 Config server配置Config Server副本集部署Shard部署mongos启动分片功能查看分片信息 实验小结 实验目的 能够通过部署MongoDB分片集群熟悉MongoDB分片集群架构和基本操作&#xff0c;从而解决大数…
阅读更多...
最新文章

Copyright @ 2022~2023