在前端开发中，我们经常会使用 Server-Sent Events (SSE) 技术来实现服务器向客户端推送消息的功能。在 SSE 中，服务器通过 HTTP 协议向客户端发送消息，而客户端通过 EventSource API 接收消息。在这个过程中，可能会出现编码问题，导致消息无法正确解析。本文将介绍 SSE 发送消息时的编码问题及解决方案。
问题描述
在 SSE 中，服务器通过 HTTP 协议向客户端发送消息的格式如下：
data: message\n\n
其中，data 表示数据字段，message 表示消息内容，\n\n 表示消息结束符。在发送消息时，服务器需要将消息内容进行编码，以避免出现特殊字符导致消息无法解析的问题。常见的编码方式有 URL 编码和 Base64 编码。
然而，如果服务器和客户端使用的编码方式不一致，就会导致消息无法正确解析。例如，如果服务器使用 UTF-8 编码发送消息，而客户端使用 GBK 编码接收消息，就会出现乱码的情况。
解决方案
为了避免编码问题，我们需要在服务器和客户端之间建立一个统一的编码规范。常见的编码规范有 UTF-8 和 Unicode。
UTF-8 编码
UTF-8 是一种可变长度的 Unicode 编码方式，支持所有 Unicode 字符。在 UTF-8 编码中，每个字符的编码长度可以是 1 到 4 个字节，具体规则如下：
| Unicode 码点范围 | 编码方式 |
|---|---|
| U+0000 ~ U+007F | 0xxxxxxx |
| U+0080 ~ U+07FF | 110xxxxx 10xxxxxx |
| U+0800 ~ U+FFFF | 1110xxxx 10xxxxxx 10xxxxxx |
| U+10000 ~ U+10FFFF | 11110xxx 10xxxxxx 10xxxxxx 10xxxxxx |
UTF-8 编码可以通过 JavaScript 的 encodeURIComponent 方法进行转换。例如，下面的代码将字符串 message 进行 UTF-8 编码：
const encodedMessage = encodeURIComponent('message');
Unicode 编码
Unicode 是一种固定长度的字符编码方式，支持所有世界上的字符。在 Unicode 编码中，每个字符的编码长度都是 2 个字节，具体规则如下：
| Unicode 码点范围 | 编码方式 |
|---|---|
| U+0000 ~ U+FFFF | 两个字节 |
| U+10000 ~ U+10FFFF | 四个字节 |
Unicode 编码可以通过 JavaScript 的 String.fromCharCode 方法进行转换。例如，下面的代码将字符串 message 进行 Unicode 编码：
const encodedMessage = Array.from('message').map((c) => c.charCodeAt(0)).join(',');
示例代码
下面是一个使用 UTF-8 编码发送消息的示例代码：
-- -------------------- ---- ------- ----- -------------- - ------------------------------ ----- ----------- - --- -------------------- --------------------------------------- ------- -- - ------------------------ --- ------------------------------------ -- -- - ----------------------- --------- --- ------------------------------------- ------- -- - ------------------ ----------- ---展开代码
在服务器端，我们需要将消息内容进行 UTF-8 编码：
const encodedMessage = encodeURIComponent('message'); res.write(`data: ${encodedMessage}\n\n`);
通过使用统一的编码规范，我们可以避免 SSE 发送消息时的编码问题，确保消息能够正确解析。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d4f326a941bf7134931f52
