Server-Sent Events（SSE）是一种基于 HTTP 的服务器推送技术，它允许服务器向客户端发送事件流，以实现实时通信。在前端开发中，SSE 可以用于实现聊天室、实时数据更新等功能。然而，在使用 SSE 时，我们可能会遇到中文字符集乱码的问题，本文将介绍如何解决这个问题。
问题描述
当 SSE 服务器向客户端发送包含中文字符的数据时，如果客户端没有正确设置字符集，就会出现乱码。例如，当服务器发送如下数据时：
data: {"name":"张三","age":20}如果客户端没有正确设置字符集，就会出现如下乱码：
data: {"name":"鍒╃敤","age":20}这是因为中文字符使用了 Unicode 编码，在传输过程中需要进行编码和解码。如果客户端没有正确设置字符集，就无法正确解码中文字符，从而出现乱码。
解决方案
解决 SSE 中文字符集乱码的问题，需要从两个方面入手：服务器端和客户端。
服务器端
在服务器端，需要设置正确的字符集，以确保发送的数据可以正确解码。一般来说，可以在 HTTP 响应头中设置字符集，例如：
Content-Type: text/event-stream; charset=utf-8
这样，就可以确保服务器发送的数据使用 UTF-8 编码，从而避免中文字符集乱码的问题。
客户端
在客户端，需要正确解码接收到的数据，以确保中文字符可以正确显示。一般来说，可以使用 JavaScript 中的 TextDecoder 对象进行解码，例如：
const decoder = new TextDecoder('utf-8');
eventSource.onmessage = function(event) {
const data = JSON.parse(decoder.decode(event.data));
console.log(data);
};这样，就可以正确解码接收到的数据，并将其转换为 JavaScript 对象，从而避免中文字符集乱码的问题。
总结
SSE 是一种非常有用的前端技术，可以用于实现实时通信等功能。但是，在使用 SSE 时，我们需要注意中文字符集乱码的问题。为了解决这个问题，我们需要在服务器端设置正确的字符集，并在客户端使用 TextDecoder 对象进行解码。通过这些措施，就可以避免中文字符集乱码的问题，并确保数据可以正确显示。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65780f2bd2f5e1655d1e5af7