SSE（Server-Sent Events)请求之EventSource

最新推荐文章于 2025-10-12 16:59:00 发布

原创最新推荐文章于 2025-10-12 16:59:00 发布 · 7.3k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #SSE #EvenctSource

文章介绍了Server-SentEvents(SSE)的概念、特点和如何在搜索接口中实现流式返回，以及EventSource的使用方法。对比了SSE与WebSocket在双向通信和应用场景上的区别。

前言

最近有个需求有个搜索接口需要支持流式和静态两种方法，这个接口的查询时间可能很长，完全等结果出来再返回前端对于用户体验不好，于是就想实现持续性返回以提高用户体验。于是学习一下SSE。

什么是SSE

SSE 是指 Server-Sent Events（服务器推送事件），是一种基于 HTTP 的、服务器向客户端单向推送数据的技术。它允许服务器实时发送数据到客户端，而不需要客户端明确地请求。SSE 主要用于实现服务器向客户端的实时更新，比如新闻更新、股票报价、实时监控等场景。
SSE 的优点在于其简单性和易用性，特别适用于那些需要服务器向客户端实时推送信息的场景。虽然它与 WebSocket 相比有一些限制（比如单向通信），但对于一些应用场景而言，SSE 是一个简单而有效的选择。

一些关键特点包括：

单向通信： SSE 使得服务器可以推送实时数据到客户端，但并不支持客户端向服务器发送数据。
基于标准的 HTTP/HTTPS： SSE 使用普通的 HTTP 或 HTTPS 协议。它与 WebSocket 不同，不需要专门的协议，可以通过常规的网络端口进行通信。
事件流： 服务器发送的数据是一系列事件流，每个事件都以一行文本的形式发送，使用特定的格式和字段（如 event、data、id 等），客户端接收到数据后可以解析并处理它们。
自动重连： SSE 具有自动重连机制，当连接中断时，浏览器会尝试重新建立连接，确保持续地接收服务器的事件流。

什么是EventSource

EventSource 是用于接收服务器端发送的服务器推送事件（Server-Sent Events，SSE）的接口。它允许客户端从服务器端获取实时更新，是一种基于 HTTP 的单向通信机制。

创建 EventSource 实例时，可以传入以下参数：

URL（字符串）： 指定服务器端点的 URL，从中接收 SSE 事件。
配置对象（可选）： 包含设置连接的属性，如请求头、withCredentials 等。

`EventSource` 方法和事件：

EventSource 实例属性：
- onopen： 事件连接建立时触发的回调函数。
- onmessage： 接收到来自服务器端的消息时触发的回调函数。
- onerror： 连接出错时触发的回调函数。
EventSource 实例方法：
- close()： 手动关闭 SSE 连接。当你想要终止连接时使用。
EventSource 实例 readyState 属性：
- CONNECTING： 表示连接正在建立。
- OPEN： 表示连接已经建立。
- CLOSED： 表示连接已经关闭。

创建 EventSource 实例的参数可以包括：

URL 字符串： 作为第一个参数传递，是必需的，用来指定发送 SSE 请求的服务器端点。
配置对象（可选）： 可以包含 headers（请求头）等属性，例如：

const eventSource = new EventSource('your_server_endpoint', {
    headers: {
        'Authorization': 'Bearer your_token'
        // 请求头其他信息
    },
    withCredentials: true // 是否发送凭据（比如Cookie）
});

eventSource.onopen = (event) => {
    // 连接建立时的操作
};

eventSource.onerror = (error) => {
    // 错误处理
};

eventSource.onmessage = (event) => {
    // 处理接收到的消息 event.data
};

使用示例

当使用 SSE 在前端实现搜索接口的流式展现时，可以创建一个事件流来接收来自服务器的数据，然后实时将数据展示在页面上。这里有一个简单的例子，假设有一个服务器端点 /search 用于接收搜索请求，并以 SSE 的方式返回搜索结果。

服务器端 SSE 设置（Node.js/Express 示例）：

const express = require('express');
const app = express();

// 配置接口
app.get('/search', (req, res) => {
    res.writeHead(200, {
        'Content-Type': 'text/event-stream',
        'Cache-Control': 'no-cache',
        'Connection': 'keep-alive'
    });

    // 模拟搜索结果
    const searchResults = ['Result 1', 'Result 2', 'Result 3', 'Final Result'];

    searchResults.forEach((result, index) => {
        // 模拟延迟以进行演示
        setTimeout(() => {
            res.write(`data: ${result}\n\n`);
            if (index === searchResults.length - 1) {
                res.end(); // 发送所有结果后关闭连接
            }
        }, 2000 * index); // 模拟发送结果，延迟 2 秒

    });
});

app.listen(3000, () => {
    console.log('Server running on port 3000');
});

这是一个简单的 Express 服务器，当接收到 /search 路径的请求时，会以 SSE 的方式发送模拟的搜索结果。

前端实现：

const eventSource = new EventSource('/search');

// 监听消息
eventSource.onmessage = (event) => {
    const searchResults = document.getElementById('searchResults');
    searchResults.innerHTML += event.data + '<br>'; // 展示数据
};

// 处理错误
eventSource.onerror = (error) => {
    console.error('SSE error:', error);
};