前言
在现代 Web 应用程序中，服务器必须能够向客户端推送实时数据，以便在无需刷新页面的情况下更新应用程序的状态。而传统的轮询技术已经无法满足这个需求了，因为它会产生大量的网络流量和服务器负载。Server-Sent Events（SSE）是一项用于实现实时 Web 应用程序的技术，它可以通过单个长连接实现服务器到客户端的实时数据传输，以此来解决并发量高的问题。
什么是 Server-Sent Events？
Server-Sent Events 是一种基于 HTTP 的协议，它允许服务器通过单个长连接向客户端推送实时数据。与 WebSocket 不同，SSE 使用标准的 HTTP 协议进行通信，因此可以避免许多防火墙和代理服务器的限制。此外，SSE 的 API 也比 WebSocket 更简单易用。
SSE 的工作原理非常简单。客户端通过一个普通的 HTTP 请求与服务器建立连接，服务器在该连接上定期发送数据，客户端通过事件监听器来接收数据。当客户端收到数据时，它可以使用 JavaScript 来处理数据并更新用户界面。
如何使用 Server-Sent Events？
使用 SSE 需要以下步骤：
- 在客户端创建一个 EventSource 对象。
- 将 EventSource 对象连接到服务器。
- 在服务器上发送数据。
- 在客户端上处理数据。
在客户端创建一个 EventSource 对象
在客户端上创建一个 EventSource 对象非常简单。只需要使用 JavaScript 的构造函数即可：
var eventSource = new EventSource(url);
其中，url 是一个字符串，它指定了服务器上的 SSE 端点。例如：
var eventSource = new EventSource("/sse");将 EventSource 对象连接到服务器
在客户端创建 EventSource 对象后，可以使用 open 事件监听器来处理连接事件。例如：
eventSource.addEventListener("open", function(event) {
console.log("Connected to server.");
});在连接成功后，可以使用 close 事件监听器来处理断开连接事件。例如：
eventSource.addEventListener("close", function(event) {
console.log("Disconnected from server.");
});在服务器上发送数据
在服务器上发送数据非常简单。只需要使用 SSE 的标准格式即可：
res.write("event: message\n");
res.write("data: Hello, world!\n\n");其中，event 表示事件名称，data 表示事件数据。每个事件必须以两个换行符结尾。
在客户端上处理数据
在客户端上处理数据也非常简单。只需要使用 message 事件监听器即可：
eventSource.addEventListener("message", function(event) {
console.log(event.data);
});当客户端接收到数据时，data 属性将包含服务器发送的数据。
如何解决并发量高的问题？
在传统的轮询技术中，客户端必须定期向服务器发送请求以获取最新数据。这种技术会产生大量的网络流量和服务器负载，因为每个请求都需要建立一个新的连接。而 Server-Sent Events 可以通过单个长连接向客户端推送实时数据，以此来解决并发量高的问题。
使用 SSE 可以大大减少网络流量和服务器负载。因为 SSE 的连接是长连接，所以只需要建立一次连接即可。服务器可以在连接上定期发送数据，而客户端可以在接收到数据时立即处理数据。这样可以避免不必要的网络流量和服务器负载。
示例代码
以下是一个使用 SSE 的示例代码：
服务器端代码
-- -------------------- ---- -------
--- ---- - ----------------
------------------------------- ---- -
-- -------- --- ------- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
---------------------- -
----------------- ------------
---------------- ------ -------------
-- ------
- ---- -
------------------ -
--------------- -----------
---
--------------------
--------------------
----------------------------- ------ ------------------
---------------------
--------------------
-------------------------- ------ ---------------
----------------------
-------------- ----------- - --- -----------------------
-------------------------------------------------- --------------- ----
----------- ---------------------------
-----------------
-----------------------
---------------------
---------------------
-
----------------客户端代码
-- -------------------- ---- -------
--------- -----
------
------
------------------ ------ ---------------
-------
------
--------------- ------ ------------
--------
--- ----------- - --- --------------------
--------------------------------------- --------------- -
------------------------
---
---------
-------
-------结论
Server-Sent Events 是一项强大的技术，它可以通过单个长连接向客户端推送实时数据，以此来解决并发量高的问题。使用 SSE 可以大大减少网络流量和服务器负载，从而提高 Web 应用程序的性能和可靠性。如果您正在开发实时 Web 应用程序，那么强烈建议您使用 SSE。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676047cd03c3aa6a56fe310c