GPT打字机效果—— fetchEventSouce进行sse流式请求

EventStream基本用法

与 WebSocket 不同的是,服务器发送事件是单向的。数据消息只能从服务端到发送到客户端(如用户的浏览器)。这使其成为不需要从客户端往服务器发送消息的情况下的最佳选择。

const evtSource = new EventSource("/api/v1/sse")

// 每次连接开启时调用

evtSource.onopen = function () {

console.log("连接开始启动");

};

// 每次接受数据时调用

evtSource.onmessage = (e) => {

console.log('输入每次接受的数据',e)

};

// 每次连接发生错误时调用

evtSource.onerror = function () {

console.log("连接发生错误");

};

需要注意的是,EventSource是以get方式发送请求,对于post请求原生的EventSource是无法实现的

如何用post的方式进行eventSource请求

常见的是通过@microsoft/fetch-event-source 这个库里的fetchEventSource来实现

import { fetchEventSource } from '@microsoft/fetch-event-source';

这个库封装了一个方法,使得我们可以便捷的通过这个方法直接进行调用

以下是具体的代码

const [controller, setController] = useState(new AbortController());

const url = 'http:xxx';

fetchEventSource(url, {

method: 'POST',

headers: {

// SYSTEM_PORTAL_TYPE: 'LINGXI_RUNNING',

'Content-Type': 'text/event-stream',

'X-CSRF-TOKEN': '1232123',

// Cookies: 'ZSMART_LOCALE=zh; ',

},

mode: 'cors',

openWhenHidden: true,

credentials: 'include',

signal: controller?.signal,

onmessage: async (event: any) => {

console.log('eventeventeventeventeventevent');

console.log(event);

},

onerror(err: any) {

console.log('err', err);

},

async onopen(response: any) {

if (response.ok) {

console.log('开始建立连接');

}

},

onclose() {

console.log('关闭');

controller?.abort();

setController(new AbortController());

throw new Error();

},

}).catch((err: any) => {

controller?.abort();

setController(new AbortController());

console.log({ err });

throw new Error(err);

});

相关推荐
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜4 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD4 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding4 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空4 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui
01传说5 小时前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js
sunbyte7 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
拾光拾趣录9 小时前
虚拟DOM
前端·vue.js·dom
合作小小程序员小小店9 小时前
web网页,在线%食谱推荐系统%分析系统demo,基于vscode,uniapp,vue,java,jdk,springboot,mysql数据库
vue.js·spring boot·vscode·spring·uni-app