在前端开发中，实时检索是一项常见的功能需求。通常情况下，我们会使用 AJAX 或 WebSocket 来实现实时检索。但是，这些技术都有一些局限性，比如 AJAX 需要不断轮询服务器，WebSocket 则需要建立长连接，而且需要服务器端支持。这些限制使得实时检索变得复杂和低效。
在本文中，我们将介绍一种新的技术：Server-Sent Events（简称 SSE）。SSE 是一种基于 HTTP 的服务器推送技术，可以让服务器实时向客户端推送数据，而且不需要建立长连接。本文将详细介绍 SSE 的原理和使用方法，并提供示例代码供读者参考。
SSE 的原理
SSE 基于 HTTP 协议，使用的是 HTTP 的长连接机制，也就是说，客户端在向服务器请求数据时，服务器会保持连接处于打开状态，而不是像普通的 HTTP 请求那样立即返回数据并关闭连接。这种长连接的状态使得服务器可以随时向客户端发送数据，而客户端只需要等待服务器的数据即可。
SSE 的数据格式是文本格式（text/event-stream），每条数据都是一条文本消息，格式如下：
------ ------------ ----- ------------ --- ---------- ------ ------------
其中，event 字段表示事件名称，data 字段表示事件数据，id 字段表示事件 ID，retry 字段表示重试时间（如果连接中断，客户端会在 retry 毫秒后自动重新连接）。
服务器端可以使用如下的 PHP 代码向客户端发送 SSE 数据：
--------------------- -------------------- ---------------------- ----------- ----- - ------- -------- ---- ------ ----------- --------
在客户端代码中，我们可以使用 EventSource 对象来接收 SSE 数据。EventSource 对象是 HTML5 标准中的一部分，可以在所有现代浏览器中使用。下面是一个简单的示例：
----- ------ - --- ------------------------ ---------------- - --------------- - ------------------------ --
上面的代码中，我们创建了一个 EventSource 对象，并指定了 SSE 数据源的 URL。然后，我们监听 message 事件，当服务器向客户端发送数据时，onmessage 回调函数就会被调用，我们可以在这个函数中处理接收到的数据。
SSE 的使用方法
下面我们来介绍 SSE 的具体使用方法。假设我们有一个搜索框，当用户输入关键字时，我们要实时向服务器发送请求，并将服务器返回的结果显示在页面上。使用 SSE 可以轻松实现这个功能。
首先，我们需要在服务器端编写 SSE 接口，代码如下：
--------------------- -------------------- ---------------------- ----------- --------- - ------------------ -------- - ------------------ ------- --------- -- -------- - ---- ------ ------------- -------- -
上面的代码中，我们从 URL 中获取关键字参数 keywords，然后调用 search 函数进行搜索，并将搜索结果逐条发送给客户端。
在客户端代码中，我们需要监听搜索框的 input 事件，当用户输入关键字时，向服务器发送 SSE 请求，并将服务器返回的结果显示在页面上。代码如下：
----- ------ - --- ----------------------------------- - ------------------------------ ---------------- - --------------- - ----- ------ - ----------- -- ------ --
上面的代码中，我们使用 encodeURIComponent 函数将关键字编码后作为 URL 参数发送 SSE 请求。然后，我们监听 SSE 的 message 事件，当服务器返回数据时，将搜索结果显示在页面上。
SSE 的指导意义
SSE 技术可以帮助我们实现实时检索等常见的功能需求，而且相比于 AJAX 和 WebSocket，它更加简单和高效。使用 SSE 可以避免不必要的轮询和长连接，提高了代码的可维护性和性能。
当然，SSE 也有一些局限性，比如它只能发送文本消息，不支持二进制数据；它需要保持长连接，如果连接中断，客户端需要自动重连；它不支持双向通信，只能由服务器向客户端发送数据。但是，对于一些简单的功能需求，SSE 技术是一个很好的选择。
总结
本文介绍了 Server-Sent Events（SSE）技术的原理和使用方法，并提供了示例代码供读者参考。SSE 技术可以帮助我们实现实时检索等常见的功能需求，而且相比于 AJAX 和 WebSocket，它更加简单和高效。希望本文能对读者有所启发，让大家更好地应用 SSE 技术。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65fd25b6d10417a22287d364