介绍
Server-Sent Events (SSE) 是一种基于 HTTP 的服务器向客户端推送事件的技术。它允许服务器实时地将数据推送到客户端，而无需客户端发起请求。SSE 可以用于实现实时更新的 Web 应用程序，例如股票报价、即时通讯和天气预报等。
SSE 是一种简单、轻量级的技术，它使用标准的 HTTP 协议，因此不需要特殊的网络配置。本文将介绍 SSE 的事件类型和数据传输格式，以及如何在前端中使用 SSE。
事件类型
SSE 使用 EventSource 对象来接收服务器发送的事件。在服务器端，可以使用 text/event-stream 格式来发送事件。这个格式包含多个事件，每个事件都以 data: 开头，以 \n\n 结尾。以下是一个示例：
data: This is the first event\n\n data: This is the second event\n\n
在客户端，可以使用 EventSource 对象的 onmessage 事件来接收服务器发送的事件。以下是一个示例：
const source = new EventSource('/events');
source.onmessage = function(event) {
console.log(event.data);
};SSE 支持以下事件类型：
message
message 事件是 SSE 的默认事件类型。它表示服务器发送了一条消息。以下是一个示例：
data: This is a message\n\n
在客户端，可以使用 EventSource 对象的 onmessage 事件来接收 message 事件。以下是一个示例：
const source = new EventSource('/events');
source.onmessage = function(event) {
console.log(event.data);
};event
event 事件是 SSE 的自定义事件类型。它表示服务器发送了一个具有特定名称的事件。以下是一个示例：
event: myevent data: This is a custom event\n\n
在客户端，可以使用 EventSource 对象的 addEventListener 方法来接收 event 事件。以下是一个示例：
const source = new EventSource('/events');
source.addEventListener('myevent', function(event) {
console.log(event.data);
});id
id 事件是 SSE 的自定义事件类型。它表示服务器发送了一个具有特定 ID 的事件。以下是一个示例：
id: 123 data: This is an event with ID 123\n\n
在客户端，可以使用 EventSource 对象的 lastEventId 属性来获取上一个事件的 ID。以下是一个示例：
const source = new EventSource('/events');
source.onmessage = function(event) {
console.log(event.lastEventId);
};数据传输格式
SSE 使用 text/event-stream 格式来发送事件。这个格式包含多个事件，每个事件都以 data: 开头，以 \n\n 结尾。以下是一个示例：
data: This is the first event\n\n data: This is the second event\n\n
在服务器端，可以使用以下代码来发送 SSE 事件：
-- -------------------- ---- ------- ----------------------- - --------------- -------------------- ---------------- ----------- ------------- ------------ --- --------------------- ---- -- --- ----- ------------ ---------------------- - --------------------- ---- -- - --------- ------------ -- ------
在客户端，可以使用 EventSource 对象来接收 SSE 事件。以下是一个示例：
const source = new EventSource('/events');
source.onmessage = function(event) {
console.log(event.data);
};使用 SSE
使用 SSE 可以实现实时更新的 Web 应用程序。以下是一个示例：
-- -------------------- ---- -------
----- ------ - --- -----------------------
---------------------------------- --------------- -
----- ------- - -----------------------
-- ------------- --- -------------- -
----- -- - -----------------------------
-------------- - -------------
----------------------------------------------------
-
---在服务器端，可以使用以下代码来发送 SSE 事件：
-- -------------------- ---- -------
----------------------- -
--------------- --------------------
---------------- -----------
------------- ------------
---
---------------------- -
----- ------- - -
----- --------------
----- ------- -------
--
--------------------- - - ----------------------- - --------
-- ------结论
Server-Sent Events (SSE) 是一种实现实时更新的 Web 应用程序的技术。它使用标准的 HTTP 协议，因此不需要特殊的网络配置。本文介绍了 SSE 的事件类型和数据传输格式，以及如何在前端中使用 SSE。SSE 是一种简单、轻量级的技术，值得前端开发人员学习和使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67667eea76af2b9a20f7ee7b