基于vite mock,进行SSE功能调试

642 阅读1分钟

目前使用Server-sent Event的接口越来越多

这种接口的简单性,以及持续推送的异步性非常优越,非常适用于长时间执行的任务,大部分大模型后端接口都使用SSE进行开发。

不过开发过程中会发现一个问题,SSE接口极难调试,尤其是持续上下文的返回值。

vite的devServer本身支持SSE,需要利用一个vite-plugin-mock-dev-server插件

按照官方文档很容易配置好一个测试api github.com/pengzhanbo/…

此时你会发现模拟SSE数据依然很麻烦,自己要写一大堆模拟代码,在此提供一个简单的:

const PROGRESS = [
  `{"steps":0}`,
  `{"steps":1}`,
  `{"steps":2}`,
  `{"steps":3}`,
]

import { createSSEStream, defineMock } from 'vite-plugin-mock-dev-server'
import { from, of } from 'rxjs';
import { concatMap, delay } from 'rxjs/operators';
export default defineMock({
  url: '/sse/progress',
  response: (req, res) => {
    const sse = createSSEStream(req, res)
    const source$ = from(PROGRESS);
    source$.pipe(
      concatMap(value => of(value).pipe(delay(1000)))
    ).subscribe({
      next: (i) => {
        sse.write({ event: 'new_message', data: i })
      },
      complete: () => {
        // sse.write({ event: 'message', data: { message: 'end' } })
        sse.end()
      }
    });
  }
})