import { EventSourcePolyfill } from 'event-source-polyfill'
let connectEventTimeout = 60000 * 5
let ev = null as any
let connectEventTimer = null as any
let waitMsgTimer = null as any
const requestEv = () => {
const getEvFlow= (params: any, callback: any) => {
let data = ''
// 接口可作为参数传递进来
ev = new EventSourcePolyfill(params.fullUrl || (params.url), {
headers: {
token: '123' // 携带参数
},
heartbeatTimeout: connectEventTimeout // 心跳超时时长,也可传参
})
connectEventTimer= setTimeout(() => {
ev?.close()
connectEventTimer = null
clearTimeout(connectEventTimer )
}, connectEventTimeout )
ev.onopen = (e: any) => {
connectEventTimer = null
clearTimeout(connectEventTimer )
}
ev.onmessage = (e: any) => {
// e中有个status属性是用来记录当前流的状态,可捕获到流是正在输出还是输出结束等
clearTimeout(waitMsgTimer)
let txt = e.data
data += txt
data = data.replace('[ERROR]', '').replace('[ILLEGAL]', '').replace('[END]', '')
callback.doingCallback?.(data)
if (txt === '[ERROR]') { // gpt异常处理会返回[ERROR]
callback.errCallback?.(data.replace('[ERROR]', ''))
ev?.close()
return
} else if (txt === '[ILLEGAL]') { // gpt违法处理会返回[ILLEGAL]
callback.illegalCallback?.(data.replace('[ILLEGAL]', ''))
ev?.close()
return
} else if (txt === '[EV_END]') { // gpt结束处理会返回[EV_END]
callback.endCallback?.(data.replace('[EV_END]', '')) // 吐出去的回调函数
ev?.close()
return
}
// 10秒长时间没反应的时候自动停止流的状态(此处还有一个未解决的问题就是如果手动停止流的输出会跟10秒后的停止流函数重合)
waitMsgTimer = setTimeout(() => {
callback.endCallback?.(data.replace('[ERROR]', ''))
ev?.close()
}, 10000)
}
ev.onerror = (e: any) => {
ev?.close()
connectEventTimer= null
callback.evErrCallback?.(e)
clearTimeout(connectEventTimer)
}
ev.onclose = (e: any) => {
console.log(e, 'renderEvFlow onclose')
}
ev.addEventListener('close', (e: any) => {
console.log(e, 'renderEvFlow close')
})
}
const stopFlow = () => {
ev?.close()
connectEventTimer= null
clearTimeout(connectEventTimer)
}
return { getEvFlow, stopFlow }
}
export default requestEv
eventsource处理的流渲染到页面方法封装
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- express框架处理路由 基于ES5标准 express依赖了第三方包, 在npm install导包后, 会有...
- 参照:https://blog.csdn.net/m0_50441807/article/details/1249...
- 请求回来的数据为JSON,有两种方式实现:第一种:在后台接口规定吐出JSON数据:写header,将键值对数组进行...