在实时应用程序开发中，客户端的信息更新通常是通过轮询（polling）从服务器请求数据来完成的。这种方法对服务器和客户端的性能有很大影响，因为它会增加服务器负载和减慢应答时间。为了解决这个问题，HTML5标准引入了一种全新的技术——Server-sent事件（SSE）。
什么是Server-sent事件
Server-sent事件允许服务器向客户端推送数据，而不需要客户端请求数据。它可以减少网络流量、服务器负载以及缩短应答时间。使用SSE可以为实时应用程序开发提供完美的解决方案。
如何使用Server-sent事件
使用SSE只需要一个HTTP服务器和一个JavaScript客户端。客户端需要向服务器发送一个请求来订阅事件。服务器收到订阅请求后，可以实时推送数据。客户端可以通过监听事件来获取推送的数据。
服务器端实现
以下是一个简单的Node.js服务器实现：
----- ---- - ---------------
----- ------ - ----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
--
-------------- -- -
---------------- - - --- -------------------- - -------
-- -----
--
-------------------在上面的代码中，我们使用Node.js创建了一个HTTP服务器。当客户端请求连接时，服务器将返回一个Content-Type为text/event-stream的响应。该响应头部包含几个重要的行，其中最重要的是'Cache-Control': 'no-cache'，它会防止浏览器缓存事件的数据。
当连接建立之后，我们可以利用setInterval函数来模拟实时数据更新。在每个1000毫秒的时间间隔内，服务器向客户端推送一条数据。
客户端实现
客户端的实现也非常简单。我们只需要创建一个新的EventSource对象，并指定服务器的URL即可。然后我们可以通过监听onmessage事件来获取推送的数据。如下所示：
----- ------ - --- ------------------- ---------------- - --------------- - ----------------------- -
客户端断开连接
在事件响应之后，我们可以通过source.close()函数来断开客户端与服务器的连接。如下所示：
------------- -- - -------------- -- -----
上面的代码将在5秒后自动关闭客户端与服务器的连接。
客户端的浏览器兼容问题
目前所有主流浏览器都支持Server-sent事件。但是在IE浏览器中，我们需要使用一个polyfill来使其支持EventSource对象。例如，我们可以使用EventSource polyfills提供的polyfill来支持IE浏览器。
结论
Server-sent事件是一种非常有用的技术，它可以使我们建立实时应用程序变得更加容易和高效。在此过程中，我们学习了如何使用SSE以及如何实现简单的Node.js服务器和JavaScript客户端。希望这篇文章能对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67344b390bc820c582483002