在前端开发中，实现即时搜索提示是常见的需求。一般的做法是通过 AJAX 请求后端接口，然后将返回的数据渲染到页面上。但是这种做法有一个缺点，就是每次输入都需要向后端发送请求，造成了不必要的网络开销。而 Server-Sent Events（SSE）则提供了一种更加高效的实现方式。
什么是 Server-Sent Events
Server-Sent Events 是一种 HTML5 的 API，用于实现服务器向客户端推送事件。通过 SSE，服务器可以向客户端发送任意数量的消息，而客户端则可以通过 EventSource API 接收这些消息。SSE 的优点在于，它是基于 HTTP 协议的，可以利用现有的网络基础设施，而且它是单向的，只有服务器可以向客户端发送消息，客户端无法向服务器发送消息，这样可以避免一些安全问题。
如何使用 Server-Sent Events 实现即时搜索提示
在前端页面中，我们可以通过 JavaScript 来创建一个 EventSource 对象，然后指定一个 URL，用于接收服务器发送的消息。服务器可以在任何时候向这个 URL 发送消息，而客户端则可以通过 onmessage 事件来监听这些消息。下面是一个简单的示例代码：
----- ------ - --- ----------------------- ---------------- - --------------- - ----- ---- - ----------------------- -- ---------- --
在上面的代码中，我们创建了一个 EventSource 对象，并指定了一个 URL /search。服务器可以向这个 URL 发送消息，而客户端则可以通过 onmessage 事件来监听这些消息。当服务器发送消息时，客户端会自动触发 onmessage 事件，并将消息传递给事件处理函数。在事件处理函数中，我们可以处理服务器发送的消息。
在服务器端，我们需要监听客户端的请求，并在需要的时候向客户端发送消息。下面是一个 Node.js 的示例代码：
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
-- -------- --- ---------- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
----- ---- - - -- --------- -- --
---------------- ------------------------------
-- ------
- ---- -
-------------------
----------
-
---
--------------------在上面的代码中，我们创建了一个 HTTP 服务器，并监听客户端的请求。当客户端请求 /search URL 时，服务器会将响应的 Content-Type 设置为 text/event-stream，并将 Connection 设置为 keep-alive，这样客户端就可以保持长连接，等待服务器发送消息。然后，我们通过 setInterval 定时向客户端发送消息，每隔一秒发送一次。在发送消息时，我们需要将消息格式化成 SSE 的格式，即 data: ${data}\n\n，其中 ${data} 是需要发送的数据。
总结
Server-Sent Events 提供了一种更加高效的实现方式，可以避免每次输入都需要向后端发送请求的问题。通过 SSE，服务器可以向客户端发送任意数量的消息，而客户端则可以通过 EventSource API 接收这些消息。在实现即时搜索提示时，我们可以使用 SSE 来实现更加高效的方案。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c85648add4f0e0ff22d6d9