在 Web 应用程序中，服务器和客户端之间的通信是非常重要的。在过去，为了实现实时通知，开发人员通常使用轮询技术，这种技术会导致服务器的负载增加，同时也会影响客户端的性能。为了解决这个问题，HTML5 引入了 Server-sent Events(SSE) 技术，它可以实现服务器端周期性检查，从而实现实时通知，同时还可以降低服务器的负载。
SSE 的优点
- 实时通知：SSE 可以在服务器端周期性地检查数据，当有数据更新时，可以立即通知客户端，实现实时通知。
- 节省带宽：SSE 只在有新数据时才会发送数据，因此可以节省带宽。
- 降低服务器负载：SSE 只在需要时才会检查数据，因此可以降低服务器的负载。
SSE 的实现
SSE 通过浏览器端创建一个 EventSource 对象来实现。服务器端需要发送一些特殊的 HTTP 响应头来启用 SSE，这些响应头包括 Content-Type、Cache-Control 和 Access-Control-Allow-Origin 等。
以下是一个 SSE 的示例代码：
----- ----------- - --- -------------------- --------------------- - ------- -- - ------------------------ --
在这个示例中，我们创建了一个 EventSource 对象，并将其连接到了服务器端的 /sse 路径。当服务器端有新数据时，会通过 onmessage 事件将数据发送到客户端，并在客户端的控制台中输出。
SSE 的应用场景
SSE 可以用于任何需要实时通知的场景，如在线聊天、股票行情、天气预报等。以下是一个在线聊天的示例代码：
----- ----------- - --- --------------------- --------------------- - ------- -- - ----- ------- - ----------------------- ----- - --------- ------- - - -------- ----- ------- - ------------------------------------ ----------------- -- --------------------------------- ---------------- -- ----- ---- - ------------------------------------- ------------------------------- ------- -- - ----------------------- ----- -------- - ------------------------------------------ ----- ------- - ----------------------------------------- ----- ------- - - --------- ------- -- -------------- - ------- ------- ----- ----------------------- --- ---
在这个示例中，我们创建了一个 EventSource 对象，并将其连接到了服务器端的 /chat 路径。当服务器端有新消息时，会通过 onmessage 事件将消息发送到客户端，并在客户端的聊天框中显示。同时，我们还为表单添加了一个提交事件，当用户发送消息时，会通过 fetch 方法将消息发送到服务器端。
总结
SSE 技术能够实现服务器端周期性检查，从而实现实时通知，同时还可以降低服务器的负载。SSE 可以用于任何需要实时通知的场景，如在线聊天、股票行情、天气预报等。开发人员可以通过浏览器端创建 EventSource 对象来实现 SSE，同时还需要在服务器端发送一些特殊的 HTTP 响应头来启用 SSE。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/660ff61ed10417a222097709