SSE (Server-Send Events)推送消息实践

SSE (Server-Send Events)推送消息实践

消息推送常见有 MQTT/Websocket/GRPC 等等

SSE(Server-Send Events)

SSE 是一种在基于浏览器的 Web 应用程序中仅从服务器向客户端发送文本消息的技术。SSE 基于 HTTP 协议中的持久连接, 具有由 W3C 标准化的网络协议和 EventSource 客户端接口,作为 HTML5 标准套件的一部分。

echo 框架 sse https://echo.labstack.com/docs/cookbook/sse

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
如上图所示,客户端可以在请求时触发订阅主题,服务端即可后续持续推送订阅的数据。

项目实践

在和第三方对接时需要把我这边设备的实时数据给到他们,因为设备比较少,于是

提出方案 1:第三方提供 http 接口我这边发送
1. 第三方觉得可行,提出http数据通过sha256的进行签名,他们会对数据进行验签,目的是为了安全性
2. 我方考虑安全性这个事情,如果通过sha256的签名实施就变成定制开发,对接下一个第三方时没法复用本方案,于是提出希望对方提供ssl证书,这样同样可以加密数据保证安全,对方http验证客户端证书就可以的
3. 第三方收到这个诉求后,反馈他们服务网关没法做这个事情,囧

提出方案 2:第三方提供 kafka 之类的,我方推送数据过去,第三方反馈没得这些,囧

考虑到对方好像有很多限制,但是又不想第三方连接我们内部的 kafka、mqtt 之类的,之前看过 Uber 的 sse 技术方案,考虑到我们这个场景感觉也很合适

提出方案 3:我方提供基于 sse 的 http 接口,对方请求接口获得设备实时数据

sse 加密推送

第三方主要订阅一些设备的数据,需要订阅哪些设备也是预先确定好的,于是想到一下:

  1. 我们对订阅数据(哪些设备、topic等等)进行加密得到 key,将key提供给第三方
  2. 第三方通过key 请求 sse 接口
  3. 我们在sse接口里解析key获得订阅信息,进行内部的消息订阅,收到消息即可持续推送消息给第三方

这个场景下使用sse的优点分析:

  1. 如果用瞎编的 key请求接口会在解密时报错,我方服务的安全性得到了保证。
  2. 使用简单,只需发起http请求就行
  3. 维护简单,如果是websocket就需要费力维护长连接,如果是mqtt容易造成内部安全隐患,需要权限控制这些。
  4. 拓展简单,如果需要增加key时限控制,在订阅数据里增加超时时间就行

加密订阅数据样例

func TestEncrypt(t *testing.T) {
	pkt := nethub.SubscribePacket{
		Topic:      "53106725278657/nk01/rt_message",
		Attributes: nil,
	}
	pktBytes, _ := json.Marshal(&pkt)
	sseSecret, _ := Encrypt(string(pktBytes))
	log.Println("encrypt:", sseSecret)

	pktStr, _ := decrypt(sseSecret)
	var rawPkt nethub.SubscribePacket
	json.Unmarshal([]byte(pktStr), &rawPkt)

	log.Println("decrypt:", rawPkt)
}

js 代码样例

var a=new EventSource("https://${服务地址}/sse/${加密key}")
a.onmessage=(data)=>console.log(data)
### Server-Sent Events (SSE) 实现与配置 #### SSE 基本概念 SSE 是一种允许服务器主动向浏览器推送事件的技术,这有助于提高 Web 应用程序的实时性和响应性[^1]。 客户端可以通过 `EventSource` API 来订阅来自服务器的数据流。 #### 工作原理 客户端发起带有特定头部 (`Accept: text/event-stream`) 的 HTTP GET 请求至服务器,告知其希望接收到的是 SSE 数据流。一旦建立连接并返回成功状态码,则该链接会一直维持开启直到被显式关闭或者发生错误。在此期间,服务器可随时发送新的消息前端而无需等待额外请求到来[^3]。 #### 配置HTTP请求和响应头 为了使 SSE 正常运作,在创建 SSE 连接时需正确设置 HTTP 请求中的接受媒体类型为 `text/event-stream`;而在服务端回应里则应指定 Content-Type 同样为此值,并加上必要的缓存控制指令防止代理存储这些动态产生的内容: ```http Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive ``` #### Spring Boot 中的应用实践 在 Spring Boot 项目中集成 SSE 主要涉及定义一个 REST 控制器方法用于处理 `/streamFlux` 路径下的 GET 请求,并通过 Flux<SseEmitter> 返回多个 SseEmitter 对象实例来管理各个独立用户的长连接关系。对于每一个新接入者都会分配一个新的 emitter 并保存起来以便后续广播通知使用[^4]。 ```java @GetMapping("/streamFlux") public Flux<SseEmitter> streamFlux() { final var emitters = new CopyOnWriteArrayList<SseEmitter>(); return Flux.<SseEmitter>create(sink -> { final var emitter = new SseEmitter(); sink.next(emitter); emitters.add(emitter); emitter.onCompletion(() -> emitters.remove(emitter)); emitter.onError((e) -> emitters.remove(emitter)); emitter.onTimeout(() -> emitters.remove(emitter)); emitter.send(SseEmitter.event() .id(UUID.randomUUID().toString()) .name("hello") .data("Welcome to the server-sent events stream!") ); }).share(); // Share this flux among all subscribers. } ``` 上述代码片段展示了如何在一个简单的 Spring Boot 应用程序中构建支持 SSE 功能的服务端逻辑部分。请注意这里还包含了当某个 client 断开连接后的清理操作以释放相应资源。 #### 浏览器端JavaScript交互方式 最后一步是在网页上编写 JavaScript 使用 EventSource 构造函数监听来自后端发出的通知信息。每当有新数据到达就会触发 onmessage 回调函数执行自定义业务逻辑处理流程: ```javascript if (!!window.EventSource) { const eventSource = new EventSource('/streamFlux'); eventSource.addEventListener('open', function(e) { console.log("Connection was opened."); }, false); eventSource.addEventListener('error', function(e) { if (eventSource.readyState === EventSource.CLOSED) { console.error("The connection has been closed by the server."); } else { console.warn(`An error occurred, retrying... (${e.target})`); } }, false); eventSource.addEventListener('hello', function(e) { console.info(`New message received from server: ${e.data}`); }); } else { console.error("Your browser doesn't support Server Sent Events"); } ``` 此段脚本实现了对 SSE 事件源对象的基础初始化以及针对不同类型事件作出适当反应的功能模块化设计思路。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值