前言
在客户端和服务端交互的过程中，实时性和效率一直是互联网应用开发中的难点。从 Ajax 到 WebSocket 的出现，这个问题有了很大的改善，但 WebSocket 与传统 HTTP 协议仍然存在不兼容的问题。
本文将介绍另一种在现代 Web 应用中常用的数据交互技术——Server-sent Events，详细探讨 Server-sent Events 的优点以及其在 Web 应用中的应用。
什么是 Server-sent Events?
Server-sent Events 是一种通过 HTTP 协议从服务器向客户端实时传送流式数据的技术。它支持单向的、持久性的连接，由浏览器自动接收，不需要轮询，避免了繁琐的实时通信实现方式。
Server-sent Events 遵循 W3C 定义的规范，使用 EventSource 对象作为客户端的接收器，通过 onmessage 监听事件可以接收服务器推送的数据，同时还有 onopen 和 onerror 等事件用于处理连接的状态。
Server-sent Events 的数据格式是纯文本格式，与 JSON、XML 等多种数据格式相兼容。
Server-sent Events 的优点
去除了轮询
Ajax 和 WebSocket 实现实时通信通常需要轮询服务器，即客户端每隔一段时间就向服务器发出请求，然后更新页面上的数据。这种机制会增加服务器的负担和网络传输的开销等成本。而 Server-sent Events 技术可以实现数据的自动推送，去除了轮询机制，降低了成本和消耗，提高了应用程序的性能和效率。
支持错误恢复
Server-sent Events 使用的是持久性的连接，不会像 Ajax 请求那样会受到网络不稳定或其他错误的影响。即使连接中断或服务端重启，EventSource 对象会自动尝试重新连接并恢复数据传输，保证了程序数据的连续性。
支持 SSE Event 格式
Server-sent Events 中支持自定义 SSE Event 格式，方便服务端传输各种自定义格式的事件。而 SSE Event 格式是浏览器通过解析头部信息来解析每个事件的方法，支持诸如 Ticker Prices、News Feed、Chat Messages 等数据的传输。
与服务器技术融合
Server-sent Events 可以适用于各种类型的服务器端技术，如 PHP、NodeJS、Java、ASP.NET 等。不需要额外的组件和第三方软件安装就可以实现运行和部署，使得许多开发者可以快速部署和运行 SSE。
Server-sent Events 的应用
事件广播系统
Server-sent Events 在事件广播系统中有广泛的应用。例如，基于 Server-sent Events 实现的股票交易系统，可以将最新更新的股票价格及时推送给订阅该系统的用户，实时信息推送，便于用户及时掌握股票信息。
实时聊天系统
Server-sent Events 可以用于实现即时聊天系统。在聊天室中广播消息、用户加入或离开聊天室等事件都可以通过 SSE 事件传输到客户端并实时更新页面上的聊天内容。
博客和新闻的推送
Server-sent Events 可以用于将博客和新闻的内容实时推送给用户，用户不必刷新页面，就可以及时获得更新的文章和新闻，便于用户了解最新发展。
Server-sent Events 的示例代码
-- -------------------- ---- -------
--- ----------- - --- ------------------------ -- ----- ----------- ----------- --- --
--------------------- - --------------- - -- -- --------- -- --- --
------------------------ -- -- --- -----
--
------------------- - --------------- - -- -- ------- -- --- ------
-- ------------------------ -- ------------------- -
------------------- ---------- ----------
- ---- -
------------------- ---------- ---------
-
--<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: Server time: {$time}\n\n"; // 向客户端推送数据
flush();
?>上面的代码是一个简单的实现 SSE 的例子：
第一部分是客户端的 JavaScript 代码。在客户端创建 EventSource 对象，连接到服务器 SSE 路径。同时使用 onmessage 和 onerror 监听 SSE 事件，并根据事件状态做出相应的处理。
第二部分是一个简单的 SSE 服务器示例，使用 PHP 代码编写。其中头部信息包括 Content-Type 和 Cache-Control 的定义。在页面的内容中，将服务器的当前时间推送给客户端。每个 SSE 事件需要以 data: 开头，并以 \n\n 结束。
总结
Server-sent Events 技术可以实现自动数据推送，与服务端技术融合，具有较高的实时性以及很好的错误恢复能力，可以应用于实时数据、实时消息、实时推送等多种场景。此外，Server-sent Events 的协议规范定制也使得开发者在 SSE 应用上更加灵活多样。对于 Web 应用的，更好性能提升和更高效率的需求，Server-sent Events 是相当不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6459acb8968c7c53b0bc7520