text/event-stream中文乱码如何解决？

Question

在使用 `text/event-stream` 实现服务器发送事件（SSE）时，中文字符出现乱码是常见问题。通常表现为前端接收到的消息中汉字显示为问号或方块字符。该问题多因服务端未正确设置响应的字符编码导致，默认编码可能为 ISO-8859-1，不支持中文。解决方法包括：确保服务端响应头明确指定 `Content-Type: text/event-stream;charset=UTF-8`，并在发送数据时以 UTF-8 编码输出。同时，前端需确认浏览器解析字符集为 UTF-8。部分框架还需手动关闭缓冲并刷新输出流，避免编码转换中断。

Answer 1

1. 问题背景与现象描述

在使用 text/event-stream 实现服务器发送事件（SSE）时，中文字符乱码是开发者常遇到的问题。典型表现为：前端接收到的事件流中汉字显示为“？”或“□”等占位符，严重影响用户体验和系统可用性。该问题并非源于网络传输错误，而是字符编码处理不当所致。

• 现象：浏览器控制台或界面展示中文为乱码
• 常见场景：Node.js、Spring Boot、Flask、Go 等后端服务推送含中文的 SSE 消息
• 根本原因：服务端未显式声明 UTF-8 编码，导致客户端以默认编码（如 ISO-8859-1）解析

2. 编码机制分析：从 HTTP 到字节流

SSE 基于 HTTP 长连接，数据以纯文本形式逐段发送。其核心在于 MIME 类型 text/event-stream 的语义解释。若未指定字符集，大多数服务器会采用默认编码 ISO-8859-1，该编码仅支持单字节字符，无法表示中文。

编码类型	支持语言	字节长度	是否支持中文
ISO-8859-1	西欧语言	1 字节	否
UTF-8	全球通用	1-4 字节	是
GBK	简体中文	1-2 字节	是（有限）

3. 解决方案层级一：响应头设置

首要解决方式是在服务端响应中明确指定字符集。必须确保响应头包含：

Content-Type: text/event-stream;charset=UTF-8

以下为不同框架中的实现示例：

1. Node.js (Express)：

   res.writeHead(200, {
     'Content-Type': 'text/event-stream;charset=utf-8',
     'Cache-Control': 'no-cache',
     'Connection': 'keep-alive'
   });

2. Spring Boot (Java)：

   @GetMapping(value = "/stream", produces = "text/event-stream;charset=UTF-8")
   public SseEmitter stream() { ... }

4. 解决方案层级二：输出流编码控制

即使设置了响应头，部分框架仍可能因内部缓冲机制导致编码转换失败。需手动刷新输出流，防止数据被截断或缓存延迟。

// Python Flask 示例
from flask import Response
import json

def generate():
    data = {"message": "你好，世界"}
    yield f"data: {json.dumps(data, ensure_ascii=False)}\n\n"
    # 强制刷新
    sys.stdout.flush()

return Response(generate(), content_type='text/event-stream; charset=utf-8')

关键点：ensure_ascii=False 允许非 ASCII 字符原样输出，避免转义为 \uXXXX 形式。

5. 前端验证与浏览器行为

尽管现代浏览器普遍支持 UTF-8 自动识别，但仍建议通过 HTML 页面显式声明字符集：

<meta charset="UTF-8">

此外，可通过 DevTools 查看 Network 面板中的响应头是否正确返回：

请求 URL

/api/sse/stream

Response Headers

Content-Type: text/event-stream;charset=UTF-8

6. 架构级排查流程图

graph TD A[客户端接收乱码] --> B{检查响应头} B -->|Content-Type含charset=UTF-8| C[检查服务端输出编码] B -->|缺失charset| D[添加charset=UTF-8] C --> E{是否使用框架缓冲?} E -->|是| F[关闭缓冲并flush] E -->|否| G[检查JSON序列化配置] G --> H[确保非ASCII不转义] F --> I[验证输出字节流] I --> J[前端测试] J --> K[问题解决]

7. 特殊情况与兼容性考量

某些老旧中间件（如 Nginx 反向代理）可能重写 Content-Type 或缓存响应体，导致 charset 被剥离。应配置如下：

location /sse {
    proxy_pass http://backend;
    proxy_set_header Connection '';
    proxy_http_version 1.1;
    chunked_transfer_encoding off;
    proxy_buffering off;
    proxy_cache off;
}

此配置确保流式传输不被中间层阻塞或修改。