Web实时通信的学习之旅:SSE(Server-Sent Events)的技术详解及简单示例演示

简介: Web实时通信的学习之旅:SSE(Server-Sent Events)的技术详解及简单示例演示

一、什么是SSE

服务器向浏览器推送信息,除了 WebSocket,还有一种方法:Server-Sent Events(以下简称 SSE)。


SSE(Server-Sent Events)是一种用于实现服务器主动向客户端推送数据的技术,也被称为“事件流”(Event Stream)。它基于 HTTP 协议,利用了其长连接特性,在客户端与服务器之间建立一条持久化连接,并通过这条连接实现服务器向客户端的实时数据推送。


SSE 是HTML5规范的一部分,该规范非常简单,主要由两部分组成:第一部分是服务端与浏览器端的通讯协议(Http协议),第二部分是浏览器端可供JavaScript使用的EventSource对象。


严格意义上来说,Http协议是无法做到服务器主动想浏览器发送协议,但是可以变通下,服务器向客户端发起一个声明,我下面发送的内容将是 text/event-stream 格式的,这个时候浏览器就知道了。响应文本内容是一个持续的数据流,每个数据流由不同的事件组成,并且每个事件可以有一个可选的标识符,不同事件内容之间只能通过回车符\r 和换行符\n来分隔,每个事件可以由多行组成。目前除了IE和Edge,其他浏览器均支持。


二、SSE技术的基本原理

客户端向服务器发送一个GET请求,带有指定的header,表示可以接收事件流类型,并禁用任何的事件缓存。


服务器返回一个响应,带有指定的header,表示事件的媒体类型和编码,以及使用分块传输编码(chunked)来流式传输动态生成的内容。


服务器在有数据更新时,向客户端发送一个或多个名称:值字段组成的事件,由单个换行符分隔。事件之间由两个换行符分隔。服务器可以发送事件数据、事件类型、事件ID和重试时间等字段。


客户端使用EventSource接口来创建一个对象,打开连接,并订阅onopen、onmessage和onerror等事件处理程序来处理连接状态和接收消息。


客户端可以使用GET查询参数来传递数据给服务器,也可以使用close方法来关闭连接。


三、SSE适用于场景

SSE适用场景是指服务器向客户端实时推送数据的场景,例如:

  • 股票价格更新:服务器可以根据股市的变化,实时地将股票价格推送给客户端,让客户端能够及时了解股票的走势和行情。
  • 新闻实时推送:服务器可以根据新闻的更新,实时地将新闻内容或标题推送给客户端,让客户端能够及时了解最新的新闻动态和信息。
  • 在线聊天:服务器可以根据用户的发送,实时地将聊天消息推送给客户端,让客户端能够及时收到和回复消息。
  • 实时监控:服务器可以根据设备的状态,实时地将监控数据或报警信息推送给客户端,让客户端能够及时了解设备的运行情况和异常情况。

SSE适用场景的特点是:

  • 数据更新频繁:服务器需要不断地将最新的数据推送给客户端,保持数据的实时性和准确性。
  • 低延迟:服务器需要尽快地将数据推送给客户端,避免数据的延迟和过期。
  • 单向通信:服务器只需要向客户端推送数据,而不需要接收客户端的数据。

chatGPT 返回的数据 就是使用的SSE 技术

实时数据大屏 如果只是需要展示 实时的数据可以使用SSE技术 而不是非要使用webSocket


四、Node服务端示例

EventSource这个api是一个用于接收服务器发送事件(Server-Sent Events,SSE)的Web API接口。服务器发送事件是一种让服务器端能够主动向客户端发送数据的技术,它使用HTTP协议,并且遵循一定的格式。

1、协议

SSE 协议非常简单,正常的Http请求,更改请起头相关配置即可

Content-Type: text/event-stream,utf-8
Cache-Control: no-cache
Connection: keep-alive
2、格式

文本流基础格式如下,以行为单位的,以冒号分割 Field 和 Value,每行结尾为 \n,每行会Trim掉前后空字符,因此 \r\n 也可以。

每一次发送的信息,由若干个message组成,每个message之间用\n\n分隔。每个message内部由若干行组成,每一行都是如下格式。

field: value\n
field: value\r\n

Field是有5个固定的name

data     // 数据内容
event    // 事件
id       // 数据标识符用id字段表示,相当于每一条数据的编号
retry    // 重试,服务器可以用retry字段,指定浏览器重新发起连接的时间间隔
:        //冒号开头是比较特殊的,表示注释
3、事件

每个事件之间通过空行来分隔。对于每一行来说,冒号(“:”)前面表示的是该行的类型,冒号后面则是对应的值。可能的类型包括:

  • 类型为空白,表示该行是注释,会在处理时被忽略。
  • 类型为 data,表示该行包含的是数据。以 data 开头的行可以出现多次。所有这些行都是该事件的数据。
  • 类型为 event,表示该行用来声明事件的类型。浏览器在收到数据时,会产生对应类型的事件。
  • 类型为 id,表示该行用来声明事件的标识符。
  • 类型为 retry,表示该行用来声明浏览器在连接断开之后进行再次连接之前的等待时间。
3.1、事件

事件之间用\n\n隔断,一般一个事件一行,也可以多行

# 一个事件一行
data: message\n\n
data: message2\n\n


# 一个事件多行
data: {\n
data: "name": "zhangsan",\n
data: "age", 25\n
data: }\n\n

# 自定义事件
event: foo\n   // 自定义事件,名称 foo,触发客户端的foo监听事件
data: a foo event\n\n // 内容

data: an unnamed event\n\n // 默认事件,未指定事件名称,触发客户端 onmessage 事件

event: bar\n   // 自定义时间,名称 bar,触发客户端bar监听事件
data: a bar event\n\n // 内容

3.2、事件唯一标识符

每个事件可以指定一个ID,浏览器会跟踪事件ID,如果发生了重连,浏览器会把最近接收到的时间ID放到 HTTP Header Last-Event-ID 中,作为一种简单的同步机制。

id: eef0128b-48b9-44f7-bbc6-9cc90d32ac4f\n
data: message\n\n
3.3、重连事件

中断连接,客户端一般会3秒重连,但是服务端也可以配置

retry: 10000\n
4、具体示例

在Node.js中使用Server-Sent Events(SSE),你可以创建一个HTTP服务器,并使用res对象的write方法来向客户端发送持久的流信息。

const http = require('http');

const server = http.createServer((req, res) => {
    // 对于SSE请求,需要设置正确的Content-Type和Cache-Control
    // 设置Content-Type头为text/event-stream,这是SSE所需的。
    // 设置Cache-Control头为no-cache,这将防止客户端缓存事件流。
    // 使用Connection: keep-alive,这将保持连接打开,直到服务器明确地关闭连接。
    res.writeHead(200, {
        'Content-Type': 'text/event-stream',
        'Cache-Control': 'no-cache',
        'Connection': 'keep-alive',
        'Access-Control-Allow-Credentials': true,
        'Access-Control-Allow-Origin': '*'
    });

    // 每隔一定时间发送一次消息
    // 使用res.write()方法将新的数据发送到客户端。
    // 我们在数据前添加了data:前缀,这是SSE事件流所需的。
    // 最后,我们在每个事件之间添加了一个空行\n\n,这是SSE事件流规范要求的,以便客户端可以正确解析事件流
    setInterval(() => {
        const data = `data: ${new Date().toISOString()}\n\n`;
        res.write(data);
    }, 1000);

    // 当客户端断开连接时,清理资源
    req.on('close', () => {
        clearInterval(); // 清除定时器
        res.end(); // 结束响应
    });
});

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

我们创建了一个简单的HTTP服务器,监听3000端口。对于每个到来的请求,我们设置适当的响应头,并开始向客户端发送事件。我们使用setInterval每秒发送一个包含当前日期和时间的事件。当客户端断开连接时,我们清除定时器并结束响应。这样,你就可以在Node.js中使用SSE向客户端推送实时数据了。


五、客户端示例

1、检测客户端是否支持SSE
function supportsSSE() {
  return !!window.EventSource;
}
2、创建客户端连接

客户端实现就比较简单了,实例化一个EventSource对象,url 可以和服务端同域,也可以跨域,如果跨域的话,需要指定第二个参数withCredentials:true,表示发送Cookie到服务端

//创建一个EventSource对象,用于从sse.php页面接收事件
const evtSource = new EventSource("http://localhost:3000");
3、事件监听

事件源连接后会发送 “open” 事件,可以通过以下两种方式监听

# 方式一:
source.onopen = function(event) {
  // handle open event
};

## 方式二:
source.addEventListener("open", function(event) {
  // handle open event
}, false);

4、接收事件

接收事件同样和上面同样有两种方式。浏览器会自动把一个消息中的多个分段拼接成一个完整的字符串,因此,可以轻松地在这里使用 JSON 序列化和反序列化处理。

# 方式一:
source.onmessage = function(event) {
  var data = event.data;
  var lastEventId = event.lastEventId;
  // handle message
};

## 方式二:
source.addEventListener("message", function(event) { 
  var data = event.data;
  var lastEventId = event.lastEventId;
  // handle message }, false);
5、自定义事件

默认情况下,服务器发送过来的消息,都是默认事件格式的数据,这个时候都会触发onmessage,如果后端自定义事件的话,则不会触发onmessage,这个是否我们需要添加对应的监听事件

source.addEventListener('foo', function (event) {
  var data = event.data;
  // handle message
}, false);
6、错误处理
# 方式一:
source.onerror = function(event) {
  // handle error event
};

## 方式二:
source.addEventListener("error", function(event) {
  // handle error event
}, false);

7、主动断开连接
source.close()
8、具体示例
// 先判断当前浏览器是否支持EventSource事件
if (typeof(EventSource) !== "undefined") {
  // 用JavaScript创建了一个新的EventSource对象,它将从服务器端的/test/server-sent-events路由接收事件流
  const source = new EventSource('/test/server-sent-events', {
    withCredentials: true
  });
  
  每当服务器发送新的事件时,source.onmessage事件处理程序将运行,我们将事件数据解析为JSON对象
  source.onmessage = (event) => {
     const data = JSON.parse(event.data)
     console.log(data)
  }
  
  // close方法用于关闭 SSE 连接。
  source.close();
 
} else {
  console.log('不支持 EventSource')
}


六、注意事项

1、nginx配置
  • 使用nginx做反向代理时需要将proxy_buffering关闭
proxy_buffering off
  • 或者加上响应头部x-accel-buffering,这样nginx就不会给后端响应数据加buffer
x-accel-buffering: no
2、EventSource
  • 连接关闭后会自动重连
  • 需要显示的调用close方法
目录
相关文章
|
6天前
|
编解码 Java 程序员
写代码还有专业的编程显示器?
写代码已经十个年头了, 一直都是习惯直接用一台Mac电脑写代码 偶尔接一个显示器, 但是可能因为公司配的显示器不怎么样, 还要接转接头 搞得桌面杂乱无章,分辨率也低,感觉屏幕还是Mac自带的看着舒服
|
8天前
|
存储 缓存 关系型数据库
MySQL事务日志-Redo Log工作原理分析
事务的隔离性和原子性分别通过锁和事务日志实现,而持久性则依赖于事务日志中的`Redo Log`。在MySQL中,`Redo Log`确保已提交事务的数据能持久保存,即使系统崩溃也能通过重做日志恢复数据。其工作原理是记录数据在内存中的更改,待事务提交时写入磁盘。此外,`Redo Log`采用简单的物理日志格式和高效的顺序IO,确保快速提交。通过不同的落盘策略,可在性能和安全性之间做出权衡。
1562 10
|
1月前
|
弹性计算 人工智能 架构师
阿里云携手Altair共拓云上工业仿真新机遇
2024年9月12日,「2024 Altair 技术大会杭州站」成功召开,阿里云弹性计算产品运营与生态负责人何川,与Altair中国技术总监赵阳在会上联合发布了最新的“云上CAE一体机”。
阿里云携手Altair共拓云上工业仿真新机遇
|
11天前
|
人工智能 Rust Java
10月更文挑战赛火热启动,坚持热爱坚持创作!
开发者社区10月更文挑战,寻找热爱技术内容创作的你,欢迎来创作!
738 27
|
8天前
|
存储 SQL 关系型数据库
彻底搞懂InnoDB的MVCC多版本并发控制
本文详细介绍了InnoDB存储引擎中的两种并发控制方法:MVCC(多版本并发控制)和LBCC(基于锁的并发控制)。MVCC通过记录版本信息和使用快照读取机制,实现了高并发下的读写操作,而LBCC则通过加锁机制控制并发访问。文章深入探讨了MVCC的工作原理,包括插入、删除、修改流程及查询过程中的快照读取机制。通过多个案例演示了不同隔离级别下MVCC的具体表现,并解释了事务ID的分配和管理方式。最后,对比了四种隔离级别的性能特点,帮助读者理解如何根据具体需求选择合适的隔离级别以优化数据库性能。
225 3
|
14天前
|
Linux 虚拟化 开发者
一键将CentOs的yum源更换为国内阿里yum源
一键将CentOs的yum源更换为国内阿里yum源
779 5
|
2天前
|
Python
【10月更文挑战第10天】「Mac上学Python 19」小学奥数篇5 - 圆和矩形的面积计算
本篇将通过 Python 和 Cangjie 双语解决简单的几何问题:计算圆的面积和矩形的面积。通过这道题,学生将掌握如何使用公式解决几何问题,并学会用编程实现数学公式。
108 60
|
1天前
|
人工智能
云端问道12期-构建基于Elasticsearch的企业级AI搜索应用陪跑班获奖名单公布啦!
云端问道12期-构建基于Elasticsearch的企业级AI搜索应用陪跑班获奖名单公布啦!
115 1
|
3天前
|
Java 开发者
【编程进阶知识】《Java 文件复制魔法:FileReader/FileWriter 的奇妙之旅》
本文深入探讨了如何使用 Java 中的 FileReader 和 FileWriter 进行文件复制操作,包括按字符和字符数组复制。通过详细讲解、代码示例和流程图,帮助读者掌握这一重要技能,提升 Java 编程能力。适合初学者和进阶开发者阅读。
104 61
|
14天前
|
JSON 自然语言处理 数据管理
阿里云百炼产品月刊【2024年9月】
阿里云百炼产品月刊【2024年9月】,涵盖本月产品和功能发布、活动,应用实践等内容,帮助您快速了解阿里云百炼产品的最新动态。
阿里云百炼产品月刊【2024年9月】