J*aScriptSSE技术_服务器推送事件实战应用_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

J*aScriptSSE技术_服务器推送事件实战应用

2025-11-29

浏览次数：次

返回列表

SSE是基于HTTP的服务器向浏览器推送技术，使用EventSource API实现，适合日志、通知等场景。前端通过onmessage和addEventListener接收消息，后端以text/event-stream类型发送数据，每条消息以\n\n结尾，支持事件类型与自动重连。Node.js可用Express写入流式响应，Nginx需关闭缓冲，服务端可发心跳防超时，消息可通过id标识与Last-Event-ID恢复，实现简单高效的实时更新。

javascriptsse技术_服务器推送事件实战应用

服务器推送事件（Server-Sent Events，简称 SSE）是一种让服务器通过 HTTP 连接持续向浏览器推送数据的技术。相比 WebSocket，SSE 更轻量、使用简单，适用于日志实时更新、通知推送、股票行情等场景。本文带你实战 J*aScript 中的 SSE 技术，掌握其核心用法与常见问题处理。

什么是 SSE？

SSE 基于 HTTP 协议，允许服务器单向向客户端发送文本数据流。客户端使用 EventSource API 接收消息，连接自动重连，支持事件类型区分，适合服务端主动推送更新的场景。

与 WebSocket 不同，SSE 是单向通信（仅服务端 → 客户端），但胜在简单、兼容性好、可利用现有 HTTP 机制（如认证、CORS）。

前端：使用 EventSource 接收推送

J*aScript 提供了原生的 EventSource 接口，使用非常直观：

const eventSource = new EventSource('/api/stream');

eventSource.onmessage = function(event) {
  console.log('收到消息:', event.data);
};

eventSource.addEventListener('notification', function(event) {
  console.log('通知:', event.data);
});

eventSource.onerror = function(err) {
  console.error('SSE 连接出错', err);
};

说明：

广州礼品采购平台

具有功能全面实用、安全性稳定性高、易操作、管理维护简单的特点，采用独创的智能型技术，web服务器、数据库和应用程序全部自动傻瓜安装配置。管理员可以为客户推荐产品和更新所推荐的礼品商品。本系统比较适合做礼品商品。界面简洁大方。后台管理方便，分类可以无限级别。产品添加简单。

0 查看详情广州礼品采购平台

onmessage：监听默认消息（无指定事件类型）
addEventListener：监听自定义事件类型，如 'notification'
onerror：错误处理，连接断开会自动尝试重连

后端：Node.js 实现 SSE 接口

以 Express 为例，实现一个简单的 SSE 接口：


app.get('/api/stream', (req, res) => {
  // 设置响应头
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive',
    'Access-Control-Allow-Origin': '*'
  });

  // 发送一条普通消息
  res.write('data: 欢迎连接到 SSE 服务\n\n');

  // 定时推送时间
  const interval = setInterval(() => {
    res.write(`data: ${new Date().toLocaleTimeString()}\n\n`);
  }, 1000);

  // 自定义事件推送
  setInterval(() => {
    res.write('event: notification\n');
    res.write('data: 系统有新消息提醒\n\n');
  }, 5000);

  // 客户端断开时清理
  req.on('close', () => {
    clearInterval(interval);
    res.end();
  });
});