web前端sse封装

这是一个基于@microsoft/fetch-event-source包封装的sse函数，包含开始、停止功能; 可传更多参数、使用非常简单。

使用前: 

        安装 @microsoft/fetch-event-source

代码：

// sse
import { fetchEventSource } from '@microsoft/fetch-event-source'
import { getUserJWTtoken } from '@/utils/auth' // 引入你自己的Authorization// 参数处理
const factory = (options) => ((options.method = options.method || 'POST'),(options.headers = options.headers || {'Content-Type': 'application/json',Authorization: getUserJWTtoken(),}),(options.body = options.body || {}),options
)
let controller = null
// 参数处理
export default function () {return {// 开始ssestart: async (url, options = {}, callback) => {try {if (!url) {console.log('请输入有效url')return}controller = new AbortController()const signal = controller.signalawait fetchEventSource(url, {signal: signal,...factory(options),openWhenHidden: true,onmessage(event) {callback({ status: 'running', message: event })},onerror(error) {throw error // 必须抛出错误，否则停止不了},onclose(msg) {callback({ status: 'finish', message: '读取结束' })},})} catch (error) {callback({ status: 'error', message: error })}},// 停止ssestop: () => {controller?.abort()},}
}

使用：

<template><a-button @click="startSSE">开始sse</a-button><a-button @click="stopSSE">停止sse</a-button>
</template><script setup>
import sseHook from "./sse";const sse = sseHook();const startSSE = () => {const params = {params1: "params1",params2: "params2",params3: "params3"};/*三个参数1. url 你的sse对应的后端接口2. params 你的入参 必须是json字符串3. 回调函数(运行状态, 返回信息)*/sse.start(url, { body: JSON.stringify(params) }, ({ status, message }) => {console.og(status, message);});
};const stopSSE = () => {sse.stop();
};
</script>