Flask和Vue框架实现WebSocket消息通信

1 安装环境

1.1 安装Flask环境

主要的安装包 Flask、Flask-SocketIO，注意Python版本要求3.6+

# Flask-SocketIO参考地址
https://flask-socketio.readthedocs.io/en/latest/
https://github.com/miguelgrinberg/flask-socketio

更新基础环境

# 更新pip
python -m pip install --upgrade pip

# 更新setuptools
pip install --upgrade setuptools

# 安装Flask
pip install flask
pip install flask_cors

# 安装关于SocketIO的包
# 安装python-socketio时，会自动安装python-engineio依赖
pip install python-socketio
pip install flask-socketio

# eventlet具有WSGI支持的异步框架，主要功能是通过协程实现并发
pip install eventlet

我的“requirements.txt”的包

bidict==0.22.1
blinker==1.7.0
click==8.1.7
colorama==0.4.6
dnspython==2.4.2
eventlet==0.33.3
Flask==3.0.0
Flask-Cors==4.0.0
Flask-SocketIO==5.3.6
greenlet==3.0.1
h11==0.14.0
importlib-metadata==7.0.0
itsdangerous==2.1.2
Jinja2==3.1.2
MarkupSafe==2.1.3
python-engineio==4.8.0
python-socketio==5.10.0
simple-websocket==1.0.0
six==1.16.0
Werkzeug==3.0.1
wsproto==1.2.0
zipp==3.17.0

安装命令

pip install -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple

1.2 安装Vue环境

（1）使用vite创建项目

# 创建项目
npm create vite@latest

# 选择框架和语言，我选择的是Vue和TypeScript
√ Project name: ... websocket
√ Select a framework: » Vue
√ Select a variant: » TypeScript

Done. Now run:

  cd websocket
  npm install
  npm run dev

# 进入目录
cd websocket

# 安装相关包
npm install
# 安装包结束后提示如下：
added 44 packages, and audited 45 packages in 14s

（2）安装依赖包

# 安装一个包即可
npm install socket.io-client -S

socket.io-client的参考地址

https://socket.io/docs/v4/client-api/

查看npm包版本和例子的网络地址

https://www.npmjs.com/

备注：npm中命令参数的意思

--global（-g）：表示全局全局安装，包安装在了node目录下的node_modules/npm中（可以在任意项目中使用该工具）；不使用-g安装，包安装在了工程目录下的node_modules中下。
--save（-S）：表示写入package.json文件中的dependencies，这里面的包是发布到生产环境中的，例如：vue、axios等。
--save-dev（-D）：表示写入package.json文件中的devDependencies，这里面的包是仅在开发环境中辅助开发，在生产环境中不需要，例如：vite、css-loader等。
不使用参数时：npm使用的是--save（-S）命令

package.json文件

{
  "name": "websocket",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "socket.io-client": "^4.7.2",
    "vue": "^3.3.8"
  },
  "devDependencies": {
    "@types/node": "^20.10.2",
    "@vitejs/plugin-vue": "^4.5.0",
    "typescript": "^5.2.2",
    "vite": "^5.0.0",
    "vue-tsc": "^1.8.22"
  }
}

（3）使用Vscode常见报错

报错1

Cannot find module './App.vue' or its corresponding type declarations.ts(2307)

解决方法

修改项目根目录中 “env.d.ts” 文件，添加如下内容：

/// <reference types="vite/client" />
declare module "*.vue" {
    import { DefineComponent } from "vue"
    const component: DefineComponent<{}, {}, any>
    export default component
}

报错2

Module xx.vue has no default export.Vetur(1192)

解决方法

卸载vetur插件，主要针对vue2项目；
安装Volar插件，全称Vue Language Features (Volar)，主要针对vue3和TypeScript项目；

报错3

使用“@”无法导入ts文件，错误符号指向“@”，Cannot find module 'XXXXs' or its corresponding type declarations

解决方法

  • 安装@types/node，会在项目中生成一个vite-env.d.ts文件
npm i @types/node -D
  • 在vite.config.js文件中配置参数
import  defineConfig ] from 'vite';
import vue from '@vitejs/plugin-vue'
 
import path from "path";
 
export default defineConfig({
    plugins: [vue()],
    resolve: {
        // !!!!配置路径别名!!!
        alias: {
            '@': path.resolve(__dirname,'./src'),
        }
    },
});
  • 在 tsconfig.json中配置代码
"compilerOptions":{
	"baseUrl": "./",
	"paths":{
		"@": ["src"],
		"@/*": ["src/*"],
	}
}

（4）启动服务

在vscode中打开，在doc上启动服务

npm run dev

1.3 版本要求

flask-socketio的版本兼容

JavaScript Socket.IO versionSocket.IO protocol revisionEngine.IO protocol revisionFlask-SocketIO versionpython-socketio versionpython-engineio version
0.9.x1, 21, 2Not supportedNot supportedNot supported
1.x and 2.x3, 434.x4.x3.x
3.x and 4.x545.x5.x4.x

1.4 Flask-SocketIO消息隔离

我认为有三种隔离级别

隔离级别对应策略说明
全局/全局命名空间，连接到此命名空间下的客户端会收到消息，系统默认空间
空间namespace特定命名空间，连接到此命名空间的客户端会收到消息，不同命名空间相互隔离
组room在某命名空间下的用户组，不同用户组仅仅接收自己所在组的消息，不同组消息隔离

2 Flask项目

2.1 项目布局

在这里插入图片描述

2.2 源代码

main.py

from blueprint_user import init_blueprint
from config_app import socketio, app


# 初始化蓝本
from socket_comm import init_socket

init_blueprint()

init_socket()


if __name__ == '__main__':
    socketio.run(app, host='0.0.0.0', port=5000, debug=True)

config_app.py

from flask import Flask
from flask_cors import CORS

from flask_socketio import SocketIO


def create_app():
    flask_app = Flask(__name__)
    # 设置密钥
    flask_app.config['token'] = '123456'
    CORS(flask_app, supports_credentials=True)
    return flask_app


def create_socketio():
    flask_socketio = SocketIO()
    # 解决跨域问题
    flask_socketio.init_app(app, cors_allowed_origins='*')

    return flask_socketio


app = create_app()

socketio = create_socketio()

name_space_user = "/user"

blueprint_user.py

from flask import Blueprint

from config_app import app, name_space_user, socketio

user = Blueprint("user", __name__)


# 注册蓝本
def init_blueprint():
    app.register_blueprint(user, url_prefix='/user')


@user.route('/')
def index():
    return "Success"


# 使用方法传递参数
@user.route('/broad')
def broad_event():
    event_name = "data_res"
    broad_casted_data = {'data': "test message!"}
    # 发送消息
    socketio.emit(event_name, broad_casted_data, namespace=name_space_user)
    return "success"

socket_comm.py

from flask_socketio import emit, send, join_room, leave_room

from config_app import socketio, name_space_user


def init_socket():
    pass


# 可以用“@socketio.event”替代“@socketio.on('connect')”
# “@socketio.event”可以用来装饰socketio默认的事件，例如：connect等
@socketio.on('connect', namespace=name_space_user)
def connected_msg(auth:dict):
    print(auth)
    print('client connected.')
    if(auth.get("token") == "123"):
        return True
    else:
        return False


@socketio.on('disconnect', namespace=name_space_user)
def disconnect_msg():
    print('client disconnected.')


@socketio.on('data_event', namespace=name_space_user)
def test_event(message):
    print(message)
    # emit(): 发送到指定活动上，对应前端的data_res
    """
        # 对应前端的代码
        socket.on('data_res', (data:string) => {
            console.log('监听消息：');
            console.log(data);
        });
    
    """
    emit('data_res', message, broadcast=True)


@socketio.on('data_msg', namespace=name_space_user)
def test_msg(message):
    print(message)
    # send(): 发送到message,对应前端的message
    """
        # 对饮前端的代码
        socket.on("message", function(data: string){
            console.log("Message" + data)
        })
    """
    send(message, namespace=name_space_user, broadcast=True)


@socketio.on('join', namespace=name_space_user)
def on_join(data):
    username = data['username']
    room = data['room']
    join_room(room)
    print(data)
    send(username + ' has entered the room.', to=room)


@socketio.on('leave', namespace=name_space_user)
def on_leave(data):
    username = data['username']
    room = data['room']
    leave_room(room)
    print(data)
    send(username + ' has left the room.', to=room)


@socketio.on('send_room', namespace=name_space_user)
def send_room(data):
    username = data['username']
    room = data['room']
    print(data)
    send(data, to=room)

3 Vue项目

构建项目使用的是“组合式 API (Composition API)”编写，不是“选项式 API (Options API)”

3.1 项目布局

在这里插入图片描述

3.2 源代码

main.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

createApp(App).mount('#app')

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'


import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  // 配置插件列表
  plugins: [vue()],
  resolve: {
    // !!!!配置路径别名!!!
    alias: {
        '@': path.resolve(__dirname,'./src'),
    },
  },

  // 打包配置
  build: {
    target: 'modules',
    // 设置输出路径
    outDir: 'dist'
  },

  // 本地运行配置，及反向代理配置
  server: {
    // 默认启用并允许任何源
    cors: true,
    // 使用默认浏览器中打开应用程序
    open: true,
    // 设置本地端口
    port: 4000,
    // 在本地开发环境中，设置反向代理配置，注意配置rewrite
    proxy: {
      // '/api': {
      //   // 设置代理接口访问实际地址
      //   target: 'http://localhost/5000',
      //   changeOrigin: true,
      //   // 允许websocket代理
      //   ws: true,
      //   // 将api替换为空
      //   rewrite: (path) => path.replace(/^\/api/, '')
      // },
      // '/socket.io': {
      //   target: `ws://127.0.0.1:5000`,
      //   ws: true,
      //   changeOrigin: true
      //  },
    }
  }
})

App.vue

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div class="app">
    <HelloWorld msg="app" />
  </div>
  
</template>

<style scoped>
.app{
  width: 100%;
  height: 100%;
}
</style>

在”config/ws“目录下：

index.ts


/*

import { io } from 'socket.io-client';

// 第一种连接方法
// 参考地址：https://socket.io/docs/v4/client-api/#io
export function create_socket(token: string) {
    const socket = io('http://127.0.0.1:5000', {
        // 指定传输方式，如WebSocket    
        transports: ['websocket'],
        // 是否自动连接
        autoConnect: true,
        // 是否自动重新连接
        reconnection: true,
        // 重新连接尝试次数
        reconnectionAttempts: 3,
        // 重新连接延迟时间（毫秒）
        reconnectionDelay: 1000,
        // 自定义查询参数
        // query: {
        //     token: token
        // },
        // 其他可选参数...
    });

    return socket;
}

*/


// 第二种连接方法
// 参考地址：https://socket.io/docs/v4/client-api/#manager
import { Manager } from "socket.io-client";

export function create_socket(token: string) {
    const manager = new Manager("ws://127.0.0.1:5000", {
        // 指定传输方式，如WebSocket    
        transports: ['websocket'],
        // 是否自动连接
        autoConnect: true,
        // 是否自动重新连接
        reconnection: true,
        // 重新连接尝试次数
        reconnectionAttempts: 3,
        // 重新连接延迟时间（毫秒）
        reconnectionDelay: 1000,
        // 自定义查询参数
        // query: {
        //     token: token
        // },
        // 其他可选参数...
    });

    const socket = manager.socket("/user", {
        auth: {
            token: token
        }
    });

    return socket
}

在”components“目录下：

HelloWorld.vue

<script setup lang="ts">
import { ref, onMounted } from 'vue'

import { create_socket } from '@/config/ws/index.ts';
const socket = create_socket("123");


defineProps<{ msg: string }>()


function re_open_conn(){
  // // 第一种方法连接
  let connect_res = socket.open();
  console.log(connect_res)
  
  // console.log(connect_res.connected)
  
  // 第二种方法连接
  // 默认通道 connect是通道名称
  // socket.on('connect', () => {
  //   console.log('连接成功');
  // });
}

function close_conn(){
  // 关闭连接，disconnect_res是一个Socket对象
  // socket.disconnect()和socket.close()作用相同
  // 对应后端的代码
  // @socketio.on('disconnect', namespace=name_space_user)
  let disconnect_res = socket.disconnect()
  console.log(disconnect_res)

  // 下面这种方法后端没反应
  // socket.on("disconnect", () => {
  //   console.log("关闭连接")
  // });
}

// 响应式状态
let msg = ref("测试")

function send_msg(){
  console.log("data_event" + msg.value)
  socket.emit("data_event", "Event " + msg.value)
  console.log(" data_msg "+ msg.value);
  socket.emit("data_msg", "Message " + msg.value)
}

// 更改状态、触发更新的函数
function listen_event() {

  socket.on('data_res', (data:string) => {
    console.log('监听事件(event)-对应后端emit()方法');
    console.log(data);
  });

  socket.on("message", function(data:string){
    console.log("监听消息(message)-对应后端send()方法:")
    console.log(data)
  });

}

onMounted(()=>{
  listen_event()
});

function join_room(){
  socket.emit("join", {"username":"zhangsan", "room":"room1"})
}

function leave_room(){
  socket.emit("leave", {"username":"zhangsan", "room":"room1"})
}

function send_room(){
  socket.emit("send_room", {"username":"zhangsan", "room":"room1"})
}


</script>

<template>
  <div class="hello">
    <button v-on:click="re_open_conn">打开连接</button>
    <button v-on:click="close_conn">关闭连接</button>
    <button v-on:click="send_msg">发送消息</button>
    <input v-model="msg"/>

    <br/>
    <button v-on:click="join_room">进入房间</button>
    <button v-on:click="leave_room">离开房间</button>
    <button v-on:click="send_room">房间发送消息</button>
  </div>
</template>

<style scoped>
.hello {
  color: #888;
}
</style>

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue + TS</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

4 运行结果

前端

在这里插入图片描述

后端
在这里插入图片描述

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

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

相关文章

JVM垃圾回收

JVM垃圾回收

文章目录 垃圾回收四种引用引用计数算法可达性分析算法 垃圾回收算法标记清除标记整理复制 分代回收GCGC相关参数GC分析大对象 垃圾回收器串行吞吐量优先响应时间优先 垃圾回收 四种引用 强引用 new创建一个对象&#xff0c;通过等号运算符赋值给一个变量&#xff0c;那么这个…
阅读更多...
Vue3中的defineModel

Vue3中的defineModel

目录 一、vue3的defineModel介绍 二、defineModel使用 &#xff08;1&#xff09;在vite.config.js中开启 &#xff08;2&#xff09;子组件 &#xff08;3&#xff09;父组件 一、vue3的defineModel介绍 为什么要使用到defineModel呢&#xff1f;这里有这样一种场景&…
阅读更多...
Java设计模式分类

Java设计模式分类

java的设计模式大体上分为三大类&#xff1a; 创建型模式&#xff08;5种&#xff09;&#xff1a;工厂方法模式&#xff0c;抽象工厂模式&#xff0c;单例模式&#xff0c;建造者模式&#xff0c;原型模式。 结构型模式&#xff08;7种&#xff09;&#xff1a;适配器模式&am…
阅读更多...
vue3中关于echars的使用

vue3中关于echars的使用

今天介绍一个好用的插件echars&#xff0c;一个可视化插件Apache ECharts 一、使用步骤 1、安装 npm install echarts --save 2、导入 import * as echarts from echarts 3、正式使用 echars的使用非常的简单&#xff0c;直接点击官网有现成的代码的可用 代码示例 <t…
阅读更多...
【Spring教程24】Spring框架实战：从零开始学习SpringMVC 之 SpringMVC入门案例代码示例

【Spring教程24】Spring框架实战：从零开始学习SpringMVC 之 SpringMVC入门案例代码示例

目录 1:创建Maven项目&#xff0c;并导入对应的jar包2:创建控制器类3:创建配置类4:创建Tomcat的Servlet容器配置类5:配置Tomcat环境6:启动运行项目7:浏览器访问8:知识点总结 欢迎大家回到《Java教程之Spring30天快速入门》&#xff0c;本教程所有示例均基于Maven实现&#xff0…
阅读更多...
FFmpeg抽取视频h264数据重定向

FFmpeg抽取视频h264数据重定向

根据视频重定向技术解析中的 截获解码视频流的思路&#xff0c;首先需要解决如何输出视频码流的问题。 目前只针对h264码流进行获取&#xff0c;步骤如下&#xff1a; 打开mp4文件并创建一个空文件用于存储H264数据 提取一路视频流资源 循环读取流中所有的包(AVPacket),为…
阅读更多...
2023团体程序设计天梯赛——模拟赛和总决赛题

2023团体程序设计天梯赛——模拟赛和总决赛题

M-L1-1 嫑废话上代码 Linux 之父 Linus Torvalds 的名言是&#xff1a;“Talk is cheap. Show me the code.”&#xff08;嫑废话&#xff0c;上代码&#xff09;。本题就请你直接在屏幕上输出这句话。 输入格式&#xff1a; 本题没有输入。 输出格式&#xff1a; 在一行中输出…
阅读更多...
Docker Compose(容器编排)——9

Docker Compose(容器编排)——9

目录 什么是 Docker Compose生活案例为什么要 Docker ComposeDocker Compose 的安装Docker Compose 的功能Docker Compose 使用场景Docker Compose 文件&#xff08;docker-compose.yml&#xff09; 文件语法版本文件基本结构及常见指令Docker Compose 命令清单 命令清单如下命…
阅读更多...
【网络奇缘系列】计算机网络|数据通信方式|数据传输方式

【网络奇缘系列】计算机网络|数据通信方式|数据传输方式

&#x1f308;个人主页: Aileen_0v0&#x1f525;系列专栏: 一见倾心,再见倾城 --- 计算机网络~&#x1f4ab;个人格言:"没有罗马,那就自己创造罗马~" 这篇文章是关于计算机网络中数据通信的基础知识点&#xff0c; 从模型&#xff0c;术语再到数据通信方式&#…
阅读更多...
C++面试宝典第4题：合并链表

C++面试宝典第4题：合并链表

题目 有一个链表&#xff0c;其节点声明如下&#xff1a; struct TNode {int nData;struct TNode *pNext;TNode(int x) : nData(x), pNext(NULL) {} }; 现给定两个按升序排列的单链表pA和pB&#xff0c;请编写一个函数&#xff0c;实现这两个单链表的合并。合并后&#xff0c;…
阅读更多...
SqlServer中，数字-null的问题

SqlServer中，数字-null的问题

一、业务描述 叫货单&#xff0c;已知叫货金额&#xff0c;填写本次付款金额&#xff0c;计算待付款金额 二、问题 在计算待付款金额时&#xff0c;偶尔会出现待付款金额为空的情况&#xff0c;百思不得其解 三、解决 仔细检查&#xff0c;发现了猫腻。 简单的说&#xff…
阅读更多...
前端开发tips

前端开发tips

前端开发tips 关于package.json里面&#xff0c;尖角号&#xff08;^&#xff09;和波浪线&#xff08;~&#xff09;的区别 在package.json里面&#xff0c;我们可以使用尖角号&#xff08;^&#xff09;和波浪线&#xff08;~&#xff09;来表示不同的包版本。这些符号通常被…
阅读更多...
gin投票系统3

gin投票系统3

对应视频v1版本 1.优化登陆接口 将同步改为异步 原login前端代码&#xff1a; <!doctype html> <html lang"en"> <head><meta charset"utf-8"><title>香香编程-投票项目</title> </head> <body> <m…
阅读更多...
[GPT]Andrej Karpathy微软Build大会GPT演讲(上)--GPT如何训练

[GPT]Andrej Karpathy微软Build大会GPT演讲(上)--GPT如何训练

前言 OpenAI的创始人之一，大神Andrej Karpthy刚在微软Build 2023开发者大会上做了专题演讲：State of GPT（GPT的现状）。 他详细介绍了如何从GPT基础模型一直训练出ChatGPT这样的助手模型（assistant model）。作者不曾在其他公开视频里看过类似的内容，这或许是OpenAI官方…
阅读更多...
在javaweb项目中resource目录和webapp目录的区别

在javaweb项目中resource目录和webapp目录的区别

resource存放的是一些配置文件&#xff0c;这些文件一般都是与java代码相关的配置文件&#xff0c;比如这里的jdbc配置文件,在java中可以使用这个目录下的文件&#xff0c;不用写全路径 webapp存放的是web的资源文件&#xff0c;如jsp,html,css&#xff0c;js文件,在网页请求会…
阅读更多...
〖大前端 - 基础入门三大核心之JS篇㊿〗- 面向对象之对象的方法、遍历、深浅克隆

〖大前端 - 基础入门三大核心之JS篇㊿〗- 面向对象之对象的方法、遍历、深浅克隆

说明&#xff1a;该文属于 大前端全栈架构白宝书专栏&#xff0c;目前阶段免费&#xff0c;如需要项目实战或者是体系化资源&#xff0c;文末名片加V&#xff01;作者&#xff1a;哈哥撩编程&#xff0c;十余年工作经验, 从事过全栈研发、产品经理等工作&#xff0c;目前在公司…
阅读更多...
基于Java Swing泡泡龙游戏（Java毕业设计）

基于Java Swing泡泡龙游戏（Java毕业设计）

大家好&#xff0c;我是DeBug&#xff0c;很高兴你能来阅读&#xff01;作为一名热爱编程的程序员&#xff0c;我希望通过这些教学笔记与大家分享我的编程经验和知识。在这里&#xff0c;我将会结合实际项目经验&#xff0c;分享编程技巧、最佳实践以及解决问题的方法。无论你是…
阅读更多...
javaSwing酒店管理

javaSwing酒店管理

一、介绍 在这篇博客中&#xff0c;我们将介绍一个基于MySQL数据库、Java编程语言和Swing图形用户界面的简单酒店管理系统。该系统包括了查询房客信息、查询房客状态、修改房客信息、添加房间信息、添加住户、退房管理、预定管理、退订管理、入账管理、出账管理、修改资料等多…
阅读更多...
微信小程序制作-背单词的小程序制作

微信小程序制作-背单词的小程序制作

微信小程序–背单词的 好久没有发过文章了&#xff0c;但是不代表着我不去学习了喽&#xff0c;以下是我最近做的东西&#xff0c;前端的UI由朋友设计的&#xff0c;目前这个是前端使用的是微信小程序后端是Python的一个轻量型框架&#xff0c;FastApi&#xff0c;嗯&#xff…
阅读更多...
fv悬浮球自定义任务正在编辑的文件操作失误丢失找回方法_fv悬浮球自定义任务推荐

fv悬浮球自定义任务正在编辑的文件操作失误丢失找回方法_fv悬浮球自定义任务推荐

场景&#xff1a;自定义任务时不小心点击了取消按钮或者删除按钮导致重要丢失 原因&#xff1a;因为fv悬浮球自定义任务没有撤回按钮 解决方案&#xff1a;使用系统的应用设置把悬浮球强制停止运行&#xff0c;默认&#xff08;开启全部权限&#xff09;然后它会自动重启&…
阅读更多...
最新文章

Copyright @ 2022~2023