SSE通信方式 使用流信息向浏览器推送信息_浏览器如何查看到sse返回的信息内容

---

前言

当时为了实现像chart GPT一样文字流式输出的效果而使用的这种通信方式，这种通信方式不同于axios或是fetch，它支持在通信过程中对获取的数据进行处理。

SSE的介绍

SSE，全称Server-Sent Events，当服务器向浏览器发送的不是一次性的数据包，而是一个数据流且会连续不断地发送过来，可以使用SSE通信。
它基于 HTTP 协议，提供服务器向浏览器单向通信通道，默认支持断线重连，一般只用来传送文本。

SSE针对前端的使用方式

1. 通过EventSource创建实例对象，因为SSE 的客户端 API 都部署在EventSource对象上
2. 连接一旦建立，就会触发open事件，可以在onopen属性定义回调函数
3. 客户端收到服务器发来的数据，就会触发message事件，可以在onmessage属性的回调函数。对数据进行处理，可以在此步骤进行操作
4. 如果发生通信错误（比如连接中断），就会触发error事件，可以在onerror属性定义回调函数。
5. close方法用于关闭 SSE 连接。

let source = new EventSource(url);
source.onopen = function (event) {
  // ...
};

source.onmessage = function (event) {
  var data = event.data;
  // handle message
};

source.onerror = function (event) {
  // handle error event
};

source.close();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

以上就是针对前端部分使用SSE通信的步骤和使用频率比较高的API，如何想要系统的学习SSE，推荐看一下阮一峰老师写的这篇文章：Server-Sent Events 教程，这篇文章从前端、服务器端比较系统的介绍了SSE的基本用法。

补充

其实，还有一个比SSE更强大更灵活的通信方式，名为WebSocket，它是一种网络通信协议，很多高级功能都需要它。

WebSocket与SSE 作用相似，都是建立浏览器与服务器之间的通信渠道，然后服务器向浏览器推送信息。不同的是WebSocket是全双工通道，可以双向通信；SSE 是单向通道，只能服务器向浏览器发送，因为流信息本质上就是下载。如果浏览器向服务器发送信息，就变成了另一次 HTTP 请求。

它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

其基本用法与SSE类似，因此这里就不再赘述，感兴趣的小伙伴可以查看WebSocket 教程，也是阮一峰老师写的哦~