前言
Server-sent Events (SSE) 是前端实现服务器推送的一种方式，通过 SSE 可以实现单向的实时数据传输。和 WebSocket 相比，SSE 更简单、更方便，适用于实时更新类的场景，例如社交网络中的通知、在线聊天等。
本文将深入介绍 SSE 的事件源配置，包括配置事件源、创建 SSE 连接等内容，并结合代码示例进行讲解。
事件源配置
在使用 SSE 时，首先需要为事件源添加 EventSource API。
-- -------------------- ---- -------
---- ---------- ---
--------
----- ------ - --- ------------------------
---------------- - --------------- -
------------------------
-
-------------- - --------------- -
------------------ ------- -------
-
------------- - --------------- -
---------------- -------- -------
-
------------------------------- --------------- -
--------------------- ------ ------- -------
---
---------事件源的配置包括以下几个方面：
使用 HTTP/ HTTPS 协议
SSE 使用 HTTP/ HTTPS 协议进行连接和通信，因此需要使用 http.createServer 或 https.createServer 创建服务器。
-- -------------------- ---- -------
-- ---------
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- -------------------- -- -----
---------------- -----------
------------- ------------
---
----- --------- - -- -- -
----------------- ---------
---------------- --------------------
--
---------------------- ------
--------------- -- -- -
------------------- ---------------
---
----------------配置响应头
响应头中需要包含 Content-Type 和 Cache-Control 等信息，这些信息表明这是 SSE 的连接，而不是普通的 HTTP 请求。
res.writeHead(200, {
'Content-Type': 'text/event-stream', // 设置响应头
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});使用 keep-alive 持续连接
为了保持连接，SSE 连接需要使用 keep-alive 持续连接，保持连接状态，让服务器可以通过连接将数据推送给客户端。
res.writeHead(200, {
'Content-Type': 'text/event-stream', // 设置响应头
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});使用 event 字段分离数据
使用 SSE 时，需要使用 event 字段将数据分解为不同的事件。可以使用自定义的事件名称，或使用默认的 message 事件。
const sendEvent = () => {
res.write('event: test\n');
res.write(`data: ${Date.now()}\n\n`);
};使用 id 字段标识最后一个事件
可以使用 id 字段来标识最后一个事件的 ID，使得客户端可以通过 lastEventId 获取到最后一个事件的 ID。
res.write(`id: ${Date.now()}\n`);创建 SSE 连接
在 HTML 中创建 SSE 连接的方法比较简单，只需要使用 EventSource 构造函数即可。
-- -------------------- ---- -------
---- ---------- ---
--------
----- ------ - --- ------------------------
---------------- - --------------- -
------------------------
-
-------------- - --------------- -
------------------ ------- -------
-
------------- - --------------- -
---------------- -------- -------
-
------------------------------- --------------- -
--------------------- ------ ------- -------
---
---------创建 SSE 连接需要注意以下几个方面：
使用 EventSource 构造函数
在 HTML 中，可以使用 EventSource 构造函数创建 SSE 连接。
const source = new EventSource('/api/sse');监听 onmessage 事件
通过监听 onmessage 事件，可以接收到服务器推送的数据。
source.onmessage = function(event) {
console.log(event.data);
}监听 onerror 事件
如果连接出现错误，可以通过监听 onerror 事件来处理错误。
source.onerror = function(event) {
console.error('SSE error', event);
}监听 onopen 事件
在连接成功时，可以通过监听 onopen 事件来执行一些操作，例如发送一些初始化的请求。
source.onopen = function(event) {
console.log('SSE opened', event);
}使用自定义事件名称
使用 addEventListener 方法，可以监听自定义的事件名称。
source.addEventListener('test', function(event) {
console.log('received custom event', event);
});示例代码
服务器代码：
-- -------------------- ---- -------
-- ---------
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
----- --------- - -- -- -
----------------- ---------
---------------- --------------------
--
---------------------- ------
--------------- -- -- -
------------------- ---------------
---
----------------HTML 代码：
-- -------------------- ---- -------
---- ---------- ---
--------- -----
------
------
----- ----------------
---------- ------------
-------
------
------- ---------
--------
----- ------ - --- ------------------------
---------------- - --------------- -
------------------------
-
-------------- - --------------- -
------------------ ------- -------
-
------------- - --------------- -
---------------- -------- -------
-
------------------------------- --------------- -
--------------------- ------ ------- -------
---
---------
-------
-------总结
本文详细介绍了 SSE 的事件源配置和创建 SSE 连接的方法，并给出了代码示例。SSE 作为实现服务器推送的一种方式，可以方便地实现实时更新类的功能，非常适用于社交网络中的通知、在线聊天等场景。希望本文对大家有所帮助，能够更好地理解 SSE 的使用方法，实现自己想要的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649b9e3c48841e9894862a24