在 Web 开发领域，经常需要实现实时的消息推送，如在线聊天、股票行情等功能。为了实现这些功能，一般采用轮询或长轮询的方式。
但是，这种方式有很多弊端，比如会增加服务器负担、延迟高、占用带宽资源等。针对这些问题，SSE (Server-Sent Events) 及消息队列技术便应运而生。
什么是 SSE
SSE是 HTML5 新增的一种服务器推送技术，它允许浏览器从服务器获取更新信息，是一种单向、持久的连接机制，可以在 Web 应用程序中实现服务器向客户端的事件推送。
什么是消息队列
消息队列是一种异步通信方法，用于在应用程序和服务之间传递消息和任务。消息队列由发送者、消息、消息队列、任务消费者和应用程序组成，发送者将消息推送到队列中，最终由消费者读取信息并执行相应任务。
结合 SSE 和消息队列实现实时消息推送
SSE 主要用于服务器向浏览器推送实时事件，而消息队列则用于存储和处理消息。它们的结合可以有效地实现高并发的消息推送需求。
具体实现的流程为：
构建消息队列：使用 RabbitMQ 或 Kafka 等框架构建消息队列。
生产者向队列中推送消息：当有新消息需要推送时，后端服务将消息推送到消息队列。
客户端创建 SSE 连接：客户端创建到服务器的 SSE 连接，并监听数据推送事件。
消费者消费队列中的消息：使用 RabbitMQ 或 Kafka 消费者消费队列中的消息。
将消息推送至 SSE 连接：一旦消费者从队列中获取到消息，就将消息推送至 SSE 连接。
浏览器接收 SSE 消息：SSE 接收到后端推送的消息，并更新页面内容。
以下是一段基于 RabbitMQ 和 SSE 的代码示例：
服务端示例代码
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
----- ---- - --------------------------------
----- --- - ----------
----- ------ - -----------------------
-- -- --- --
--------------- ----- ---- -- -
---------
---------------- -----------
--------------- --------------------
------------- ------------
---
-- ---- -------- ----- --- --
-------------------------------- -------- ----------- -- -
-- -------- ----- -------
--------------------------------- -------- -- -
-- -------- ----- -------
----- ----- - -------------
-------------------------- -
-------- -----
---
---------------------- ----- -- -
----- ------- - -----------------------
--------------------- ---- ----------- ---------
-- -- --- --
---------------- -----------------
-- -
-- -- -------- --------------
------ ----
---
---
-- ----
--------------- -- -- -
-------------------
---
---
---
------------------- -- -- -
------------------- ------- -- ---- -------
---客户端示例代码
const eventSource = new EventSource('/sse');
eventSource.onmessage = (event) => {
console.log('Received from server:', event.data);
};总结
SSE 和消息队列作为两项重要的技术，将能够为 Web 应用程序实现实时事件推送的需求提供更高效、更稳定的解决方案。希望通过本文的介绍和示例，能够为开发者在实践中提供一些参考和指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b279e848841e9894eae2aa