后端flask，前端vue，实现post请求chatgpt流式响应

后端代码

from flask import Flask, Response, request
from flask_cors import CORS
import requests
import openai
app = Flask(__name__)
# 跨域配置
CORS(app, supports_credentials=True)

@app.route('/stream', methods=['POST'])
def stream():
    # data = request.get_json()
    # name = data.get('name', 'World')
    # def generate():
    #     for i in range(2000):
    #         yield f'Hello {name}!\n'
    # return Response(generate(), mimetype='text/plain')

    data = request.get_json()
    content = data.get('name', 'World')
    if data:
        def stream(content):
            # 设置代理服务器的地址和端口
            proxy = {
                'http': '127.0.0.1:7890',
                'https': '127.0.0.1:7890',
            }
            # 创建一个 session 对象，将代理和身份验证信息添加到其中
            session = requests.Session()
            session.proxies = proxy
            openai.api_key = "你的密钥"
            completion = openai.ChatCompletion.create(
                model="gpt-3.5-turbo",
                # messages=data["message"],
                messages=[
                  {"role": "system", "content": "You are a helpful assistant."},
                  {"role": "user", "content": content}
                ],
                stream=True
            )
            for chunk in completion:
                content = chunk.choices[0].delta.get("content", "")
                # if chunk.choices[0].finish_reason == "stop":
                #     content = "[DONE]"
                # yield f"data: {content}\n\n"
                yield content

        return Response(stream(content), mimetype='text/plain')
    return "没有内容"

if __name__ == '__main__':
    app.run(debug=True)

前端代码

vue2写法

<template>
  <div>
    <input v-model="name" placeholder="Enter your name">
    <button @click="sendPost">Send POST request</button>
    <button @click="stopGenerating">Stop Generating</button>
    <button @click="restartGenerating">Restart Generating</button>
    <pre>{
   
   { response }}</pre>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      response: '',
      controller: new AbortController(),
      isStopped: false
    }
  },
  methods: {
    async sendPost() {
  this.controller = new AbortController()
  this.response = ''
  this.isStopped = false
  const response = await fetch('http://127.0.0.1:5000/stream', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name: this.name }),
    signal: this.controller.signal
  })
  const reader = response.body.getReader()
  while (true) {
    if (this.isStopped) break
    const { done, value } = await reader.read()
    if (done) break
    this.response += new TextDecoder().decode(value)
  }
},

    stopGenerating() {
      this.controller.abort()
      this.isStopped = true
    },
    restartGenerating() {
      this.controller = new AbortController()
      this.sendPost()
    }
  }
}
</script>

vue3 setup写法

<template>
  <div>
    <input v-model="name" placeholder="Enter your name">
    <button @click="sendPost">Send POST request</button>
    <button @click="stopGenerating">Stop Generating</button>
    <button @click="restartGenerating">Restart Generating</button>
    <pre>{
   
   { response }}</pre>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const name = ref('')
    const response = ref('')
    const controller = ref(new AbortController())
    const isStopped = ref(false)

    async function sendPost() {
      controller.value = new AbortController()
      response.value = ''
      isStopped.value = false
      const res = await fetch('http://127.0.0.1:5000/stream', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: name.value }),
        signal: controller.value.signal
      })
      const reader = res.body.getReader()
      while (true) {
        if (isStopped.value) break
        const { done, value } = await reader.read()
        if (done) break
        response.value += new TextDecoder().decode(value)
      }
    }

    function stopGenerating() {
      controller.value.abort()
      isStopped.value = true
    }

    function restartGenerating() {
      controller.value = new AbortController()
      sendPost()
    }

    return {
      name,
      response,
      sendPost,
      stopGenerating,
      restartGenerating
    }
  }
}
</script>