美文网首页
eventsource处理的流渲染到页面方法封装

eventsource处理的流渲染到页面方法封装

作者: 有一个程序媛 | 来源:发表于2023-07-02 10:22 被阅读0次
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

相关文章

  • Tornado框架-模板语言的三种方式

    模板语言就是可以在html页面,接收逻辑处理的self.render()方法传输的变量,将数据渲染到对应的地方 一...

  • h5移动开发,低端手机切换闪白

    闪白问题mui解决方法 mui的openWindow方法,尽管封装了显示waiting,载入新页面,处理动画,关闭...

  • 地址列表-设为默认

    数据 页面渲染 方法

  • 键盘监听封装

    考虑到项目多处使用监听来处理键盘弹出时的页面遮挡问题 就讲键盘监听的响应事件用block封装在工具类中。实现方法如...

  • iOS-EventSource技术

    iOS-EventSource 什么是EventSource EventSource 也称为 Server-Sen...

  • JavaScript的事件机制详解

    【js事件详解】js事件封装函数,js跨浏览器事件处理机制 一、事件流 事件流描述的是从页面中接受事件的顺序。IE...

  • ffmpge 基础知识梳理 七 FLV封装格式解析

    前两篇文章介绍了音频码流处理程序和视频码流处理程序,本文介绍将他们打包到一起后的数据——封装格式数据的处理程序。封...

  • 小程序生命周期

    页面载入后触发onShow方法,显示页面。首次显示页面,会触发onReady方法,渲染页面元素和样式,一个页面只会...

  • 008.Servlet3.0 多文件处理

    依然是没有进行封装处理和验证处理 JSP页面代码 Servlet代码

  • 从url到页面展示

    从url到页面展示总体来说分为以下几个过程: DNS解析 TCP连接 服务器处理响应请求 浏览器解析渲染页面 DN...

网友评论

      本文标题:eventsource处理的流渲染到页面方法封装

      本文链接:https://www.haomeiwen.com/subject/aikfudtx.html