在前端开发中，我们经常需要与服务器进行数据传输。传统的方式是使用 Ajax 技术，通过轮询或长轮询获取服务器数据，但这种方式会浪费带宽和服务器资源。而 Server-sent Events 技术可以让服务器主动向浏览器推送数据，避免了轮询或长轮询的问题，提高了数据传输的效率。
Server-sent Events 是什么？
Server-sent Events（SSE）是一种浏览器与服务器之间实时通信的技术。它允许服务器向客户端推送数据，而无需客户端请求数据。SSE 使用基于 HTTP 的协议，可以在 Web 应用程序中实现实时数据传输。
SSE 的工作原理是通过在服务器上创建一个 HTTP 连接，并将数据发送到客户端。当客户端接收到数据时，它会触发一个特定的事件，我们可以通过 JavaScript 代码监听这个事件并处理数据。
使用 SSE 实现浏览器与服务器数据传输
接下来，我们将使用 SSE 技术实现浏览器与服务器数据传输。
服务器端实现
首先，我们需要在服务器端实现 SSE。在 Node.js 中，可以使用 http 模块来创建一个 HTTP 服务器，并使用 response 对象的 writeHead()、write() 和 end() 方法来发送 SSE 数据。下面是一个简单的示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
-- -------- --- ------- -
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
---
-------------- -- -
---------------- ----- ----------------------------
-- ------
-
----------------在上面的代码中，我们创建了一个 HTTP 服务器，并监听 /sse 路径的请求。当客户端请求 /sse 路径时，我们会向客户端发送 SSE 数据。这里我们使用 setInterval() 方法每秒钟向客户端发送一个时间戳。
注意，我们在响应头中设置了 Content-Type 为 text/event-stream，这是 SSE 的 MIME 类型。并设置了 Cache-Control 为 no-cache，这是为了避免缓存。最后，我们设置了 Connection 为 keep-alive，这是为了保持连接。
客户端实现
接下来，我们需要在客户端使用 JavaScript 代码监听 SSE 事件，并处理接收到的数据。在浏览器中，我们可以使用 EventSource 对象来实现 SSE。下面是一个简单的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ------------
-------
------
---- --------------------
--------
----- --- - --- --------------------
------------------------------- ------- -- -
----- ---- - -----------
--------------------------------------------- - -----
---
---------
-------
-------在上面的代码中，我们创建了一个 EventSource 对象，并将其连接到服务器的 /sse 路径。然后，我们使用 addEventListener() 方法监听 message 事件，当服务器向客户端发送数据时，就会触发这个事件。在事件处理程序中，我们获取接收到的数据，并将其显示在页面上。
总结
Server-sent Events 技术可以让服务器主动向浏览器推送数据，避免了轮询或长轮询的问题，提高了数据传输的效率。在本文中，我们介绍了 SSE 的工作原理，并使用 Node.js 和浏览器实现了一个简单的 SSE 示例。希望这篇文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660e40b9d10417a222ebbd19