SSE介绍

最新推荐文章于 2025-11-13 13:39:52 发布
原创 最新推荐文章于 2025-11-13 13:39:52 发布 · 661 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #后端

什么是SSE

SSE 即 Server-Sent Events，允许服务端向客户端推送事件的技术，是一种单向数据推送的技术。

客户端通过这项技术可以与服务器建立持久连接，服务器可以持续发现事件流，但是客户端无法通过同一连接反向发送数据。

SSE 基于 HTTP 协议，而不是像 WebSocket 一样使用了一套独立的协议。SSE 利用 HTTP/1.1 的持久连接或 HTTP/2 的多路特性进行实现，不过相比 HTTP/1.1，HTTP/2 的最大连接数会大很多（HTTP/1.1 是6个，而 HTTP/2 默认是100个）。

对比轮询

轮询（Polling）是我们平时最常用的客户端向服务端周期性请求数据的手段。

轮询的优点就是实现简单，服务端无需做任何特殊处理，但是缺点也很明显，浪费资源，可能会增加服务器负载。

对比长轮询

长轮询（Long Polling）则是客户端在向服务器请求数据的时候，如果服务器的数据有更新或超时时才会有响应并关闭连接，客户端收到数据之后等到轮询周期到达再次发起请求，长轮询与轮询相比肯定是更高效的，不过缺点也很明显，就是请求的响应时间可能比较长，不可控。

对比WebSocket

WebSocket 是一个全双工的通讯协议，服务端和客户端能互相发送消息，但是服务端与客户端都需要支持 WebSocket 协议，所以实现相对复杂。

总结

综上所述，如果仅需服务端向客户端发送数据，且又要实现相对简单高效，那么最合适的就是用 SSE。

适合场景（高频、实时、小数据）：

  • 实时数据（股票行情、新闻、社交媒体动态等）推送
  • AI生成内容推送
  • 轻量级监控数据推送

实例

代码均由Trae生成

服务端代码

NodeJS 编写，package.json 的 type 字段设置为 module。

import http from 'http'; // 创建 HTTP 服务器 
const server = http.createServer((req, res) => { // 设置 CORS 头，允许跨域访问
    res.setHeader('Access-Control-Allow-Origin', '*'); 
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type'); 
    if (req.url === '/events') { // 设置 SSE 相关的响应头 
        res.writeHead(200, { 
            'Content-Type': 'text/event-stream', 
            'Cache-Control': 'no-cache', 
            'Connection': 'keep-alive' 
        }); // 发送初始连接消息 
        res.write(`data: ${JSON.stringify({message: '连接已建立'})}`); // 创建定时发送消息的间隔器 
        const intervalId = setInterval(() => { 
            const data = { 
                timestamp: Date.now(), 
                message: `服务器时间: ${new Date().toLocaleString()}` 
            }; 
            res.write(`data: ${JSON.stringify(data)}\n\n`); 
        }, 2000); // 监听连接关闭事件 
        req.on('close', () => { 
            clearInterval(intervalId); 
            console.log('客户端断开连接'); 
        }); 
    } else { // 对于其他请求返回 404 
        res.writeHead(404); 
        res.end(); 
    } 
}); 
const PORT = 3000; 
server.listen(PORT, () => { 
    console.log(`SSE 服务器运行在 http://localhost:${PORT}`); 
});

运行效果

node server SSE 
服务器运行在 http://localhost:3000

客户端代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SSE 测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 20px auto;
            padding: 0 20px;
        }
        .status {
            padding: 10px;
            margin-bottom: 20px;
            border-radius: 4px;
        }
        .connected {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .disconnected {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .message {
            padding: 10px;
            margin: 10px 0;
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
        }
        .timestamp {
            color: #6c757d;
            font-size: 0.85em;
        }
        .controls {
            margin: 20px 0;
            display: flex;
            gap: 10px;
        }
        button {
            padding: 8px 16px;
            border-radius: 4px;
            border: 1px solid #ccc;
            background-color: #fff;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        button:hover {
            background-color: #f8f9fa;
        }
        button.connect {
            color: #155724;
            border-color: #c3e6cb;
        }
        button.connect:hover {
            background-color: #d4edda;
        }
        button.disconnect {
            color: #721c24;
            border-color: #f5c6cb;
        }
        button.disconnect:hover {
            background-color: #f8d7da;
        }
    </style>
</head>
<body>
    <h1>SSE 实时消息</h1>
    <div id="connectionStatus" class="status disconnected">未连接</div>
    <div class="controls">
        <button id="connectButton" class="connect">连接服务器</button>
        <button id="disconnectButton" class="disconnect">断开连接</button>
    </div>
    <div id="messages"></div>

    <script>
        const messagesDiv = document.getElementById('messages');
        const statusDiv = document.getElementById('connectionStatus');
        const connectButton = document.getElementById('connectButton');
        const disconnectButton = document.getElementById('disconnectButton');
        let eventSource = null;

        function connect() {
            if (eventSource) {
                eventSource.close();
            }

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

            eventSource.onopen = function() {
                statusDiv.textContent = '已连接';
                statusDiv.className = 'status connected';
                connectButton.disabled = true;
                disconnectButton.disabled = false;
            };

            eventSource.onmessage = function(event) {
                const data = JSON.parse(event.data);
                const messageDiv = document.createElement('div');
                messageDiv.className = 'message';
                
                const timestamp = new Date(data.timestamp || Date.now()).toLocaleString();
                messageDiv.innerHTML = `
                    <div class="timestamp">${timestamp}</div>
                    <div class="content">${data.message}</div>
                `;
                
                messagesDiv.insertBefore(messageDiv, messagesDiv.firstChild);
            };

            eventSource.onerror = function() {
                statusDiv.textContent = '连接断开，请手动重新连接';
                statusDiv.className = 'status disconnected';
                connectButton.disabled = false;
                disconnectButton.disabled = true;
            };
        }

        function disconnect() {
            if (eventSource) {
                eventSource.close();
                eventSource = null;
                statusDiv.textContent = '已断开连接';
                statusDiv.className = 'status disconnected';
                connectButton.disabled = false;
                disconnectButton.disabled = true;
            }
        }

        // 绑定按钮事件
        connectButton.onclick = connect;
        disconnectButton.onclick = disconnect;

        // 初始状态设置
        disconnectButton.disabled = true;
    </script>
</body>
</html>

显示效果如下图所示：

浏览器Network收到消息如下图所示：

Web即时通信技术 -- SSE(Server Sent Event)
码农的历程
12-01 1万+
SSE是一种可以主动从服务端推送消息的技术。SSE的本质其实就是一个HTTP的长连接，只不过它给客户端发送的不是一次性的数据包，而是一个stream流，格式为text/event-stream。所以客户端不会关闭连接，会一直等着服务器发过来的新的数据流。 原理 SSE 使用 HTTP 协议，现有的服务器软件都支持。WebSocket 是一个独立协议。 SSE 属于轻量级，使用简单；WebSocket 协议相对复杂。 SSE 默认支持断线重连，WebSocket 需要自己实现。 SSE 一般只用来传
服务端实时推送技术之SSE（Server-Send Events）
热门推荐
持之以恒
04-28 4万+
服务端推送，也称为消息推送或通知推送，是一种允许应用服务器主动将信息发送到客户端的能力，为客户端提供了实时的信息更新和通知，增强了用户体验。
SSE详解
最新发布
跟佟格码路一起学习计算机知识吧~
11-13 1179
SSE（Server-Sent Events，服务端推送事件）是一种基于HTTP 协议的服务器到客户端的单向实时通信技术。它允许服务端主动将数据“推送”到客户端，而客户端通过简单的 JavaScript API（）即可接收这些数据流。id: 123data: 系统即将维护，请保存工作\n\n适用 ✅不适用 ❌服务端需要主动、实时推送数据到客户端需要客户端向服务端发送消息（双向通信）消息是文本类型，比如通知、公告、日志、状态更新需要传输二进制数据（如文件、音视频流）希望使用。
WebSocket 和SSE的区别以及优缺点
weixin_43867229的博客
03-19 4405
WebSocket 和 Server-Sent Events（SSE）都是用于：WebSocket 是全双工的，这意味着服务器和客户端可以同时发送和接收消息。而 SSE 是单向的，只允许服务器发送消息到客户端。：WebSocket 可以发送任何类型的数据，包括文本和二进制数据。而 SSE 只能发送文本数据。：WebSocket 连接一旦建立，就会保持打开状态，直到客户端或服务器主动关闭它。而 SSE 连接在每次消息发送完毕后都会被关闭，然后客户端需要重新连接。
深入浅出计算机网络：什么是SSE
Ethan_199402的博客
08-26 2870
ChatGPT怎么做到回答时一个一个字的吐到前端界面？
SSE
lettyisme的博客
03-23 1958
参考网址：https://www.v2ex.com/t/379577SSE （ Server-sent Events ）是 WebSocket 的一种轻量代替方案，使用 HTTP 协议。严格地说，HTTP 协议是没有办法做服务器推送的，但是当服务器向客户端声明接下来要发送流信息时，客户端就会保持连接打开，SSE 使用的就是这种原理。SSE 能做什么理论上， SSE 和 WebSocket 做的是同...
SSE介绍及使用文档
12-06
SSE的介绍及其使用文档，里边介绍了sse相关运算的相关函数及数据操作
web实时通讯方法轮询、webSocket、SSE介绍
Smile_666666的博客
02-07 1280
服务端推送，也称为消息推送或通知推送，是一种允许应用服务器主动将信息发送到客户端的能力，为客户端提供了实时的信息更新和通知，增强了用户体验。在日常的场景中微信消息通知栏、首页广告推送等等。一般服务器向前端页面实时推送数据一般有三种方法：轮询、webSocket、SSE。
服务端发送事件SSE 功能介绍，使用场景，完整示例演示(java)
bsklhao的博客
06-24 1125
是一种基于 HTTP 协议的轻量级单向通信技术，支持服务器主动向客户端推送实时数据流，无需客户端频繁轮询。单向数据流：仅服务器向客户端推送数据，适用于实时更新场景（如股票行情）。长连接维护：通过保持持久连接，支持长时间连续推送。自动重连：若连接中断，客户端会自动尝试重新连接。低延迟：相比轮询更高效，减少网络开销。简单易用：基于标准 HTTP，无需复杂握手协议。
全栈杂谈第12期：双向通信框架SSE介绍
m0_46580983的博客
12-31 2302
SSE 是一种基于 HTTP 协议的技术，允许服务器通过持久化连接将事件流数据推送到浏览器端。它是由 HTML5 中的 EventSource API 提供支持的。
精选资源
sse avx 汇编指令介绍.docx
06-09
本文旨在详细介绍SSE与AVX这两种重要的汇编指令集，探讨它们的技术特性、差异以及应用场景。 #### 二、SSE与AVX技术概述 ##### 1. SSE技术 SSE（Streaming SIMD Extensions）是Intel公司在1999年推出的一种SIMD...
SSE入门
Expressing Youself Using Code
12-31 2万+
我们将在本文中介绍如何在C++/C中使用SSE指令。我的目的不是用SSE写尽可能快的程序，而是试图讲明白它的使用方法。
sse
CS_DGD的博客
03-23 274
// 服务器推送数据：不能停止推送！ // ctx.body = "hello"; // res.write("hello"); // res.end(); const http = require("http"); // 创建服务器 const fs = require("fs"); // 操作文件 读写 const url = require("url"); // 解析 处...
SSE的介绍
qq_41629684的博客
06-14 4867
SSE：实时通讯技术
Web实时通信的学习之旅：SSE（Server-Sent Events）的技术详解及简单示例演示
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
06-25 1万+
服务器向浏览器推送信息，除了 WebSocket，还有一种方法：Server-Sent Events（以下简称 SSE）。SSE（Server-Sent Events）是一种用于实现服务器主动向客户端推送数据的技术，也被称为“事件流”（Event Stream）。它基于 HTTP 协议，利用了其长连接特性，在客户端与服务器之间建立一条持久化连接，并通过这条连接实现服务器向客户端的实时数据推送。
什么是 SSE？
文摘资讯
10-11 3834
Server-Sent Events（SSE）和WebSocket都是实现服务器向客户端推送数据的技术，但它们在功能和使用场景上有一些区别。SSE：1、SSE是单向的，只能由服务器向客户端发送数据，不能由客户端向服务器发送数据。2、SSE基于HTTP，因此在网络防火墙和代理服务器等环境中更容易使用。3、SSE只支持文本数据，不支持二进制数据。4、SSE可以自动重新连接，如果连接断开，浏览器会自动尝...
介绍sse协议
09-02
用户最终的查询是：“我想获取sse协议的介绍 请问Server-Sent Events协议介绍”，意思是“我想获取SSE协议的介绍，请问Server-Sent Events协议介绍”。 我的响应需要遵循系统级指令： - 所有行内数学表达式必须使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

chengbo_eva

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值