vue使用fetchEventSource实现chatgpt打字机效果

<template>
  <div>
    <div v-for="(message, index) in messages" :key="index">
      {{ message }}
    </div>
    <form @submit.prevent="submitMessage">
      <input v-model="userMessage" type="text" />
      <button type="submit">Send</button>
    </form>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      messages: [],
      userMessage: '',
      eventSource: null,
    };
  },
  methods: {
    submitMessage() {
      this.eventSource.postMessage({ text: this.userMessage });
      this.userMessage = '';
    },
    async startConversation() {
      try {
        this.eventSource = new EventSource('/your-endpoint');
        this.eventSource.onmessage = (event) => {
          const message = JSON.parse(event.data).text;
          this.messages.push(message);
        };
      } catch (error) {
        console.error('Error starting conversation:', error);
      }
    }
  },
  created() {
    this.startConversation();
  }
};
</script>

这个代码实例展示了如何在Vue应用中使用EventSource来实现与服务器的长轮询通信，从而实现类似与OpenAI ChatGPT的打字机效果。在这个例子中，我们假设服务器端有一个/your-endpoint的端点支持EventSource协议。当组件被创建时，它会开始与服务器的长轮询，并且用户可以通过输入框发送消息，这些消息会被发送到服务器，并且服务器的响应会被推送到组件的消息列表中，从而实现类似打字机的效果。