UmiJS开发服务器压缩中间件对SSE流式传输的影响与解决方案

概述

在使用UmiJS框架进行开发时，开发服务器默认启用了压缩中间件，这一设计在大多数HTTP请求场景下能够有效减少传输数据量。然而，当开发者需要实现Server-Sent Events(SSE)这种需要保持长连接的流式传输功能时，这一默认配置会导致事件无法实时推送，所有事件会被缓冲直到连接结束才一次性返回。

问题现象分析

SSE技术允许服务器通过持久化的HTTP连接向客户端推送事件，典型的应用场景包括实时聊天、股票行情推送等。在正常运作情况下，SSE连接应该保持开放状态，服务器可以随时通过这个连接发送事件数据。

UmiJS开发服务器默认加载的压缩中间件会破坏这一机制，具体表现为：

1. 所有事件被缓冲在服务器端
2. 连接结束时才一次性发送所有缓冲内容
3. 客户端无法实时接收事件
4. 失去了SSE技术低延迟的核心优势

技术原理探究

压缩中间件通常会对响应体进行缓冲，以便进行整体压缩。对于常规HTTP请求，这种缓冲不会造成问题，因为请求本身是离散的。但对于SSE这样的长连接流式传输：

1. 压缩中间件会等待整个响应完成
2. 每个事件都会被缓冲而非立即发送
3. 连接保持期间客户端收不到任何数据
4. 最终所有事件被压缩后一次性发送

这与SSE的设计初衷背道而驰，SSE需要的是每个事件都能被立即传输而不需要等待后续事件。

解决方案比较

方案一：全局禁用压缩

通过环境变量UMI_DEV_SERVER_COMPRESS=none可以完全禁用开发服务器的压缩功能。这是最彻底的解决方案，适合以下场景：

• 项目主要依赖SSE技术
• 开发环境带宽充足
• 不需要考虑开发时的数据传输量

优点：配置简单，一劳永逸 缺点：失去了对所有请求的压缩优化

方案二：代理层特殊处理

在代理配置中针对SSE请求进行特殊处理，示例配置：

onProxyRes: (proxyRes, req, res) => {
  if (req.headers.accept === 'text/event-stream') {
    res.writeHead(res.statusCode, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-transform',
      'Connection': 'keep-alive'
    });
  }
}

优点：可以精确控制SSE请求行为 缺点：需要了解代理配置细节

方案三：中间件移除

通过Umi插件API移除压缩中间件：

api.onBeforeMiddleware(({app}) => {
  const index = app._router.stack.findIndex(layer => layer.name === 'compression');
  if (index !== -1) app._router.stack.splice(index, 1);
});

优点：灵活性高 缺点：侵入性强，依赖内部实现

生产环境注意事项

需要注意的是，这个问题仅存在于开发环境中。在生产环境中：

1. 前端资源通常通过CDN或Nginx等Web服务器提供服务
2. API请求通常直接访问后端服务
3. 需要确保生产环境的代理配置正确处理SSE请求
4. 对于Nginx，需要配置proxy_buffering off等参数

最佳实践建议

根据项目实际情况，推荐以下实践：

1. 开发环境使用环境变量方案，简单可靠
2. 为SSE接口添加特定路径前缀，便于统一处理
3. 文档中明确说明SSE接口的特殊性
4. 团队内部共享配置方案，保持一致性

总结

UmiJS开发服务器的压缩中间件虽然优化了大多数场景下的数据传输，但与SSE技术的流式特性存在冲突。通过本文介绍的几种解决方案，开发者可以根据项目需求选择最适合的方式，确保SSE功能在开发环境中正常工作。理解这些技术细节有助于开发者更好地利用UmiJS框架构建实时性要求高的应用。