使用sse.js实时获取服务端数据流(Server-Sent Events)

使用sse.js实时获取服务端数据流(Server-Sent Events)

sse.js是什么:

SSE.js 或者 Server-Sent Events 是一种用于实现服务器推送数据到客户端的技术。它允许服务器以事件流的形式发送数据，客户端通过监听事件来获取数据更新。SSE.js 是一种基于 JavaScript 的实现，可以在浏览器中使用。

它的好处：

SSE.js（Server-Sent Events）具有以下几个好处：

简单易用：相比于其他实时通信技术（如 WebSocket），SSE.js 更加简单易用。它使用基于 HTTP 的长轮询机制，允许服务器主动推送数据到客户端，而无需客户端发起请求。

原生支持：SSE.js 在现代浏览器中得到了广泛的支持，无需额外的插件或依赖库。只要浏览器支持 SSE.js，就可以通过原生的 JavaScript API 进行开发。

单向通信：SSE.js 是一种服务器向客户端的单向通信方式。服务器可以实时向客户端发送数据更新，而客户端只需监听事件流，不需要自己给服务器发送请求。

实时性：SSE.js 具备较低的延迟和较高的实时性，可以实现快速的数据推送和更新。因此，对于实时性要求较高的应用场景，如即时聊天、实时数据展示等，SSE.js 是一个不错的选择。

对网络和服务器的负载较低：相比于轮询方式，SSE.js 通过长轮询机制减少了无效请求的数量，减轻了网络和服务器的负载。

sse.js文件

see.js百度网盘资源

提取码：wcp5

如何使用:

1.引入sse.js文件。

<script src="static/qiantai/js/sse.js"></script>

2.发送请求获取数据流。

//data根据需求自定义参数
const data = {
        username: username,
        prompt: inputText,
        history: liaotianjilu,
        key:qingqiukey
    };

	//转数据为json字符串
var jsondata=JSON.stringify(data)

//创建sse对象，请求地址，参数，请求方法
source = new SSE("http://127.0.0.1:8090/strem",
			    {headers: {'Content-Type': 'application/json'},
			            payload: jsondata,
			            method:'POST'});

//与后台连接成功触发的监听
source.addEventListener('open', function(e) {
     console.log("open")
     console.log('连接成功');
 });

//接收到后台数据触发监听方法
source.addEventListener('message', function (event) {
    console.log('收到数据', data);
});

//请求出错触发的监听方法
source.addEventListener('error', function(e) {
     console.error('请求出错：', e);
 });

//数据传输完成关闭连接触发的监听方法
source.addEventListener('close', function(e) {
    console.log('连接关闭');
});

//调用发起请求
source.stream();

注意！当使用sse.js请求数据流时，后台发送数据必须是以 data开始 以两个换行符结尾，如下面这段python代码：

returnmsg = "data: {} \n\n".format(content)
yield returnmsg

再次注意！sse.js在传输数据的时候，有可能会把空格和换行符或者制表符变成空字符串，可以再后台提前把他们转化成转义字符，之后前台再处理。