sse简单介绍https://blog.csdn.net/weixin_42400404/article/details/141895877?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22141895877%22%2C%22source%22%3A%22weixin_42400404%22%7D
fetch-event-source gitHub地址
通信流程
1.安装
pnpm install @microsoft/fetch-event-source
该软件包支持Fetch-api中的所有功能
2.vue单文件使用
import { fetchEventSource } from '@microsoft/fetch-event-source';
await fetchEventSource('/api/sse', {
onmessage(ev) {
console.log(ev.data);
// 把接口返回的json文件转换一下
}
});
3.参数
你可以传入默认fetch API公开的所有其他参数
const ctrl = new AbortController();
fetchEventSource('/api/sse', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
foo: 'bar'
}),
signal: ctrl.signal,
});
4.兼容性
这个库是用 typescript 编写的,针对所有常用浏览器(Chrome、Firefox、Safari、Edge)支持的 ES2017 功能。不过,您可能需要为旧版 Edge(版本 <79)填充 TextDecoder :
require('fast-text-encoding');
仅供参考
参考文件:
-
阮一峰:Server-Sent Events 教程
-
fetch-event-source gitHub地址
-
window:fetch()方法
-
EventSource() api