【计算机网络基础——系列12】flask作为服务器与vue实现websocket通信

最新推荐文章于 2024-05-29 18:02:51 发布
置顶 最新推荐文章于 2024-05-29 18:02:51 发布
阅读量7k 收藏 12
点赞数 4
分类专栏： 计算机网络 前端 python 文章标签： python websocket vue http
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangyaning123/article/details/117919269
版权
前端 同时被 3 个专栏收录
39 篇文章 2 订阅
订阅专栏
计算机网络
16 篇文章 1 订阅
订阅专栏
python
8 篇文章 0 订阅
订阅专栏

系列文章目录

【计算机网络基础——系列1】-matlab与python使用socket udp进行进程间通信
【计算机网络基础——系列2】-matlab与python使用socket tcp进行进程间通信
【计算机网络基础——系列3】输入url后页面会遇到的问题
【计算机网络基础——系列4】关于HTTP请求的相关内容
【计算机网络基础——系列5】前端遇到的三种网络攻击
【计算机网络基础——系列6】浏览器缓存之cookie、session、localstorage
【计算机网络基础——系列7】浏览器缓存之—http缓存
【计算机网络基础——系列8】前端优化总结
【计算机网络基础——系列9】restful规范；dns劫持
【计算机网络基础——系列10】osi网络结构；tcp协议保持传输的可靠性；SSL
【计算机网络基础——系列11】实现python作为服务端与qt进行udp通信
【计算机网络基础——系列12】flask作为服务器与vue实现websocket通信

文章目录

一、为什么选择websocket

之前使用flask与前端进行通信一直是使用的http1.0，通过Ajax轮询的方式实现通信，通信的进行是不断的通过客户端发送请求-服务端响应来进行的，这样客户端需要不断的去进行请求，浪费资源和性能。
以前做项目时也因为使用AJAX轮询，而数据请求过于频繁出现过相关问题，所以这次的项目我打算使用websocket进行

1.1 websocket是什么？

HTML5开始提供的一种浏览器与服务器进行全双工通讯的网络技术，属于应用层协议。它基于TCP传输协议，并复用HTTP的握手通道。他在HTTP1.1实现长连接的基础上还能够保有超时重连和心跳机制。

1.2 websocket的优点

  1. 支持双向通信，实时性更强，有超时重连和心跳机制，数据传输更加稳定可靠。
  2. 更好的二进制支持。
  3. 较少的控制开销。连接创建后，ws客户端、服务端进行数据交换时，协议控制的数据包头部较小。在不包含头部的情况下，服务端到客户端的包头只有2~10字节（取决于数据包长度），客户端到服务端的的话，需要加上额外的4字节的掩码。而HTTP协议每次通信都需要携带完整的头部。
  4. 支持扩展。ws协议定义了扩展，用户可以扩展协议，或者实现自定义的子协议。（比如支持自定义压缩算法等）

相比较传统的http与websocket可用一幅图表示：

从图中可以知道，websocket只需要发送一次请求就可以建立起长期有效的连接。

在这里插入图片描述

1.3 websocket报文

1.3.1 客户端请求报文：

可以看出，websocket还是基于http1.1的使用get请求的连接

GET / HTTP/1.1
Host: localhost:8080 
Origin: http://127.0.0.1:3000
Connection: Upgrade 
Upgrade: websocket 
Sec-WebSocket-Version: 13
Sec-WebSocket-Key: w4v7O6xFTi36lq3RNcgctw==
  1. Connection: Upgrade：表示要升级协议
  2. Upgrade: websocket：表示要升级到websocket协议。
  3. Sec-WebSocket-Version:13：表示websocket的版本。如果服务端不支持该版本，需要返回一个Sec-WebSocket-Versionheader，里面包含服务端支持的版本号。（这个地方在前两天的尝试中就吃过亏，客户端和服务端的版本号不一致导致连接失败——后来全部升级到了最新版本）
  4. Sec-WebSocket-Key：与后面服务端响应首部的Sec-WebSocket-Accept是配套的，提供基本的防护，比如恶意的连接，或者无意的连接。

1.3.2 服务端响应报文：

HTTP/1.1 101 Switching Protocols
Connection:Upgrade 
Upgrade: websocket 
Sec-WebSocket-Accept: Oy4NRAQ13jhfONC7bP8dTKb4PTU=
Sec-WebSocket-Protocol:chat
  1. 101 状态码表示服务器已经理解了客户端的请求，并将通过 Upgrade 消息头通知客户端采用不同的协议来完成这个请求；
  2. Sec-WebSocket-Accept 这个则是经过服务器确认，并且加密过后的 Sec-WebSocket-Key,主要作用在于提供基础的防护，减少恶意连接、意外连接。
  3. Sec-WebSocket-Protocol 则是表示最终使用的协议,将 Sec-WebSocket-Key 跟258EAFA5-E914-47DA-95CA-C5AB0DC85B11 拼接,通过 SHA1 计算出摘要，并转成 base64字符串。

1.3.3 数据帧预览格式：

  0                   1                   2                   3
  0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
 +-+-+-+-+-------+-+-------------+-------------------------------+
 |F|R|R|R| opcode|M| Payload len |    Extended payload length    |
 |I|S|S|S|  (4)  |A|     (7)     |             (16/64)           |
 |N|V|V|V|       |S|             |   (if payload len==126/127)   |
 | |1|2|3|       |K|             |                               |
 +-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
 |     Extended payload length continued, if payload len == 127  |
 + - - - - - - - - - - - - - - - +-------------------------------+
 |                               |Masking-key, if MASK set to 1  |
 +-------------------------------+-------------------------------+
 | Masking-key (continued)       |          Payload Data         |
 +-------------------------------- - - - - - - - - - - - - - - - +
 :                     Payload Data continued ...                :
 + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
 |                     Payload Data continued ...                |
 +---------------------------------------------------------------+

二、客户端（vue）使用websocket

1.数据声明

data() {
      return {
        websock: null, //建立的连接
        lockReconnect: false, //是否真正建立连接
        timeout: 28 * 1000, //30秒一次心跳
        timeoutObj: null, //外层心跳倒计时
        serverTimeoutObj: null, //内层心跳检测
        timeoutnum: null //断开 重连倒计时
      };
    },

2.生命周期启动关闭连接

这里删除的定时器是后文进行心跳机制使用到的。

mounted:function(){
      this.initWebSocket();
    },
    beforeDestroy: function () {
      // 页面离开时断开连接,清除定时器
      this.disconnect();
      clearInterval(this.timer);
    },

3.methods中进行websocket各个函数设置

3.1 初始化websocket

 initWebSocket() {
        //初始化weosocket
        const wsuri = "ws://127.0.0.1:5000/test";
        this.websock = new WebSocket(wsuri);
        this.websock.onopen = this.websocketonopen;
        this.websock.onmessage = this.websocketonmessage;
        this.websock.onerror = this.websocketonerror;
        this.websock.onclose = this.websocketclose;
        this.websock.onsend=this.websocketsend;
      },
事件事件处理程序描述
openSocket.onopen连接建立时触发
messageSocket.onmessage客户端接收服务端数据时触发
errorSocket.onerror通信发生错误时触发
closeSocket.onclose连接关闭时触发
sendSocket.send()使用连接发送数据

3.2 websocket的超时重连机制

其原理是在发送某一个数据以后就开启一个计时器，在一定时间内如果没有得到发送的数据报的确认报文，那么就重新发送数据，直到发送成功为止。这里是以that.lockReconnect为判断依据

reconnect() {
        //重新连接
        var that = this;
        if (that.lockReconnect) {
          // 是否真正建立连接
          return;
        }
        that.lockReconnect = true;
        //没连接上会一直重连，设置延迟避免请求过多
        that.timeoutnum && clearTimeout(that.timeoutnum);
        // 如果到了这里断开重连的倒计时还有值的话就清除掉
        that.timeoutnum = setTimeout(function() {
          //然后新连接
          that.initWebSocket();
          that.lockReconnect = false;
        }, 5000);
      },

3.3 websocket的心跳机制

所谓心跳机制是指定时发送一个自定义的结构体 (心跳包，在本文中self.websock.send("heartCheck"))，让对方知道自己还活着，以确保连接的有效性的机制。判断依据是self.websock.readyState。

websock.readyState值代表状态
0正在链接中
1已经链接并且可以通讯
2连接正在关闭
3连接已关闭或者没有链接成功
 reset() {
        //重置心跳
        var that = this;
        //清除时间（清除内外两个心跳计时）
        clearTimeout(that.timeoutObj);
        clearTimeout(that.serverTimeoutObj);
        //重启心跳
        that.start();
      },
      start() {
        //开启心跳
        var self = this;
        self.timeoutObj && clearTimeout(self.timeoutObj);
        // 如果外层心跳倒计时存在的话，清除掉
        self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj);
        // 如果内层心跳检测倒计时存在的话，清除掉
        self.timeoutObj = setTimeout(function() {
          // 重新赋值重新发送 进行心跳检测
          //这里发送一个心跳，后端收到后，返回一个心跳消息，
          if (self.websock.readyState === 1) {
            //如果连接正常
            self.websock.send("heartCheck");
          }
          else {
            //否则重连
            self.reconnect();
          }
          self.serverTimeoutObj = setTimeout(function() {
            // 在三秒一次的心跳检测中如果某个值3秒没响应就关掉这次连接
            //超时关闭
            self.websock.close();
          }, self.timeout);
        }, self.timeout);
        // 3s一次
      },

3.4 执行函数

websocketonopen(e) {
        //连接建立之后执行send方法发送数据
        console.log("成功",e);
        let actions = 123;
        this.websocketsend(JSON.stringify(actions));
      },
      websocketonerror() {
        //连接建立失败重连
        console.log("失败");
        this.initWebSocket();
      },
      websocketonmessage(e) {
        //数据接收
        const redata = JSON.parse(e.data);
        console.log('接收',redata);
        // this.aa = [...this.aa, redata.type];
        this.reset();
      },
      websocketsend(Data) {
        //数据发送
        console.log('发送',Data);
        this.websock.send(Data);
      },
      websocketclose(e) {
        //关闭
        console.log("断开连接", e);
      }

3.5 源码


<template>
  <div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        websock: null, //建立的连接
        lockReconnect: false, //是否真正建立连接
        timeout: 28 * 1000, //30秒一次心跳
        timeoutObj: null, //外层心跳倒计时
        serverTimeoutObj: null, //内层心跳检测
        timeoutnum: null //断开 重连倒计时
      };
    },
    mounted:function(){
      this.initWebSocket();
    },
    beforeDestroy: function () {
      // 页面离开时断开连接,清除定时器
      this.disconnect();
      clearInterval(this.timer);
    },
    methods: {
      initWebSocket() {
        //初始化weosocket
        const wsuri = "ws://127.0.0.1:5000/test";
        this.websock = new WebSocket(wsuri);
        this.websock.onopen = this.websocketonopen;
        this.websock.onmessage = this.websocketonmessage;
        this.websock.onerror = this.websocketonerror;
        this.websock.onclose = this.websocketclose;
        this.websock.onsend=this.websocketsend;
      },
      reconnect() {
        //重新连接
        var that = this;
        if (that.lockReconnect) {
          // 是否真正建立连接
          return;
        }
        that.lockReconnect = true;
        //没连接上会一直重连，设置延迟避免请求过多
        that.timeoutnum && clearTimeout(that.timeoutnum);
        // 如果到了这里断开重连的倒计时还有值的话就清除掉
        that.timeoutnum = setTimeout(function() {
          //然后新连接
          that.initWebSocket();
          that.lockReconnect = false;
        }, 5000);
      },
      reset() {
        //重置心跳
        var that = this;
        //清除时间（清除内外两个心跳计时）
        clearTimeout(that.timeoutObj);
        clearTimeout(that.serverTimeoutObj);
        //重启心跳
        that.start();
      },
      start() {
        //开启心跳
        var self = this;
        self.timeoutObj && clearTimeout(self.timeoutObj);
        // 如果外层心跳倒计时存在的话，清除掉
        self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj);
        // 如果内层心跳检测倒计时存在的话，清除掉
        self.timeoutObj = setTimeout(function() {
          // 重新赋值重新发送 进行心跳检测
          //这里发送一个心跳，后端收到后，返回一个心跳消息，
          if (self.websock.readyState === 1) {
            //如果连接正常
            self.websock.send("heartCheck");
          }
          else {
            //否则重连
            self.reconnect();
          }
          self.serverTimeoutObj = setTimeout(function() {
            // 在三秒一次的心跳检测中如果某个值3秒没响应就关掉这次连接
            //超时关闭
            self.websock.close();
          }, self.timeout);
        }, self.timeout);
        // 3s一次
      },

      websocketonopen(e) {
        //连接建立之后执行send方法发送数据
        console.log("成功",e);
        let actions = 123;
        this.websocketsend(JSON.stringify(actions));
      },
      websocketonerror() {
        //连接建立失败重连
        console.log("失败");
        this.initWebSocket();
      },
      websocketonmessage(e) {
        //数据接收
        const redata = JSON.parse(e.data);
        console.log('接收',redata);
        // this.aa = [...this.aa, redata.type];
        this.reset();
      },
      websocketsend(Data) {
        //数据发送
        console.log('发送',Data);
        this.websock.send(Data);
      },
      websocketclose(e) {
        //关闭
        console.log("断开连接", e);
      }
    }
  };

</script>

三、服务端（python flask）使用websocket

本来是想用nodejs作为服务端的，但是算法部分使用python做的，如果用nodejs做又需要进程通信使用到socket udp，就还是使用flask了。

  • 端口设置了5000，ip地址就是127.0.0.1，确保心跳机制的执行，服务端必须接收到客户端发的消息才能保持该服务运行，如果ws.receive()没有接收到客户端发送的消息，那么它会关闭与客户端建立的链接。

  • 底层解释：Read and return a message from the stream. If None is
    returned, then
    the socket is considered closed/errored.

  • 所以客户端只建立连接，不与服务端交互通信，则无法实现自由通信状态，之后在客户端代码处会有详细内容。

from flask import Flask, jsonify, request  # 引入核心处理模块
import json
from flask_sockets import Sockets
import time
import sys
import os
from gevent import monkey
from gevent import pywsgi
from geventwebsocket.handler import WebSocketHandler
print('已进入')
sys.path.append(os.path.abspath(os.path.dirname(__file__) + '/' + '..'))
sys.path.append("..")
monkey.patch_all()
app = Flask(__name__)
sockets = Sockets(app)
now = time.strftime('%Y-%m-%d-%H-%M-%S', time.localtime(time.time()))
@sockets.route('/test')  # 指定路由
def echo_socket(ws):
    while not ws.closed:
            ws.send(str(111111111))  # 回传给clicent
            """ 服务端必须接收到客户端发的消息才能保持该服务运行，如果ws.receive()没有接收到客户端发送的
             消息，那么它会关闭与客户端建立的链接
             底层解释：Read and return a message from the stream. If `None` is returned, then
            the socket is considered closed/errored.
            所以客户端只建立连接，不与服务端交互通信，则无法实现自由通信状态，之后在客户端代码处会有详细内容。
             """
            message = ws.receive()  # 接收到消息
            if message is not None:
                print("%s receive msg==> " % now, str(json.dumps(message)))
                """ 如果客户端未发送消息给服务端，就调用接收消息方法，则会导致receive()接收消息为空，关闭此次连接 """
                ws.send(str(json.dumps(message)))  # 回传给clicent
            else:
                print(now, "no receive")
@app.route('/')
def hello():
    return 'Hello World! server start！'
if __name__ == "__main__":
    server = pywsgi.WSGIServer(('127.0.0.1', 5000), app, handler_class=WebSocketHandler)
    print('server start')
    server.serve_forever()

四、通信测试

这里推荐一个好网站，既可以测试服务端又可以测试客户端的网站（工具）

  • 这个网站自己内置了一个websocket客户端的js，在输入行内输入服务端的入口地址即可以连接上客户端，然后实现数据通信。也可以知晓服务端的问题所在
  • 同时，这个网站还提供了一个示例服务器，可以返回客户端发送的数据，这样就可以测试客户端的问题所在，前两天就是通过这个网站找到的服务端的问题的。

在这里插入图片描述

这是网站地址：测试websocket通信网站

五、报错集锦

5.1 404出错

在这里插入图片描述
这是链接指向的网页不存在，即原始网页的URL失效，无法在所请求的端口上访问Web站点，通过修改服务端的启动部分解决：

if __name__ == "__main__":
    server = pywsgi.WSGIServer(('127.0.0.1', 5000), app, handler_class=WebSocketHandler)
    print('server start')
    server.serve_forever()

5.2 python的flask_socket模块安装失败

ModuleNotFoundError: No module named 'flask_sockets'

我已经使用了pip install flask_socket，但是启动后仍然报错，于是我查到可能因为flask的版本问题，于是我就重新pip install flask，然后再下载flask_socket，于是成功

pip install flask
pip install flask_socket

5.3 object null is not iterable (cannot read property Symbol(Symbol.iterator))

这个错误因为强制转换了类型导致失败 如下：

 const redata = JSON.parse(e.data);
        console.log('接收',redata);
        // this.aa = [...this.aa, redata.type];
        this.reset();

于是我把这个隐去了this.aa = [...this.aa, redata.type];就成功了。

5.4 sockjs-node/info?t=报错

sockjs-node是一个低延时全双工的API，我在这里没有用到，于是找到它，隐去它，成功！

在node_moudules中找到它：

try {
  //  self.xhr.send(payload); 把这里注掉
  } catch (e) {
    self.emit('finish', 0, '');
    self._cleanup(false);
  }

5.5 ws与http的报错

在这个方法中，设置地址要用ws代替http；wss代替https。

const wsuri = "ws://127.0.0.1:5000/test";

六、相关环境配置

6.1 python flask服务端

pip install flask 
pip install json
pip install flask_sockets 
pip install time
pip install sys
pip install os
pip install gevent 
pip install geventwebsocket.handler

6.2 vue客户端

这个方法没有额外引入js文件，但如果使用socketio方法的话，需要在main.js中加入：

 import VueSocketIOExt from 'vue-socket.io-extended';
 import socketio from 'socket.io-client';
 Vue.use(VueSocketIOExt, socketio('http:127.0.0.1:8888'));
 Vue.prototype.$socketio = socketio;

或者是在当前vue文件中引入：

import SockJS from  'sockjs-client';
import  Stomp from 'stompjs';

码字不易~， 各位看官要是看爽了，可不可以三连走一波，点赞皆有好运！，不点赞也有哈哈哈~~~

让子弹飞一会儿=>
关注
  • 4
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
专栏目录
Python Web开发Flask+Vue+ElementUI框架实战教程
一米阳光的博客
04-23 733
一款 Python 语言基于Flask、Vue2.x、ElementUI、MySQL等框架精心打造的一款高性能的前后端分离架构敏捷开发框架，可快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，框架自研了一套个性化的图片上传组件，实现了可插拔的组件式开发方式，同时为了敏捷快速开发，框架特地集成了代码生成器，完全自主研发了自定义后端服务模板和前端模板，可以根据已建好的表结构，可以快速的一键生成整个模块的所有代码和增删改查等等功能业务，真正实现了低代码开发方式，极大的节省了人力成本的同时提高了开发
Flask实战视频教程下载2022
10-31
Flask实战视频教程下载2022——Flask+Vue+WebSocket打造论坛系统+聊天系统
使用flask实现WebSocket
最新发布
CH_happy的博客
05-29 602
基于websocket实现游览器和服务器的信息交互
三维交互可视化平台（智慧海上牧场平台）学习开发Flask+Vue+Echarts+Mysql+websocket 实战（四）
专攻毕设大企鹅的博客
10-21 2480
智慧渔业养殖系统软件部分
计算机网络 零碎知识
siriusol的博客
02-20 474
OSI 七层协议 物理层、数据链路层、网络层、传输层、会话层、表示层、应用层。 应用层 ( application-layer ） 通过应用进程间的交互来完成特定网络应用。 应用层交互的数据单元称为报文。 应用层协议 域名系统DNS，支持万维网应用的 HTTP协议，支持电子邮件的 SMTP协议等等。 传输层 ( transport layer ) 负责向两台主机进程之间的通信提供通用的数据传...
项目实战视频课程：美团网（Vue2+Python+Flask）
06-09
课程实现了美团网的核心部分。采用异步的方式，通过AJAX从服务端获取数据，并使用Vue2和jQuery动态更新数据。美团网实现的功能包括首页分类显示、注册登录、商品页面、套餐页面、购物，支付（从零使用Python实现）、个人中心等。
第22节，socket初识和安装(2021【前端VUE框架】最新/最全/最细实战课程，VUE56节进阶学习)
cyhlili100的博客
11-11 212
本节讲解的内容是：socket初识和安装。请看下面的视频课程 2021【前端VUE框架】最新/最全/最细实战课程，VUE56节分享，免费拿不谢！ vue学习目标： 提示：2021【前端VUE框架】最新/最全/最细实战课程，VUE56节进阶学习 重磅来袭：3个月掌握 vue 入门知识到实战学代码。 vue学习内容： 提示：本节第17节内容：vue-cli知识点 学习本节视频需要掌握的知识
基于Python+Flask websocket 和 vue 的实时聊天项目-毕业设计源码+使用文档（高分优秀项目）
04-14
基于Python+Flask websocket 和 vue 的实时聊天项目-毕业设计源码+使用文档（高分优秀项目） 该项目是个人高分毕业设计项目源码，已获导师指导认可通过，答辩评审分达到97分，在window10/11测试环境严格调试，下载即...
聊天室、websocket、socket.io、计算机毕业设计
02-19
对于计算机毕业设计来说，选择WebSocket或Socket.IO来实现聊天室是一个不错的选择，因为它涉及到网络编程、实时通信和用户界面等多个方面的知识，可以全面检验学生的编程能力、系统设计能力和问题解决能力。...
websocket方法实现收发语音的服务器和客户端的python代码
12-20
WebSocket协议是一种在客户端和服务器之间建立长久连接的通信协议，它允许双向实时通信，而不仅仅是传统的HTTP请求-响应模式。在Python中实现WebSocket，我们可以利用socket库或第三方库如`websocket-client`和`...
Flask+Vue 仓储物资管理系统
05-29
基于Flask+Vue的仓储物资管理系统。主要功能包括：商品管理、供应商管理、客户管理、仓库管理、商品出入库以及退货、数据统计与分析、管理员管理等。
flask websocket json_Haytham个人博客开发日志 -- Flask+Vue基于token的登录状态与路由管理...
weixin_39819671的博客
11-07 150
指路牌符合一下关键词，这篇博客有可能会对你有帮助不使用工厂函数的Flask应用不使用蓝本的Flask应用Flask跨域配置基于Token的登录状态管理Flask+VueVue路由拦截Axios 钩子 适用场景这是一篇个人博客搭建的记录博客，也是一篇关于Flask和Vue的简单"工具书"，最后的代码会包含Web开发中常用的功能。(不全，只是使用频率相对高的)环境系统: 无关Flask(Python3...
flask的使用 05 基于websocket搭建网页聊天室
QQ群166477105Python技术群
03-01 3260
flask+websocket 实现聊天(单聊,群聊) 实施步骤 1先下载依赖 pip install flask gevent gevent-websocket 2新建flask项目,注意要点,ws协议非常不好测试,可以新建一个html页面 &amp;lt;script&amp;gt; var ws = new WebSocket(&quot;ws:/192.168.15.42:5000/msg&quot;) &amp;lt;/s...
Python Web实战：Flask + Vue 开发一个漂亮的词云网站
公众号：Python研究者
11-14 389
作者：snowspace@掘金大家好，我是辰哥~今天就分享一个用Flask做的词云生成网站，非常有意思的小web，适合练手。这是一个前端用 Vue，后端用 Python 的 Web 框架 ...
Flask+Vue快速打造个人网站(一)
热门推荐
宅神的博客
09-20 3万+
Flask+Vue快速打造个人网站(一) 记录一下起始日期2018/9/12/21:16 demo地址：宅神的生活 网站实现功能 作为练手项目，该项目主要练习前后端分离项目从开发到部署的流程 图片分类 图片展示 图片、视频后台上传 视频播放 前期准备 文件存储 ：七牛云 用到的库 前端 后端 flask-admin 后台 flask-restful API Flask-logi...
vue的pythonflask方式前后台交互在新医保的实战
viviliving的专栏
11-12 638
vue <template> <div> <el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-select v-model="formInline.pyaction" placeholder="请选择"> <el-option v
Flask+echarts+mysql+websocket+vue实现前后端分离数据可视化刷新
专攻毕设大企鹅的博客
10-12 3193
技术包括Flask、echarts、mysql、websocket和vue，实现前后端数据分离可视化刷新。
Python 后端 Flask 使用 Flask-SocketIO、前端 Vue3 实现长连接 Websocket 通信详细教程（更新中）
唤醒手腕的博客
03-31 1094
Flask-SocketIO 第三方库使 Flask 应用程序可以实现客户端和服务器之间的低延迟双向通信。客户端应用程序可以使用 Javascript、Python、C++、Java 和 Swift 中的任何 SocketIO 客户端库或任何其他兼容客户端来建立与服务器的永久连接。
基于flask+vue计算机视觉
05-01
基于Flask和Vue的计算机视觉系统可以实现许多不同的用途，包括图像识别、人脸识别、视频处理和自动驾驶等领域。Flask可以作为后端框架，在服务器端处理一些复杂的计算，如机器学习或深度学习等，并且向Vue提供API以便更好地交互。而Vue作为前端框架可以处理用户界面和用户交互。整个系统的流程通常是将图像或视频等输入发送到Flask服务器进行处理和分析，然后将结果显示到Vue应用程序中进行进一步的显示和交互。 在计算机视觉领域中，深度学习和神经网络已成为重要的研究方向。通过在Flask和Vue上基于深度学习的视觉应用软件，我们可以识别对象、跟踪行人、提高图像质量等。通过使用Websocket，Flask可以与Vue进行实时通信，以便于将处理结果实时地展示在Vue的前端页面上。 基于Flask和Vue的计算机视觉系统不仅可以应用于个人项目和小型公司中，而且可以应用于大型企业和组织中。 总之，基于Flask和Vue的计算机视觉系统可以通过高效的结构和架构实现快速且高效的图像和视频识别和处理，对高速数据的处理也具有良好的支持能力，可满足大量的基础和复杂的数据处理需求，是这个时代的计算机视觉的有力支撑平台之一。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

让子弹飞一会儿=>

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值