ai回复功能请求开发

需求：实现一个类似于ai回复功能，一个字一个字往外蹦的效果
实现方案：

1.可以通过正常方式请求全部内容，通过js,定时器控制输出，速度，模拟ai回复效果
2.通过eventSource请求，直接实现ai回复效果

这里主要讲第二个方案

// 下载依赖
npm i @microsoft/fetch-event-source

// 页面引入
import { fetchEventSource } from "@microsoft/fetch-event-source";

// 使用
let that = this;
that.ctrlAbout = new AbortController();
let eventSourcepost = fetchEventSource('your-api', {
  method: 'POST',
  headers: {
    "Accept": 'text/event-stream',
     "Content-Type": 'application/json',
  },
  // signal: that.ctrlAbout.signal,
  body: JSON.stringify({
   	// your body参数
  }),
  onmessage(event) {
    // 成功之后操作
    this.message += event.data

    // 成功之后满足某些条件可以使用AbortController关闭连接
 	// this.ctrlAbout.abort()
  },
  onerror() {
	// 服务异常
  },
  onclose() {
  	// 服务关闭
  },
})

1.优势：

普通get、post请求完毕后端返回数据前后端通信就自动挂断，但是这个 eventSource请求这个东西 前端请求一次不会挂断，后端可以持续输出数据。

2.eventSource和websocket的区别：

1）协议不同：WebSocket 使用的是一种双向通信协议，而 eventSource 使用的是一种单向通信协议。WebSocket 协议可以在客户端和服务器之间建立一个长连接，双方可以同时发送和接收消息，而 eventSource 只能由服务器向客户端发送消息。

2）数据格式不同：WebSocket 可以发送任何格式的数据，例如文本、二进制数据或 JSON，而 eventSource 只能发送文本格式的数据。

3）支持程度不同：WebSocket 是一种相对较新的技术，在一些旧的浏览器或网络环境下可能不被支持，而 eventSource 已经被广泛支持，可以在大多数现代浏览器中使用。

4）应用场景不同：WebSocket 更适合那些需要实时双向通信的应用，例如在线游戏或视频会议，而 eventSource 更适合那些需要从服务器获取实时信息的应用，例如股票行情或新闻推送。