前端:发送接收数据 后端:发送接收数据

 

普通数据

前端

发送：axios

接收：then里面些接收值

后端

发送：json

接收：request.json

流式数据

前端接收

 先将字节码数据转成json 就是正常的

根据传过来的对象，看是否发送完毕

后端发送

stream

 

 example

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img alt="Vite logo" class="logo" src="/vite.svg"/>
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img alt="Vue logo" class="logo vue" src="./assets/vue.svg"/>
    </a>
  </div>
  <div class="container">
    <div class="module">
      <h1>接收普通数据</h1>
      <input v-model="data">
      <button @click="send">发送数据</button>
      <div v-if="response">
        <h2>从后端接收到的数据:</h2>
        <p>{{ response }}</p>
      </div>
    </div>
    <div class="module">
      <h1>接收流式数据</h1>
      <!--      <input v-model="streamdata">-->
      <button @click="StreamSend">接收</button>
      <div>
          <a v-for="(response, index) in streamResponse" :key="index">
            {{ response }} <!-- 假设response是直接可显示的字符串或已经是处理过的格式 -->
          </a>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import axios from 'axios'
// 使用ref来响应式地存储流数据
const streamResponse = ref([]) // 将单个响应改为数组，以存储流中的每个数据点

const response = ref(null)
const data = ref('')

function send() {
  axios.post('http://127.0.0.1:8090/chat', {
    id: 1,
    name: data.value
  }).then(
      res => {
        console.log(res.data)
        response.value = res.data['message']
      }
  ).catch(
      error => {
        console.error('请求错误', error)
      }
  )

}

function StreamSend() {
  const url = 'http://127.0.0.1:8090/streamchat'
  const params = {message:"已发送"}

  // 使用fetch API发起POST请求
  fetch(url, {
    method: 'POST', // 请求方法
    headers: {
      'Content-Type': 'application/json', // 请求头，指定内容类型为JSON
    },
    body: JSON.stringify(params), // 将请求参数对象转换为JSON字符串
  }).then(response => {
        const reader = response.body.getReader() // 获取响应体的读取器
        const decoder = new TextDecoder('utf-8') //将字节流中的UTF-8编码字节转换成JavaScript字符串的方法//网络传输的数据通常是以字节流形式存在的，这些字节代表了文本的UTF-8编码形式。为了在JavaScript中处理这些文本数据（比如显示消息、解析JSON等），需要将其从字节转换为字符串
        let sy = "" //异常处理的，
        // 逐块处理响应流，将字节码数据解码出来。 result是reader.read
        function ReadableStream(result) {
          let line = decoder.decode(result.value, {stream: !result.done})  //result.value 是字节码 解码当前块，并根据结果是否完整来决定是否停止流式传输/line=data: 2
          // 将新解码的数据与之前可能残留的数据拼接
          line = sy + line
          console.log('line',line)
          sy = "" // 清空拼接缓存
          // 特殊处理：如果数据包含"ping"，则过滤掉这部分 。。为什么会包含ping
          if (line.includes("ping")) {
            const errs = line.split('\n')
            let raw = []
            errs.forEach(e => {
              if (!e.includes("ping") && e.startsWith("data")) {
                raw.push(e)
              }
            })
            // 重新组合过滤后的数据
            line = raw.join("\n")
          }
          // 以'data:'作为分隔符分割数据，每个部分代表一个独立的消息 ['', ' 9\n\n']
          const lines = line.split('data:')
          console.log('aaaa',lines)
          lines.forEach(e => {  //拿到解码后的值
            console.log('e',e)
            if (!e) return // 如果分割后的某部分为空，则跳过
            let value;
            try {
              value = JSON.parse(e)// 尝试解析为JSON对象
              streamResponse.value.push(value)
              console.log('解码后',value)
            } catch (err) {
              // 如果JSON.parse(e)抛出错误，这通常意味着e不是一个有效的JSON字符串。这种情况下，假设错误是因为数据被不幸地分割到了两个块中，所以把当前字符串e赋值给sy
              sy = e
              return
            }

            console.log('sss',value)// 此处可以添加处理逻辑，例如合并相同uuid的消息等
          })
          // 如果读取操作没有完成（result.done为false），ReadableStream函数将再次调用reader.read().then(ReadableStream)，继续读取下一个数据块。
          if (!result.done) {
            return reader.read().then(ReadableStream)
          }
        }


        return reader.read().then(ReadableStream)
      }
  )
}

</script>

<style>
.container {
  display: flex; /* 使用 Flexbox 布局 */
}

.module {
  flex: 1; /* 设置模块的弹性，使其平均占据可用空间 */
  margin-right: 130px; /* 可选：增加模块之间的间距 */
  margin-left: 130px; /* 可选：增加模块之间的间距 */
}

</style>

　　

 

from flask import Flask, request, jsonify, Response
from flask_cors import CORS
import requests
import json
import pandas as pd
import re
import time
app = Flask(__name__)
CORS(app)


@app.route('/chat', methods=['POST'])
def submit_data():
    # 从前端请求中获取数据
    data_from_frontend = request.json
    print(data_from_frontend['name'])

    # 假设进行了一些处理后，要返回给前端的数据
    processed_data = {'status': 'success', 'message': '前端发送的 {} 我已成功接收'.format(data_from_frontend['name'])}

    # 将处理后的数据返回给前端
    return jsonify(processed_data)

def generate_stream():
    # 这里是你的数据生成逻辑
    # 作为示例，我们每秒发送一个数字
    for number in range(10):  # 假设我们发送10次数据
        yield f"data: {number}\n\n"  # 注意格式：data: <数据>\n\n
        time.sleep(1)  # 模拟数据生成延迟

@app.route('/streamchat', methods=['POST'])
def stream_chat():
    print(request.json)
    data_stream = request.json['message']
    if data_stream =='已发送':
        # 创建一个生成器作为响应体，content_type 设置为 text/event-stream
        return Response(generate_stream(), content_type='text/event-stream')


if __name__ == '__main__':
    app.run(port=8090)