概述
SSE（Server-Sent Events）是一种用于服务器主动向客户端发送数据的技术。相比于传统的 AJAX 轮询方式，SSE 可以在服务器有新数据时立即将其推送给客户端。SSE 主要用于一些实时性要求较高的应用场景，如在线聊天、股票行情等。
本文将深入探讨 SSE 的原理及使用技巧，并提供示例代码作为参考。
原理
SSE 使用了 HTML5 中的 EventSource 接口，客户端通过 EventSource 实例与服务器建立连接，服务器则通过 HTTP 1.1 协议的持久连接不断向客户端发送数据。具体流程如下：
- 客户端通过 EventSource 对象实例化一个连接，向指定 URL 发送请求。
- 服务器接收到客户端请求后，将请求头中的“accept”设置为“text/event-stream”，表示返回的数据为事件流。
- 服务器发送响应头“Content-Type: text/event-stream”，表示返回的是 SSE 数据流。
- 服务器不断向客户端发送数据，每条数据以“event:”、“data:”等为前缀，表示数据类型及数据内容，以“\n\n”结尾，表示发送完成。
使用技巧
服务器端的 SSE 推送
使用 SSE 时，服务器端需要实现一定的推送机制，以便在有新数据时向客户端发送数据。以下是一些常见的 SSE 推送方法：
定时发送
通过 setTimeout() 或 setInterval() 等方法定时向客户端发送数据，这种方法适用于数据刷新频率较低的情况。
setInterval(function() {
response.write('data: ' + new Date() + '\n\n');
}, 1000);事件触发
通过监听特定事件，在事件触发时向客户端发送数据。这种方法适用于事件发生频率较高的情况。
var evt = new EventEmitter();
evt.on('message', function(data) {
response.write('data: ' + data + '\n\n');
});数据推送
当有新数据时，立即将数据推送给客户端。这种方法适用于需要立即向客户端发送数据的情况。
function send(data) {
response.write('data: ' + data + '\n\n');
}客户端的 SSE 接收
客户端可以通过 EventSource 对象的事件监听函数，实现对服务器推送数据的实时接收。
var source = new EventSource('/sse');
source.addEventListener('message', function(message) {
console.log(message.data);
});在接收到服务器推送的数据时，可以根据数据的类型进行相应的操作，如将数据渲染到页面上，更新页面状态等。
示例代码
以下是一个简单的 SSE 推送示例，服务器实时向客户端推送时间：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------------- - ------------------
--------------------------- --------- -- -
-- ------------ --- ------- -
----------------------- -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
--------------------- ----- --------------
-- ------
- ---- -
----------------------- - --------------- ----------- ---
--------------
--------- -----
------
------
---------- ------------
-------
------
--------------- ------ ---------
---- ----------------
--------
----- ------ - --- --------------------
----- -------- - --------------------------------
---------------------------------- ------- -- -
----- ---- - -----------
------------------ - -----
---
---------
-------
-------
---
-
----------------在浏览器中访问 http://localhost:8888/ 即可查看实时时间。
总结
本文深入探讨了 SSE 的原理及使用技巧，并提供了示例代码作为参考。在实际开发中，可以根据具体业务需求，选择合适的 SSE 推送方式，并使用 EventSource 接口实现实时数据接收。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a5ea6aadd4f0e0ffe7d1f3