🎉 发布啦！轻量级流式数据读取工具 —— fetch-stream-reader在构建与服务端进行流式通信（如 SSE

在构建与服务端进行流式通信（如 SSE、OpenAI API、实时日志等）的现代 Web 应用中，我们往往需要一个灵活、可控、事件驱动的方式来处理数据流。

于是我发布了这个工具包：

📦 fetch-stream-reader
一个基于原生 Fetch API 和 ReadableStream 封装的轻量级流式数据读取器，支持事件机制、错误处理、自动 buffer 拼接等功能。

🚀 为什么要造这个轮子？

虽然浏览器原生支持 Fetch 和流式读取，但在实际开发中：

流的解析与 buffer 处理繁琐
事件通知机制缺失，难以响应流的状态变化
处理 abort、错误、结束状态不统一
每次都要重复写 .getReader().read() 很啰嗦

于是我造了 fetch-stream-reader，封装这些逻辑，让你只关注业务处理即可。

✨ 特性亮点

✅ 基于原生 fetch 和 ReadableStream
✅ 支持标准 DOM 事件：stream-start / stream-message / stream-end / stream-error / stream-abort
✅ 支持自动处理多段 chunk 拼接和 JSON 解析
✅ 可自定义请求 header 和 payload
✅ 无第三方依赖，TypeScript 支持良好
✅ 可用于浏览器环境下的 OpenAI、SSE、日志流等场景

🔧 安装使用

npm install fetch-stream-reader

基本用法：

import FetchStreamReader from 'fetch-stream-reader'

const client = new FetchStreamReader('https://api.example.com/stream', {
  Authorization: 'Bearer token'
})

client.on('stream-message', (e) => {
  const data = e.detail
  console.log('🚀 message:', data)
})

client.on('stream-end', () => {
  console.log('✅ stream ended')
})

client.on('stream-error', (e) => {
  console.error('❌ stream error:', e.detail)
})

// 开始流式读取
client.start({ prompt: 'hello' })

// 在需要时中断流
// client.stop()

📦 适用场景

与 OpenAI API、LangChain 等进行 token 级别通信
展示后端日志、构建进度、通知等实时数据
使用 Server-Sent Events（SSE）的服务端推送方案
SSR 渲染分块流的响应处理

🧩 TypeScript 友好

支持类型提示、事件泛型、Payload 类型声明，便于大型项目中使用。

📚 源码与文档

🔗 NPM 地址：www.npmjs.com/package/fet…

🧠 最后

这是一个正在不断完善的小工具，欢迎大家提出建议、PR、或 issues。
如果你正好在构建一个流式通信的 Web 项目，希望 fetch-stream-reader 能帮你少写点重复代码，多专注于用户体验。

👉 有用就点个 ⭐️ 吧！

如果你在使用过程中遇到问题，或者对 fetch-stream-reader 感兴趣，欢迎一起交流探讨。