Jorgen's blog Jorgen's blog
首页
  • 平台架构
  • 混合式开发记录
  • 推送服务
  • 数据分析
  • 实时调度
  • 架构思想

    • 分布式
  • 编程框架工具

    • 编程语言
    • 框架
    • 开发工具
  • 数据存储与处理

    • 数据库
    • 大数据
  • 消息、缓存与搜索

    • 消息队列
    • 搜索与日志分析
  • 前端与跨端开发

    • 前端技术
    • Android
  • 系统与运维

    • 操作系统
    • 容器化与 DevOps
  • 物联网与安全

    • 通信协议
    • 安全
    • 云平台
newland
  • 关于我
  • 终身学习
  • 关于时间的感悟
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

jorgen

Love it, make mistakes, learn, keep grinding.
首页
  • 平台架构
  • 混合式开发记录
  • 推送服务
  • 数据分析
  • 实时调度
  • 架构思想

    • 分布式
  • 编程框架工具

    • 编程语言
    • 框架
    • 开发工具
  • 数据存储与处理

    • 数据库
    • 大数据
  • 消息、缓存与搜索

    • 消息队列
    • 搜索与日志分析
  • 前端与跨端开发

    • 前端技术
    • Android
  • 系统与运维

    • 操作系统
    • 容器化与 DevOps
  • 物联网与安全

    • 通信协议
    • 安全
    • 云平台
newland
  • 关于我
  • 终身学习
  • 关于时间的感悟
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • MQTT
  • WebSocket:构建实时双向通信的桥梁
  • HTTP/2-加速Web通信的新时代
  • HTTP/2-加速现代Web通信的引擎
  • HTTP/2-加速现代Web通信的新协议
  • HTTP/2与HTTP/3:现代Web协议的性能革命
  • HTTP/HTTPS-Web通信的基石
  • HTTP/HTTPS-万维网通信的基石
  • HTTP/HTTPS - 万维网通信的基础协议
  • HTTP Server-Sent Events - 服务器推送的简单实现方式
  • RESTful API - 现代Web服务的基石
  • SSE-服务器推送事件的轻量级解决方案
  • SSE-构建服务器推送的实时数据流
  • Server-Sent Events (SSE) - 轻量级服务器推送技术
    • 前言
    • SSE的工作原理
    • SSE vs WebSocket:一场优雅的较量
    • SSE实战:从零实现实时通知
      • 服务端实现 (Node.js)
      • 客户端实现
    • SSE的典型应用场景
    • 结语
  • WebRTC-构建点对点实时通信的利器
  • gRPC-构建高性能RPC服务的利器
  • 实时通信协议对比:WebSocket vs SSE vs gRPC
  • 服务器发送事件(SSE)- 简单高效的实时通信方案
  • 长轮询:在WebSocket时代之前实现实时通信的古老技艺
  • GraphQL-现代API查询语言的革命
  • QUIC协议:HTTP/3的新基石
  • API网关与服务网格-微服务架构的通信基石
  • WebSocket断线重连机制-构建健壮实时通信的关键
  • WebSocket安全:构建安全实时通信的关键考量
  • 消息队列-构建分布式系统的异步通信基石
  • WebSocket子协议-为实时通信定制应用层协议
  • Web通信协议全景图-从HTTP到WebTransport的选择指南
  • WebTransport-HTTP/3时代的下一代实时通信协议
  • 实时通信协议监控与故障排查-保障实时通信系统的稳定性
  • 移动端实时通信协议选择与优化指南
  • 实时通信协议的兼容性与降级策略-构建跨平台的健壮实时应用
  • protocol
Jorgen
2023-10-15
目录

Server-Sent Events (SSE) - 轻量级服务器推送技术

# 前言

在实时通信领域,我们熟悉了WebSocket的强大双向能力和MQTT在物联网场景的轻量级优势。但你是否想过,当只需要单向服务器到客户端的数据推送时,是否有更轻量的解决方案?今天我要介绍的就是常被忽略的"低调王者"——Server-Sent Events (SSE)。📡

提示

SSE是一种基于HTTP的服务器推送技术,让服务器能主动向客户端发送事件流,特别适合需要实时数据更新的场景。

# SSE的工作原理

SSE本质上是一种简单的单向通信模式,它通过以下机制实现:

  1. 持久连接:客户端发起HTTP请求后,服务器保持连接不关闭
  2. 事件流:服务器以text/event-stream格式发送数据
  3. 自动重连:客户端自动处理连接中断并尝试重连
// 客户端示例
const eventSource = new EventSource('/updates');
eventSource.onmessage = (event) => {
  console.log('新数据:', event.data);
};
eventSource.onerror = (err) => {
  console.error('连接错误:', err);
};
1
2
3
4
5
6
7
8

# SSE vs WebSocket:一场优雅的较量

特性 SSE WebSocket
通信方向 服务器→客户端 (单向) 双向通信
协议 纯HTTP 独立协议 (ws://)
自动重连 内置支持 需手动实现
二进制支持 ❌ 仅文本 ✅ 支持二进制
复杂度 低 高
浏览器兼容 现代浏览器广泛支持 需考虑兼容性

💡 我的经验:在需要实时数据展示(如股价更新、体育赛事)的场景中,SSE的简洁性往往比WebSocket的双向能力更实用。

# SSE实战:从零实现实时通知

# 服务端实现 (Node.js)

const http = require('http');

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

    // 模拟实时数据推送
    setInterval(() => {
      const data = JSON.stringify({
        timestamp: new Date().toISOString(),
        message: `实时消息 #${Math.floor(Math.random() * 100)}`
      });
      res.write(`data: ${data}\n\n`);
    }, 2000);
  }
});

server.listen(3000, () => {
  console.log('SSE服务器运行在 http://localhost:3000');
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 客户端实现

<div id="notifications"></div>

<script>
const eventSource = new EventSource('http://localhost:3000/events');
eventSource.onmessage = (event) => {
  const data = JSON.parse(event.data);
  const notification = document.createElement('div');
  notification.textContent = `[${data.timestamp}] ${data.message}`;
  document.getElementById('notifications').appendChild(notification);
};
</script>
1
2
3
4
5
6
7
8
9
10
11

# SSE的典型应用场景

  1. 实时仪表盘:数据可视化大屏的实时更新
  2. 通知系统:社交媒体动态、邮件提醒
  3. 新闻推送:突发新闻实时播报
  4. 协作工具:文档编辑状态同步
  5. 物联网监控:传感器数据流展示

THEOREM

当满足以下条件时,SSE是理想选择:

  • 仅需服务器→客户端的数据流
  • 数据格式以文本为主
  • 需要浏览器原生支持
  • 希望实现简单且自动重连

# 结语

在追求实时体验的今天,SSE以其简洁性、低开销和浏览器原生支持,为单向数据推送提供了优雅解决方案。🚀

虽然WebSocket在双向通信场景中无可替代,但在单向推送需求面前,SSE就像一把瑞士军刀——小巧却精准有力。下次当你需要实时数据展示时,不妨给SSE一个机会,它可能会让你惊喜于它的简单高效!

"最好的技术不是最复杂的,而是最适合场景的。" —— Jorgen的技术哲学


延伸阅读:

  • MDN SSE文档 (opens new window)
  • SSE vs WebSocket性能对比 (opens new window)
#SSE#实时通信#Web技术#服务器推送
上次更新: 2026/01/28, 15:36:58
SSE-构建服务器推送的实时数据流
WebRTC-构建点对点实时通信的利器

← SSE-构建服务器推送的实时数据流 WebRTC-构建点对点实时通信的利器→

最近更新
01
LLM
01-30
02
intro
01-30
03
intro
01-30
更多文章>
Theme by Vdoing | Copyright © 2019-2026 Jorgen | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式