在现代应用程序中，消息推送已成为必不可少的功能。它可以使用户在应用程序处于非活动状态时仍然能够接收到实时更新。Server-sent Events (SSE) 是一种轻量级的协议，用于实现服务器向客户端推送实时事件。本文将介绍如何使用 SSE 实现消息推送。
SSE 基础知识
SSE 是一种基于 HTTP 协议的服务器推送技术。它允许服务器向客户端发送持续的数据流，通常是文本格式的数据。与 WebSocket 不同，SSE 使用标准的 HTTP 协议，因此可以与现有的服务器端技术集成，例如 PHP、Node.js 等。
SSE 的优点如下：
- 简单易用：只需要使用浏览器内置的 EventSource API 即可实现。
- 可靠性高：SSE 使用 HTTP 协议，因此可以利用现有的网络基础设施，无需使用专用的协议或端口。
- 轻量级：SSE 的数据格式为文本格式，因此数据包大小较小，传输速度快。
SSE 实现步骤
SSE 的实现步骤如下：
- 在服务器端设置 SSE 响应头
在服务器端，需要设置响应头 Content-Type: text/event-stream，以指示该响应为 SSE 数据流。此外，还可以设置其他响应头，例如 Cache-Control、Access-Control-Allow-Origin 等。
示例代码（使用 Node.js）：
response.writeHead(200, {
"Content-Type": "text/event-stream",
"Cache-Control": "no-cache",
"Access-Control-Allow-Origin": "*"
});- 向客户端发送 SSE 数据
在服务器端，可以使用 response.write() 方法向客户端发送 SSE 数据。SSE 数据格式为文本格式，每个数据块以两个换行符 \n\n 结束。数据块可以包含多个字段，例如 event、id、data 等。
示例代码：
response.write("event: message\n");
response.write("id: 123\n");
response.write("data: Hello, world!\n\n");- 在客户端接收 SSE 数据
在客户端，可以使用浏览器内置的 EventSource API 接收 SSE 数据。使用 new EventSource() 方法创建一个 EventSource 对象，并指定 SSE 数据流的 URL。在接收到 SSE 数据后，可以使用 onmessage 事件处理程序处理数据。
示例代码：
const eventSource = new EventSource("http://example.com/sse");
eventSource.onmessage = function(event) {
console.log(event.data);
};SSE 示例
下面是一个完整的 SSE 示例，使用 Node.js 实现。该示例向客户端发送一个简单的计数器，每秒钟自增一次。
服务器端代码：
-- -------------------- ---- -------
----- ---- - ----------------
----
----------------------- --------- -- -
----------------------- -
--------------- --------------------
---------------- -----------
------------------------------ ---
---
--- ------- - --
-------------- -- -
--------------------- -----------------
----------
-- ------
--
--------------
------------------- -------- ------------------------客户端代码：
-- -------------------- ---- -------
--------- -----
------
------
---------- ------------
-------
------
------- ---------
---- -------------------
--------
----- ----------- - --- -------------------------------------
--------------------- - --------------- -
----- ------- - -----------------------------------
----------------- - -----------
--
---------
-------
-------在浏览器中打开客户端页面，可以看到一个数字计数器，每秒钟自增一次。
总结
使用 SSE 实现消息推送是一种简单、可靠、轻量级的方式。它可以使应用程序实现实时更新，提高用户体验。本文介绍了 SSE 的基本原理和实现步骤，并提供了一个完整的 SSE 示例。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/663f6faad3423812e4da5d65