vue3项目使用EventSource实现流式输出例如滚动日志

前言

之前接触的通信方式主要是HTTP请求和WebSocket，这次有机会了解到EventSource，记录一下。

简介

EventSource是一个浏览器端用于接收服务器推送事件（Server-Sent Events, SSE）的 JS API。与 WebSocket 不同，SSE 是单向的（服务器到客户端），适用于更新频率不高的实时通知、消息推送等场景。

基本用法

创建连接

const eventSource = new EventSource('后台提供的接口地址');

监听数据上报

eventSource.addEventListener('后台定义的事件类型这个名字前后端需要保持一致', (event) => {
    console.log('Custom Event:', event.data);
  });

 捕获错误

我用的时候想在这个error里获取接口的状态码，但是发现没有，所以作罢。

eventSource.onerror = (error: any) => {
    console.log(error);
  }

 关闭连接

eventSource.close();

应用

通过一个简易的滚动日志功能来运用一下EventSource吧。语法是vue3+ts。

其中滚动条始终滚动到最底部相关的逻辑参考如下，这位大佬分享的很详细！VUE中如何让滚动条保持在最底部（数据实时更新，页面高度随时变化）_vue滚动条自动滚动到底部-CSDN博客

HTML代码

JS代码 

样式代码