http SSE

以前聊过Golang长连接-基于WebSocket,这次我们聊SSE(Server-Sent Events)。

简介

SSE(Server-Sent Events)和WebSocket都是实现实时通信的技术。以下是它们的区别和相同点:

相同点:

  1. 都是基于HTTP协议实现的实时通信技术。

  2. 都可以实现服务器向客户端发送实时更新的数据。

区别:

  1. SSE是单向通信,只能服务器向客户端发送数据;而WebSocket是双向通信,服务器和客户端都可以发送数据。

  2. SSE使用HTTP协议,而WebSocket使用ws协议(或wss协议,当使用SSL加密时)。

  3. SSE在某些场景下更适用于低延迟的数据传输,如股票行情等;而WebSocket更适用于需要双向实时交互的应用,如在线聊天、游戏等。

  4. SSE支持自动重连,如果连接中断,浏览器会自动尝试重新连接;而WebSocket需要手动实现重连逻辑。

  5. SSE的浏览器兼容性较差,不支持IE和较低版本的浏览器;而WebSocket的浏览器兼容性较好。

  6. SSE使用文本格式传输数据,而WebSocket支持文本和二进制数据传输。

实战

请求

请求体里需要设置为text/event-stream,可以使用封装好的EventSource

					var stream = new EventSource("/sse/subscribe?user=%s&topics=%s");
					stream.addEventListener("message", function(e){
							$('.event-data').append(e.data + "</br>")
					});
          stream.onerror = function(event) {
						stream.close();
					};

可以监听事件、和错误信息,并做出响应的处理

服务

服务端对建立的链接定时发送消息即可,如果想关闭,返回false。

c.Stream(func(w io.Writer) bool {
			timer := time.NewTicker(time.Second)
			for range timer.C {
				c.SSEvent("message", "hello "+time.Now().String())
				count++
				if count > 10 {
					return false
				}
				return true
			}
			return false
		})

效果

最终效果如下图所示,home接口显示html,并发起subscribe请求。subscribe设置定时器,1s返回一条数据,到达最终值后返回false。为了防止重连,在html里判断onerror,直接关闭stream链接。

image-20240324162736247.png

image-20240324162748234.png

总结

上面的代码位于:https://github.com/shidawuhen/asap/tree/master/controller/sse

SSE的实现比Websocket要方便的多,大家可以基于自己的需要去选择。

  • 实现一个完整的服务仅需要少量的代码;

  • 可以在现有的服务中使用,不需要启动一个新的服务;

  • 可以用任何一种服务端语言中使用;

  • 基于 HTTP / HTTPS 协议,可以直接运行于现有的代理服务器和认证技术。

资料

  1. https://zhuanlan.zhihu.com/p/642094586

  2. SSE(Server-Sent Events)技术及其简单演示

最后

大家如果喜欢我的文章,可以关注我的公众号(程序员麻辣烫)

我的个人博客为:https://shidawuhen.github.io/

往期文章回顾:

  1. 设计模式

  2. 招聘

  3. 思考

  4. 存储

  5. 算法系列

  6. 读书笔记

  7. 小工具

  8. 架构

  9. 网络

  10. Go语言

### HTTP SSE(Server-Sent Events)的底层实现原理 #### 1. 定义与协议基础 HTTP SSE 是一种基于 HTTP 的服务器推送技术,允许服务器向客户端发送实时更新的数据流。它依赖于标准的 HTTP 协议,并通过特定的内容类型 `text/event-stream` 来定义事件流[^2]。 #### 2. 连接建立过程 当客户端请求一个支持 SSE 的资源时,浏览器会发起一个普通的 HTTP 请求,并在头部字段中指定接受的内容类型为 `text/event-stream`。服务器识别到这一请求后,保持连接处于打开状态,以便后续持续传输数据[^2]。 #### 3. 数据帧格式 SSE 使用简单的文本消息作为其基本单元,每条消息由若干字段组成,常见的字段有: - **data**: 表示实际要传递的消息内容。 - **event**: 可选字段,用于区分不同的事件类型。 - **id**: 标识某个具体的事件流,便于重新连接时恢复上下文。 - **retry**: 设置自动重试的时间间隔,单位为毫秒。 这些字段之间以换行符分隔,一条完整的消息通常以两个连续的新行结束。例如: ```plaintext event: message\n data: Hello, world!\n\n ``` 以上代码片段表示了一次带有自定义事件名 `message` 和具体负载 `"Hello, world!"` 的推送通知[^2]。 #### 4. 长连接管理 为了维持长时间的有效通信而不被中间代理或网络环境切断,SSE 设计了一些机制来处理可能发生的中断情况。如果检测到异常关闭或者超时现象,则依据之前设置好的 retry 参数尝试重建链接;另外还提供了 last-event-id 头部信息帮助服务端理解最新进展从而继续未完成的任务序列[^2]。 #### 5. 浏览器兼容性和限制条件 尽管现代主流浏览器普遍支持 Server Sent Events 功能,但在跨域资源共享(CORS)方面存在严格的规定——即只有满足 CORS 政策的服务才能成功响应来自不同源地址下的脚本调用需求。此外值得注意的是,相较于 Websocket 技术而言,SSE 更适合单方向广播场景而非双向交互应用场合[^2]。 ```javascript // 创建一个新的 EventSource 对象实例并监听 'open', 'error' 和 'message' const eventSource = new EventSource('/stream'); eventSource.onopen = function() { console.log('Connection to server opened.'); }; eventSource.onerror = function(e) { if (e.target.readyState === EventSource.CLOSED) { console.error('Event source closed unexpectedly.'); } else { console.warn(`Error occurred (${e}).`); } }; eventSource.onmessage = function(event) { const data = JSON.parse(event.data); console.info('New message received:', data); }; ``` 上述 JavaScript 示例展示了如何利用原生 API 构建 SSE 客户端逻辑以及相应的回调函数配置方法。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

程序员麻辣烫

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

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

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

打赏作者

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

抵扣说明:

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

余额充值