ChatGPT流式回复eventstream，基于Vue的实现

首先，需要安装VueUse组件库，可以使用以下命令：

npm install @vueuse/core 然后，在Vue组件中使用useEventSource()函数来创建一个与事件流通信的对象。

下面是一个简单的示例代码，用于监听服务器发送的事件流数据并将其显示在页面上：

import { useEventSource } from "@vueuse/core";
<template> 
<div> 
    <h1>Event Stream Data:</h1> 
    <ul> 
        <li v-for="message in messages" :key="message.id">{{ message.data }}</li>
    </ul> 
 </div> 
</template>
export default {
  setup() {
    const url = "http://example.com/events";
    const eventSource = useEventSource(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({ userId: 123, query: "hello" })
    });

    eventSource.onmessage = function(event) {
        messages.value.push({ id: Date.now(), data: event.data }); 
    };
    return { messages };
  }
}

这样就可以了，非常的简单