在 web 开发中，经常需要实现实时推送数据的功能。传统的方式通常是使用轮询，但是这种方式非常消耗资源，对服务器和客户端都有很大的负荷。随着浏览器和服务器的技术的发展，越来越多的实时数据推送技术被开发出来，其中一种比较流行的技术是 Server-Sent Events（SSE），本文就要介绍如何使用这种技术实现基于事件的编程。
什么是 Server-Sent Events
Server-Sent Events 是一种基于 HTTP 协议下的实时数据推送技术，通过在服务端发送事件流到客户端实现实时数据传输。SSE 可以保持开放的 HTTP 请求，以便向客户端发送数据流。这种推送技术使用了极少的资源，可以承载大量的并发连接，非常适用于实时数据推送。
如何使用 Server-Sent Events
在客户端，我们可以使用 HTML 中的 EventSource API 来监听从服务器发送的事件流：
const eventSource = new EventSource('/stream');
eventSource.addEventListener('message', event => {
console.log(event.data);
});在服务端，我们可以使用常规的 HTTP 响应来发送事件流，但是需要添加一些特定的头信息，如下所示：
HTTP/1.1 200 OK
Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive
event: example
data: {"message": "hello world"}在这个例子中，我们发送了一个名为 ‘example’ 的事件流，内容是 'hello world'。
示例代码
接下来，我们来看一个完整的例子，如下所示：
server.js：
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
-- -------- --- ---------- -
------------------ -
--------------- -------------------- -- -----
---------------- -----------
------------- ------------
---
-------------- -- -
----- ----------- - --- --------------------- -- ------
----------------- ----------- ---------------------
-- ------
-
----------------client.html：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------ --------------
-------
------
--------------- ------ ---------
---- ------------------
--------
----- ------ - ----------------------------------
----- ----------- - --- -----------------------
------------------------------------ ----- -- -
---------------- - -------- ----- ---------------
---
---------
-------
-------这个例子中，服务器每秒发送一个当前时间的事件流，然后客户端监听 'time' 事件，并将其打印在页面上。
总结
虽然 SSE 技术已经被广泛使用，但是对于对 WebSocket 更熟悉的开发者来说，可能会发现 SSE 只是 WebSocket 的一个子集，因为它不支持双向数据传递，也不能使用高级的协议（如 STOMP、XMPP 等）。但是，SSE 技术非常适合一些简单的实时数据推送场景，相比 WebSocket，使用成本更低，代码实现也更为简单。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6543cb5c7d4982a6ebdcd99b