SSE 技术实现即时搜索功能-JavaScript中文网-JavaScript教程资源分享门户

在 Web 开发中，实现即时搜索功能是非常常见的需求，它可以让用户更加方便快捷地查询所需信息。传统的实现方式是通过 Ajax 定时轮询服务器，但这种方式会增加服务器负担，并且无法实现真正的实时搜索。而 SSE（Server-Sent Events）技术则可以很好地解决这个问题。

SSE 简介

SSE 是一种基于 HTTP 的服务器推送技术，它允许服务器向客户端发送事件流，客户端通过 EventSource API 接收这些事件流。相比传统的 Ajax 定时轮询，SSE 更加高效、实时、稳定。

SSE 协议定义了一种简单的文本格式，每个事件流包含一个或多个事件，每个事件由以下三部分组成：

event: 事件名称
data: 事件数据
id: 事件 ID

其中，事件名称和事件数据是必须的，事件 ID 是可选的。事件名称用于标识事件类型，事件数据用于传递具体的信息。事件 ID 可以用于实现断点续传等功能。

SSE 的使用

使用 SSE 实现即时搜索功能的步骤如下：

在服务器端实现 SSE 接口，生成事件流。
在客户端使用 EventSource API 接收事件流。
在客户端监听事件流，并根据接收到的事件更新搜索结果。

下面是一个示例代码，演示如何使用 SSE 实现即时搜索功能。

服务器端代码（Node.js）

// javascriptcn.com 代码示例
const http = require('http');

http.createServer((req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });

  const search = (query) => {
    // 搜索逻辑
    return results;
  };

  const sendResult = (query) => {
    const results = search(query);
    res.write(`event: search\ndata: ${JSON.stringify(results)}\n\n`);
  };

  req.on('data', (chunk) => {
    const query = chunk.toString().trim();
    sendResult(query);
  });
}).listen(3000);

在上面的代码中，我们创建了一个 HTTP 服务器，将响应头的 Content-Type 设置为 text/event-stream，表示返回的是 SSE 事件流。然后定义了一个 search 函数，用于根据搜索关键字获取搜索结果。在 req.on('data') 的回调函数中，我们接收客户端发送的搜索关键字，调用 sendResult 函数发送事件流。

客户端代码

// javascriptcn.com 代码示例
const searchInput = document.querySelector('#search-input');
const searchResult = document.querySelector('#search-result');

const eventSource = new EventSource('http://localhost:3000');

eventSource.addEventListener('search', (event) => {
  const results = JSON.parse(event.data);
  updateSearchResult(results);
});

searchInput.addEventListener('input', (event) => {
  const query = event.target.value.trim();
  eventSource.send(query);
});

const updateSearchResult = (results) => {
  searchResult.innerHTML = '';
  results.forEach((result) => {
    const li = document.createElement('li');
    li.textContent = result;
    searchResult.appendChild(li);
  });
};

在客户端代码中，我们首先创建了一个 EventSource 对象，指定 SSE 事件流的 URL。然后在 eventSource.addEventListener('search') 的回调函数中，接收到 search 事件后调用 updateSearchResult 函数更新搜索结果。在 searchInput.addEventListener('input') 的回调函数中，获取搜索关键字并发送给服务器。

总结

SSE 技术可以很好地实现即时搜索功能，它比传统的 Ajax 定时轮询更加高效、实时、稳定。我们可以通过 Node.js 的 http 模块实现 SSE 接口，在客户端使用 EventSource API 接收事件流，从而实现即时搜索功能。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/65080ace95b1f8cacd33482a