什么是 Server-Sent Events？
Server-Sent Events（SSE）是一种服务器向客户端推送数据的技术，它允许服务器实时地向客户端发送数据流，而无需客户端发送请求。SSE 基于 HTTP 协议，使用常规的 HTTP 连接，因此能够通过普通的 Web 服务器进行部署。
实现实时聊天室的原理
在传统的 Web 应用程序中，客户端需要不断向服务器发送请求，以获取最新的数据。这种轮询方式会导致不必要的网络流量和服务器负载。而使用 SSE 技术，服务器可以实时地向客户端推送最新的数据，从而避免了轮询的过程。
在实现实时聊天室时，我们可以使用 SSE 技术来推送聊天消息。当用户发送一条消息时，服务器将消息推送给所有在线的用户，从而实现实时聊天的效果。
实现步骤
1. 创建一个 SSE 连接
在客户端，我们需要使用 JavaScript 创建一个 SSE 连接。可以使用 EventSource 对象来创建 SSE 连接：
var source = new EventSource('/chat');上面的代码中，/chat 是服务器端推送消息的 URL。
2. 监听服务器推送的消息
当服务器推送消息时，客户端会触发 message 事件。我们可以在 message 事件的回调函数中处理服务器推送的消息：
source.addEventListener('message', function(event) {
var data = JSON.parse(event.data);
// 处理服务器推送的消息
}, false);上面的代码中，event.data 是服务器推送的消息内容。我们可以根据具体的业务需求来处理消息内容。
3. 向服务器发送消息
当用户发送一条消息时，我们需要向服务器发送消息，让服务器将消息推送给所有在线的用户。可以使用 AJAX 或者 WebSocket 技术向服务器发送消息。
下面是使用 AJAX 向服务器发送消息的示例代码：
var xhr = new XMLHttpRequest();
xhr.open('POST', '/chat');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
message: 'Hello, World!'
}));在服务器端，我们可以使用任何编程语言来处理 SSE 连接和消息推送。下面是使用 Node.js 实现 SSE 服务器端的示例代码：
-- -------------------- ---- -------
--- ---- - ----------------
------------------------------- ---- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
--- -- - --
---------------------- -
-------------- - - ---- - ------
---------------- - - ---------------- -------- ------- ------- -- - --------
-- ------
----------------上面的代码中，我们使用 http.createServer 方法创建一个 HTTP 服务器，并将其监听在端口 3000 上。在回调函数中，我们设置响应头，告诉客户端这是一个 SSE 连接。然后，使用 setInterval 方法每秒钟向客户端推送一条消息。
结论
使用 Server-Sent Events 技术可以实现实时聊天室，避免了轮询的过程，减少了网络流量和服务器负载。SSE 技术基于 HTTP 协议，使用常规的 Web 服务器进行部署，非常方便。在实现实时聊天室时，我们需要使用 JavaScript 创建 SSE 连接，在客户端监听服务器推送的消息，并向服务器发送消息。在服务器端，我们可以使用任何编程语言来处理 SSE 连接和消息推送。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675fd03703c3aa6a56f94199