前言
跨越多个不同实体之间的即时消息传递是很重要的，尤其是在需要实时信息推送时，例如在线游戏、金融市场数据监测等等。这时我们就需要实时的消息通信，服务器可以推送新的信息到客户端，而客户端不需要频繁地向服务器请求数据。
传统的实现方法是使用轮询（polling）技术，即客户端定期地向服务器发出请求，服务器判断是否有新的消息需要推送，并在有新消息时将其作为响应返回。但是轮询技术存在一些问题，包括请求过于频繁、服务器响应慢等等，这些问题都会导致效率低下。而 SSE（Server-Sent Events）协议就是为解决这些问题而生的。
SSE 协议简介
SSE 协议是一种 HTTP 扩展协议，它允许在一个 HTTP 连接上实时地发送数据，相较于 WebSocket，SSE 协议更加轻量级，而且能够使用现有的 HTTP 协议通道，不需要额外的握手操作。
在 SSE 协议中，服务器接收到客户端请求后，会保持连接，随时推送新的数据到客户端。客户端通过一个 EventSource 对象监听服务器发送的消息，并处理这些消息。服务器通过一个简单的文本协议向客户端发送消息，消息可以是任何文本形式的内容，例如 JSON、HTML 等等。
使用 SSE 协议的实例
我们来看一个使用 SSE 协议实现服务器向客户端推送数据的例子。假设我们正在开发一个在线聊天室应用，这个应用需要实时推送新的聊天信息。
服务器端实现
我们使用 Node.js 来实现服务器端代码，使用 Express.js 作为我们的 Web 框架。在服务器端代码中，我们需要先创建一个 SSE 路由，用于处理 SSE 的连接请求。
-- -------------------- ---- -------
----- ------- - -------------------
----- ------ - -----------------
-- --- --
------------------ ------------- ---- -
---------
---------------- -----------
--------------- --------------------
------------- ------------
---
-------------------
-- -- --- --
----- -------- - -----------
----- -------------- - ------ -- -
-------------- ----------------
---------------- --------------
--
-- -------
---------------------- --------- -- -
----------------------------------------
---
-- -- --- --
--------------- -- -- -
----------------------- ----------------
---
---在 SSE 路由中，我们设置了响应头信息，并向客户端发送一个空行，告知客户端接下来发送的内容是 SSE 协议格式的数据。然后我们建立 SSE 连接，每当有新的聊天消息时，就向客户端发送新的 SSE 消息。
客户端实现
在客户端代码中，我们通过 EventSource 对象来监听 SSE 服务。当有新的 SSE 消息时，EventSource 对象会触发 message 事件，我们可以通过事件处理函数来处理这些事件。
const evtSource = new EventSource('/chat/sse');
evtSource.onmessage = function(event) {
const data = JSON.parse(event.data);
const message = createChatMessage(data);
appendMessage(message);
};在我们的例子中，当有新的聊天消息到达时，我们将消息转换为一个 HTML 元素，然后追加到聊天室中。
-- -------------------- ---- ------- -------- -------------------------- - ----- ------ - ----------------------------- ---------------- - --------------- ----- ------ - ------------------------------- ---------------- - ------- ------------------ - ------------- ----- ------ - ------------------------------- ---------------- - ------- ------------------ - ------------- ----- --------- - ------------------------------- ------------------- - ---------- --------------------- - ---------------- --------------------------- --------------------------- ------------------------------ ------ ------- -
总结
SSE 协议是一种简单且高效的实时数据传输技术，它允许服务器实时推送数据到客户端，客户端也可以实时地处理这些数据。在实际应用开发中，SSE 协议可以用于实现实时聊天室、实时股票行情等场景，它可以帮助我们快速地构建高效、可扩展的实时应用。
像本文介绍的这样，我们可以使用 Node.js 和 Express.js 实现服务器端代码，同时在客户端使用原生的 JavaScript 和 EventSource 对象来监听 SSE 服务。这个例子中还涉及到一些实用的技巧，例如消息处理、HTML 操作等等，这些技巧对前端开发者有很大的参考价值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6470ad8f968c7c53b0ecb9d6