在现代 Web 应用程序中，即时通讯已经成为了一个必不可少的功能。然而，实现即时通讯并不是一件容易的事情，因为它需要实时地从服务器获取数据并将其推送到客户端。而传统的 AJAX 技术需要客户端不断地向服务器发送请求，这样会导致网络带宽的浪费和服务器资源的浪费。因此，我们需要一种更有效的技术来实现即时通讯，这就是 Server-Sent Events 技术。
什么是 Server-Sent Events？
Server-Sent Events（简称 SSE）是一种 HTML5 技术，它允许服务器向客户端发送一些事件流数据。这些数据可以是文本、JSON 或者 XML 格式的数据，它们都是通过 HTTP 连接实时传输的。SSE 技术与 WebSocket 技术类似，但是它们之间也有一些不同之处。WebSocket 是一种全双工协议，它允许服务器和客户端之间进行实时通信，而 SSE 技术只允许服务器向客户端发送数据，客户端无法向服务器发送数据。SSE 技术是基于 HTTP 协议的，因此它可以与现有的 Web 技术（如 PHP、Python 等）很好地配合使用。
如何使用 Server-Sent Events？
在使用 SSE 技术之前，我们需要先了解一些 SSE 的 API。在 JavaScript 中，我们可以使用 EventSource 对象来创建 SSE 连接。EventSource 对象有一个 URL 属性，表示 SSE 连接的 URL 地址。我们可以使用该属性来指定 SSE 连接的服务器地址。例如：
var source = new EventSource('/sse');上面的代码创建了一个 SSE 连接，它的 URL 地址是 /sse。当客户端与服务器建立 SSE 连接后，服务器就可以向客户端发送事件流数据了。
在服务器端，我们需要设置一些 HTTP 头信息，以便与客户端建立 SSE 连接。例如：
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
header('Connection: keep-alive');上面的代码设置了 HTTP 头信息，表示服务器将向客户端发送 text/event-stream 格式的数据，不使用缓存，保持连接不断开。
在服务器端，我们可以使用 PHP 来发送 SSE 数据。例如：
echo "data: Hello World!\n\n";
上面的代码表示向客户端发送一个名为 data 的事件，事件的数据是 Hello World!。
示例代码
下面是一个简单的 SSE 示例代码，它使用 PHP 来发送 SSE 数据：
-- -------------------- ---- ------- --------- ----- ------ ------ ------ ---------------- ------------------- -------------- ------- ------ ----- ------------------- --------- ----- ------ - --- -------------------- ------------------ - --------------- - ------ ------- - ----------- ----------------------------------------------- -- ------- - ------- ---- ---------- ------- -------
-- -------------------- ---- ------- ----- --------------------- -------------------- ---------------------- ----------- ------------------- ------------- ----- ------ - ----- ------ - - --------- - ------- --------- ---------- - --
上面的代码展示了一个简单的 SSE 示例，它每秒向客户端发送当前时间。客户端接收到数据后，将数据显示在页面上。
结论
Server-Sent Events 技术是一种非常有效的实现即时通讯的技术，它可以避免传统的 AJAX 技术中频繁发送请求的问题。使用 SSE 技术，我们可以轻松地实现实时更新数据的功能。虽然 SSE 技术与 WebSocket 技术有一些不同之处，但是它们都可以用来实现实时通讯的功能。在实际开发中，我们可以根据具体的需求选择合适的技术来实现即时通讯的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674685d9e504cb428eb6ac26