eventSource请求

来，先上图    ，这样chatGPT一样的持续输出数据的是怎么做呢

 他不是后端全部一次性返回来的，也不是轮询请求的，跟websocket很像，但是又有区别！让我们一探究竟...

1.eventSource的介绍

1）eventSource 是一个 Web API，它允许网页通过 HTTP 长连接（通常称为 Server-Sent Events (SSE)）从 Web 服务器接收自动更新。它使网页可以接收实时更新，而无需刷新页面或向服务器发送重复请求。

2）使用 eventSource，网页可以订阅从服务器发送的事件流。这些事件可以是任何格式，例如纯文本、JSON 或 XML，并且可以包含服务器想要发送的任何数据。一旦建立连接，服务器可以随时向客户端发送事件，客户端可以根据需要处理它们，例如更新 UI 或触发其他操作。

3）eventSource API 使用简单，并且受到大多数现代 Web 浏览器的支持。它通常用于需要实时更新的 Web 应用程序，例如聊天室、社交媒体提要或股票市场行情。

看我上面巴巴一大堆没看明白吧！

听阳哥一句话总结：简单明了一句话，普通get、post请求完毕后端返回数据前后端通信就自动挂断，但是这个  eventSource请求这个东西  前端请求一次不会挂断，后端可以持续输出数据。

2.eventSource和websocket的区别：

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

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

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

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

听阳哥一句话总结： websocket  请求一次 前后端可以互相通话传送数据，eventSource请求一次，只能后端给前端传数据

话不多说，上代码...

EventSource对象只能发送GET请求，不能发送POST请求。- 服务器端发送的数据必须是纯文本格式，不能是二进制数据

//1.创建EventSource对象  url请求地址
var source = new EventSource(url);
/*2.监听事件EventSource对象有三个事件：

onopen：连接建立时触发。
onmessage：接收到服务器端发送的数据时触发。
onerror：连接出错时触发。可以通过以下方式监听事件*/

source.onopen = function(event) {  // 连接建立时触发};
source.onmessage = function(event) {  // 接收到服务器端发送的数据时触发,在这里作你想做的事情};
source.onerror = function(event) {  // 连接出错时触发};

你个臭写代码的。。。。。还想要post请求的.......你咋不上天呢！👇向下看

如何用post的方式请求eventSource

npm i --save @rangermauve/fetch-event-source
 
import { fetchEventSource } from '@microsoft/fetch-event-source';
 
       let eventSource = fetchEventSource(Url, {
        method: 'POST',
        headers: {
          "Content-Type": 'application/json',
        },
        body: JSON.stringify(data),
        onmessage(event) {
          console.info(event.data);
        },
        onerror() {
          
        }
      })