利用FetchEventSource在大模型流式输出的应用方式

import { fetchEventSource } from '@microsoft/fetch-event-source';

export default {
  data() {
    return {
      output: '',
      apiKey: '$your-dashscope-api-key', // 替换为你的 DashScope API-KEY
      url: 'https://dashscope.aliyuncs.com/api/v1/services/aigc/text-generation/generation',
      body: {
        model: 'qwen-turbo',
        input: {
          messages: [
            {
              role: 'system',
              content: 'You are a helpful assistant.'
            },
            {
              role: 'user',
              content: '你好'
            }
          ]
        },
        parameters: {
          incremental_output: true
        }
      }
    };
  },
  methods: {
    async startSSE() {
      const headers = {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${this.apiKey}`,
        'X-DashScope-SSE': 'enable'
      };

      try {
        this.eventSource = await fetchEventSource(this.url, {
          method: 'POST',
          headers: headers,
          body: JSON.stringify(this.body),
          onopen: (response) => {
            if (!response.ok) {
              throw new Error('Server returned an error');
            }
          },
          onmessage: (event) => {
            const data = JSON.parse(event.data);
            if (data.output && data.output.choices) {
              const content = data.output.choices[0].message.content;
              this.output += content; // 将内容添加到输出中
            }
          },
          onerror: (err) => {
            console.error('EventSource failed:', err);
            this.stopSSE();
          }
        });
      } catch (error) {
        console.error('Failed to start SSE:', error);
      }
    },
    stopSSE() {
      if (this.eventSource) {
        this.eventSource.close();
        this.eventSource = null;
      }
    }
  },
  unmounted() {
    this.stopSSE();
  }
};

onmessage: (event) => {
            const data = JSON.parse(event.data);
            if (data.output && data.output.choices) {
              const content = data.output.choices[0].message.content;
              this.output += content; // 将内容添加到输出中
            }
          }

onmessage: (event) => { // ... },

const data = JSON.parse(event.data);

if (data.output && data.output.choices) { // ... }

const content = data.output.choices[0].message.content;

this.output += content;