Server-sent Events是一种现代的Web API，它允许服务器向客户端推送数据，而无需客户端发起请求。在前端开发中，这种技术尤其有用，因为它可以帮助我们创建实时交互性应用程序。
在本篇文章中，我们将会探讨Server-sent Events的使用场景，并演示一个实际的示例代码，以帮助你了解这一功能，并掌握如何在你的应用程序中使用Server-sent Events。
什么是Server-sent Events?
Server-sent Events是一种HTML5 API，它可以建立一个持久的服务器到浏览器连接，让服务器向浏览器推送数据。相比传统的ajax轮询或WebSocket，Server-sent Events更加轻量级，并且易于使用。
在浏览器端，我们可以使用JavaScript的EventSource对象来建立这种连接并接收服务器的数据。这个对象有一个onmessage回调函数，每当服务器有新的消息时，就会调用这个函数。
如何使用Server-sent Events
现在，我们一起来看一下如何使用Server-sent Events来实现消息推送。以下是一个简单的HTML页面示例：
-- -------------------- ---- ------- --------- ----- ------ ------ ------------------- ------ ------------ ------- ------ ----- -------------------- --------- ------- ----------- - --- ----------------------- ------- ----------- - ------------------------------------ -- ----------------------- - ------- -- - -------- ------- - ---------------------------- -------------------- - ----------- ------------------------------------ --- ---------- ------- -------
在这个示例中，我们首先定义一个Id为messages的div，用于将服务器发送的消息显示在页面上。接下来，我们使用JavaScript的EventSource对象，创建一个到服务器的连接，并在onmessage回调函数内，接收来自服务器的消息，并将其显示在messagesDiv内。
以下是我们在服务器端使用Node.js实现的消息推送代码：
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
-------------------
--- - - --
----- ---------- - -------------- -- -
----------------- ------------
---------------- ------ ------ --------------
-- ------
--------------- -- -- -
--------------------------
---
----------------
------------------- ----------在服务器端，我们使用http模块创建了一个HTTP服务器，并在每秒内向客户端发送一条消息。需要注意的是，我们在响应头中添加了Content-Type为text/event-stream的响应头，并使用\n\n将每条消息与事件分隔开，这样客户端就可以很容易地解析每条消息了。
最后，我们还在req上监听了‘close’事件，如果客户端连接关闭了，我们就清除掉定时器intervalId，以停止消息推送。
总结
在这篇文章中，我们介绍了Server-sent Events的使用场景，并演示了一个简单的消息推送代码示例。相比传统的轮询或WebSocket，Server-sent Events更加轻量级，并且易于使用。如果你正在开发需要实时推送数据的Web应用程序，Server-sent Events已经成为一个不可或缺的工具，因为它可以帮助你提高应用程序的实时性和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ed4266f6b2d6eab37663b9