pip install flask flask_socketio

npm install socket.io-client

from flask import Flask# 引入跨域设置from flask_cors import CORS# 引入socketiofrom flask_socketio import SocketIOfrom flask_socketio import send, emit# 实例化appapp = Flask(__name__)# 设置跨域CORS(app)# 设置socketsocketio = SocketIO(app, cors_allowed_origins='*')@socketio.on('hello')def hello(str):    print("接收到的数据为->", str)    emit('respond', f'服务器：我收到了{str}')@socketio.on('connect', namespace='/')def connected():    print('Client connect')    emit('response', {'data': 'Connected'})@socketio.on('disconnect', namespace='/')def disconnected():    print('Client disconnected')# 运行主程序if __name__ == '__main__':    # app.run()    socketio.run(app)

// webscoket.tsimport { ref, onMounted, onUnmounted } from "vue";import { io, Socket } from "socket.io-client";export default function useSocket(url: string) {  const socket = ref<Socket>();  onMounted(() => {    socket.value = io(url,{      reconnectionAttempts: 5 	// 设置最大重连次数为2    });    socket.value.on("connect", () => {      console.log("connect success");    });    socket.value.on("disconnect", () => {      console.log("disconnected from server");    });    // 监听服务器respond返回    socket.value.on("respond", data => {      console.log(data);      // 如果数据等于10，客户端发送关闭连接请求      if (data === 10) {        socket.value?.disconnect();      }    });  });  onUnmounted(() => {    if (socket.value) {      socket.value.disconnect();    }  });  return { socket };}

<template>  <el-buttontype="primary"size="default" @click="sendHello">问候服务器</el-button></template><scriptsetuplang="ts">import useSocket from "@/componse/webscoket";const { socket } = useSocket("http://127.0.0.1:5000");const sendHello = () => {  socket.value?.emit("hello", "你好服务器");};</script>