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

本文主要是介绍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代码

<template><div ref="logElRef"><div v-for="log in logList" :key="log">{{ log }}</div></div>
</template>

JS代码 

<script setup lang="ts">
import { inject, ref, nextTick, onMounted, onBeforeUnmount } from 'vue';const logElRef = ref();
const logList = ref([]);
const oldScrollTop = ref(0);
const scrollFlag = ref(true);
const eventSource = ref();
// 建立连接
const initSSE = () => {eventSource.value = new EventSource('后台提供的接口地址');// 监听自定义的事件eventSource.value.addEventListener('后台定义的事件类型这个名字前后端需要保持一致', (event) => {console.log('Custom Event:', event.data);logList.push(event.data);// 保存流式数据if (scrollFlag.value) {scrollToBottom(); // 数据更新后滚动到最底部,始终让最新的数据可见}});// 监听接收到的消息,但我用这个方式监听不到数据,不知道为啥//eventSource.value.onmessage = (event: any) => {// console.log('Event:', event.data);//}
// 捕获异常eventSource.value.onerror = (error: any) => {console.log(error);}
}
// 关闭连接
const closeSSE = () => {eventSource.value?.close();
};// 使滚动条置底
const scrollToBottom = () => {nextTick(() => {logElRef.value.scrollTop = logElRef.value.scrollHeight;})
}
// 监听滚动事件
const scrolling = () => {let scrollTop = logElRef.value.scrollTop;// 更新——滚动前,滚动条距文档顶部的距离let scrollStep = scrollTop - oldScrollTop.value;oldScrollTop.value = scrollTop;//判断当前是向上or向下滚动if (scrollStep < 0) {//向上scrollFlag.value = false;} else {scrollFlag.value = true;}
}
onMounted(() => {
// 进入页面后开始创建连接监听数据上报并监听滚动条事件,始终让滚动条在最底部,最新的数据可见initSSE();logElRef.value.addEventListener('scroll', scrolling);scrollToBottom();
})
onBeforeUnmount(() => {closeSSE();logElRef.value.removeEventListener('scroll', scrolling);
})
</script>

样式代码

<style scoped>
.log-wrap {width: 100%;min-height: 500px;max-height: 1780px;overflow-x: hidden;overflow-y: auto;
}
</style>

这篇关于vue3项目使用EventSource实现流式输出例如滚动日志的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1123230

相关文章

如何使用 Python 读取 Excel 数据

《如何使用Python读取Excel数据》:本文主要介绍使用Python读取Excel数据的详细教程,通过pandas和openpyxl,你可以轻松读取Excel文件,并进行各种数据处理操... 目录使用 python 读取 Excel 数据的详细教程1. 安装必要的依赖2. 读取 Excel 文件3. 读

Go语言开发实现查询IP信息的MCP服务器

《Go语言开发实现查询IP信息的MCP服务器》随着MCP的快速普及和广泛应用,MCP服务器也层出不穷,本文将详细介绍如何在Go语言中使用go-mcp库来开发一个查询IP信息的MCP... 目录前言mcp-ip-geo 服务器目录结构说明查询 IP 信息功能实现工具实现工具管理查询单个 IP 信息工具的实现服

SpringBoot基于配置实现短信服务策略的动态切换

《SpringBoot基于配置实现短信服务策略的动态切换》这篇文章主要为大家详细介绍了SpringBoot在接入多个短信服务商(如阿里云、腾讯云、华为云)后,如何根据配置或环境切换使用不同的服务商,需... 目录目标功能示例配置(application.yml)配置类绑定短信发送策略接口示例:阿里云 & 腾

SpringBoot项目中报错The field screenShot exceeds its maximum permitted size of 1048576 bytes.的问题及解决

《SpringBoot项目中报错ThefieldscreenShotexceedsitsmaximumpermittedsizeof1048576bytes.的问题及解决》这篇文章... 目录项目场景问题描述原因分析解决方案总结项目场景javascript提示:项目相关背景:项目场景:基于Spring

解决Maven项目idea找不到本地仓库jar包问题以及使用mvn install:install-file

《解决Maven项目idea找不到本地仓库jar包问题以及使用mvninstall:install-file》:本文主要介绍解决Maven项目idea找不到本地仓库jar包问题以及使用mvnin... 目录Maven项目idea找不到本地仓库jar包以及使用mvn install:install-file基

Python使用getopt处理命令行参数示例解析(最佳实践)

《Python使用getopt处理命令行参数示例解析(最佳实践)》getopt模块是Python标准库中一个简单但强大的命令行参数处理工具,它特别适合那些需要快速实现基本命令行参数解析的场景,或者需要... 目录为什么需要处理命令行参数?getopt模块基础实际应用示例与其他参数处理方式的比较常见问http

python实现svg图片转换为png和gif

《python实现svg图片转换为png和gif》这篇文章主要为大家详细介绍了python如何实现将svg图片格式转换为png和gif,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录python实现svg图片转换为png和gifpython实现图片格式之间的相互转换延展:基于Py

Python利用ElementTree实现快速解析XML文件

《Python利用ElementTree实现快速解析XML文件》ElementTree是Python标准库的一部分,而且是Python标准库中用于解析和操作XML数据的模块,下面小编就来和大家详细讲讲... 目录一、XML文件解析到底有多重要二、ElementTree快速入门1. 加载XML的两种方式2.

C 语言中enum枚举的定义和使用小结

《C语言中enum枚举的定义和使用小结》在C语言里,enum(枚举)是一种用户自定义的数据类型,它能够让你创建一组具名的整数常量,下面我会从定义、使用、特性等方面详细介绍enum,感兴趣的朋友一起看... 目录1、引言2、基本定义3、定义枚举变量4、自定义枚举常量的值5、枚举与switch语句结合使用6、枚

Java的栈与队列实现代码解析

《Java的栈与队列实现代码解析》栈是常见的线性数据结构,栈的特点是以先进后出的形式,后进先出,先进后出,分为栈底和栈顶,栈应用于内存的分配,表达式求值,存储临时的数据和方法的调用等,本文给大家介绍J... 目录栈的概念(Stack)栈的实现代码队列(Queue)模拟实现队列(双链表实现)循环队列(循环数组