sse-stream-plugin-vue
sse-stream-plugin-vue
sse-stream-plugin-sdk 的 Vue 3 Composable 封装。将插件化 SSE SDK 封装为响应式 API，支持 MaybeRef 入参与自动生命周期管理。
安装
需要同时安装核心 SDK：
npm install sse-stream-plugin-vue sse-stream-plugin-sdk
# 或
pnpm add sse-stream-plugin-vue sse-stream-plugin-sdk
vue为 peerDependency，要求>=3.2.0。
快速开始
<script setup lang="ts">
import { ref } from 'vue'
import { useSSEStream } from 'sse-stream-plugin-vue'
import { recommendedPlugins } from 'sse-stream-plugin-sdk'
const prompt = ref('你好')
const { text, loading, status, start, stop } = useSSEStream({
url: 'https://api.example.com/stream',
method: 'POST',
// getBody 每次 start 时调用，读取最新 prompt
getBody: () => JSON.stringify({ prompt: prompt.value }),
headers: { 'Content-Type': 'application/json' },
plugins: recommendedPlugins(),
onMessage: (data) => console.log(data),
onError: (err) => console.error(err),
})
</script>
<template>
<div>
<input v-model="prompt" />
<button @click="start" :disabled="loading">发送</button>
<button @click="stop">停止</button>
<p>{{ status }}</p>
<pre>{{ text }}</pre>
</div>
</template>
API
useSSEStream(options)
入参 UseSSEStreamOptions
核心配置字段支持 MaybeRef（可传 ref 或原始值），start 时 unref 读取最新值：
| 字段 | 类型 | 说明 |
|---|---|---|
url |
MaybeRef<string> |
请求地址（必填） |
method |
MaybeRef<'GET' | 'POST'> |
请求方法，默认 GET |
body |
MaybeRef<string> |
请求体字符串 |
getBody |
() => string |
每次 start 时动态生成请求体，优先级高于 body |
headers |
MaybeRef<Record<string, string>> |
自定义请求头 |
transport |
MaybeRef<string | TransportFactory> |
传输层，省略则自动探测 fetch |
parser |
MaybeRef<ParserFactory> |
自定义解析器 |
plugins |
MaybeRef<SSEPlugin[]> |
插件列表 |
onMessage |
(data, event) => void |
收到 message 事件回调 |
onOpen |
(info: { transport }) => void |
连接打开回调 |
onEnd |
() => void |
流结束回调 |
onError |
(err) => void |
错误回调 |
返回值 UseSSEStreamReturn
状态字段均为只读 Ref：
| 字段 | 类型 | 说明 |
|---|---|---|
text |
Readonly<Ref<string>> |
已拼接的消息文本（message 事件 data 累加） |
status |
Readonly<Ref<string>> |
连接状态描述 |
loading |
Readonly<Ref<boolean>> |
是否处于连接中/流式接收中 |
msgCount |
Readonly<Ref<number>> |
已接收 message 事件条数 |
charCount |
Readonly<Ref<number>> |
已接收字符总数 |
start |
() => void |
发起一次连接（先销毁旧连接） |
stop |
() => void |
手动断开并销毁实例 |
instance |
Ref<PluginSSE | null> |
当前实例（shallowRef，便于 use() 追加插件） |
生命周期
- 组件卸载时（
onBeforeUnmount）自动destroy()实例并清空订阅，无需手动清理 start()会先销毁旧连接再创建新连接，可重复调用
高级用法
响应式 url
<script setup lang="ts">
import { ref } from 'vue'
const url = ref('https://api.example.com/stream')
const { start } = useSSEStream({
url, // 传 ref，start 时自动取最新值
method: 'POST',
})
</script>
通过 instance 追加插件
<script setup lang="ts">
import { watch } from 'vue'
import { loggerPlugin } from 'sse-stream-plugin-sdk'
const { instance } = useSSEStream({ url, method: 'POST' })
watch(instance, (sse) => {
if (sse) sse.use(loggerPlugin())
})
</script>
小程序环境
通过 transport 传入小程序传输层工厂：
<script setup lang="ts">
import { createMpTransport } from 'sse-stream-plugin-sdk'
const { start } = useSSEStream({
url,
transport: createMpTransport(() => wx),
})
</script>
License
MIT
Related Packages
Version History
| Version | Released | Vue | License |
|---|---|---|---|
| 1.0.0 | >=3.2.0 | MIT |