来,先上图 ,这wps云文档中 AI的持续流式输出数据的是怎么做呢
他不是后端全部一次性返回来的,也不是轮询请求的,跟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下载此库即可!
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() {
}
})
我们现在的主要业务线是政企办公Ai化,智能办公,技术超强,新技术,新方案,急需新鲜血液的加入
想更深的探索AI写作快来加入金山大家庭我们一同探索把,
静待25届的校招,关注阳哥不迷路,消息快得如光速