当前位置: 首页 > news >正文

【vue项目如何利用event-stream实现文字流式输出效果】

引言

在现代 Web 应用中,实时数据展示是一个常见需求,例如聊天消息逐字显示、日志实时推送、股票行情更新等。传统的轮询或一次性数据加载方式无法满足这类场景的流畅体验,而 流式传输(Streaming) 技术则能实现数据的“边接收边渲染”。本文将介绍如何在 Vue 项目中,利用 EventStream(基于 Server-Sent Events, SSE)实现文字流式输出效果,并提供完整代码示例和优化思路。


一、什么是 EventStream?

EventStream 是 HTML5 中 Server-Sent Events(SSE)的实现,允许服务器通过 HTTP 协议向客户端推送实时数据流。与 WebSocket 不同,SSE 是单向通信(服务端到客户端),适合需要实时更新但交互简单的场景,如新闻推送、实时日志等。

核心优势

  • 基于 HTTP,无需复杂协议

  • 自动重连机制

  • 轻量级,兼容性良好


二、实现思路
  1. 服务端:通过 SSE 接口持续推送数据流(文本片段)。

  2. 客户端:使用 EventSource 监听服务端事件,逐步拼接并渲染数据。

  3. Vue 组件:动态更新 DOM,实现文字逐字输出或分段显示效果。


三、代码实现
1. 服务端(Node.js + Express)
// server.js
const express = require('express');
const app = express();app.get('/stream', (req, res) => {res.setHeader('Content-Type',text/event-stream');res.setHeader('Cache-Control', 'no-cache');res.setHeader('Connection', 'keep-alive');// 模拟流式数据推送const messages = ['Hello', ', ', 'this ', 'is ', 'a ', 'streaming ', 'demo!'];let index = 0;const timer = setInterval(() => {if (index < messages.length) {res.write(`data: ${messages[index++]}\n\n`); // SSE 格式要求} else {clearInterval(timer);res.end();}}, 500);
});app.listen(3000, () => {console.log('Server running on http://localhost:3000');
});

2. 客户端(Vue 组件)
<template><div class="stream-container"><div class="content">{{ streamText }}</div></div>
</template><script>
import { ref, onMounted, onUnmounted } from 'vue';export default {setup() {const streamText = ref('');let eventSource = null;// 初始化 EventSource 连接const initStream = () => {eventSource = new EventSource('http://localhost:3000/stream');eventSource.onmessage = (event) => {streamText.value += event.data; // 逐步拼接文本};eventSource.onerror = (error) => {console.error('EventStream error:', error);eventSource.close();};};onMounted(() => {initStream();});onUnmounted(() => {if (eventSource) eventSource.close();});return { streamText };}
};
</script><style>
.stream-container {padding: 20px;border: 1px solid #eee;
}
.content {white-space: pre-wrap;
}
</style>

四、优化与扩展
1. 添加加载状态
const isLoading = ref(false);eventSource.onopen = () => {isLoading.value = true;
};
eventSource.onmessage = () => {isLoading.value = false;
};
2. 实现逐字输出动画
// 修改 onmessage 逻辑
eventSource.onmessage = (event) => {const chars = event.data.split('');chars.forEach((char, i) => {setTimeout(() => {streamText.value += char;}, i * 50); // 每个字符间隔50ms});
};
3. 错误处理与重连
const reconnect = () => {if (eventSource) eventSource.close();setTimeout(initStream, 3000); // 3秒后重连
};eventSource.onerror = (error) => {console.error('Connection error, reconnecting...', error);reconnect();
};
4. 使用第三方库优化
  • vue-use:集成 useEventSource 快速实现 SSE

  • axios:通过 CancelToken 管理流式请求


五、注意事项
  1. 跨域问题:确保服务端设置 CORS 头(如 Access-Control-Allow-Origin)。

  2. 性能优化:避免频繁 DOM 操作,大数据量时考虑虚拟滚动。

  3. 兼容性:SSE 不支持 IE,可使用 Polyfill(如 eventsource 库)。

  4. 数据格式:遵循 SSE 规范,每条消息以 data: 开头,结尾加 \n\n


结语

通过 EventStream 实现流式输出,不仅能提升用户体验,还能减少不必要的带宽消耗。本文提供的方案可扩展至实时日志监控、AI 对话等场景。如果你有更好的实现思路,欢迎在评论区交流!

相关文章:

【vue项目如何利用event-stream实现文字流式输出效果】

引言 在现代 Web 应用中&#xff0c;实时数据展示是一个常见需求&#xff0c;例如聊天消息逐字显示、日志实时推送、股票行情更新等。传统的轮询或一次性数据加载方式无法满足这类场景的流畅体验&#xff0c;而 流式传输&#xff08;Streaming&#xff09; 技术则能实现数据的…...

微信问题总结(onpageshow ,popstate事件)

此坑描述 订单详情某按钮点击&#xff0c;通过window.location.href跳转到&#xff08;外部&#xff09;第三方链接后&#xff0c;回退后&#xff0c;在ios中生命周期和路由导航钩子都失效了&#xff0c;无法触发。 在安卓中无视此坑&#xff0c; 回退没有问题 解决 原因&am…...

【Gin-Web】Bluebell社区项目梳理3:社区相关接口开发

本文目录 一、接口详情1. 获取分类社区列表接口2. 根据id查询社区 二、值类型与引用类型 一、接口详情 跟社区有关的接口详情如下。 1. 获取分类社区列表接口 首先是Controller层&#xff0c;然后跳转到Logic层业务逻辑的开发。 这是Logic层&#xff0c;再做一次跳转&#…...

Unity 聊天气泡根据文本内容适配

第一步 拼接UI 1、对气泡图进行九宫图切割 2、设置底图pivot位置和对齐方式 pivot位置&#xff1a;&#xff08;0&#xff0c;1&#xff09; 对齐方式&#xff1a;左上对齐 3、设置文本pivot位置和对齐方式&#xff0c;并挂上布局组件 pivot设置和对齐方式和底图一样&#…...

对学习编程语言的一些理解

目录 一、代码运行的过程 二、跨平台的实现 1&#xff09;C/C 2&#xff09;C# 3&#xff09;Java 三、总结 一、代码运行的过程 开发程序无论使用何种编程语言&#xff0c;至少都需要经历编码、编译、连接和运行这么4个过程&#xff0c;C语言是这样&#xff0c;Java语言…...

MySQL MHA 部署全攻略:从零搭建高可用数据库架构

文章目录 1.MHA介绍2.MHA组件介绍3.集群规划4.服务器初始化5.MySQL集群部署5.1 安装MySQL集群5.2 配置一主两从5.3 测试MySQL主从5.4 赋予MHA用户连接权限 6.安装MHA环境6.1 安装MHA Node6.2 安装MHA Manager 7.配置MHA环境8.MySQL MHA高可用集群测试8.1 通过VIP连接MySQL8.2模…...

windows怎样查看系统信息(处理器等)

首先打开命令行工具 win R 输入 cmd&#xff0c; 输入 msinfo32 &#xff0c;然后回车 这个页面就可以看到 电脑的锐龙版就是 AMD 芯片 酷睿版就是 intel 芯片...

007 HBuilderX提示IDE service port disabled. To use CLI Call, open IDE

描述 微信小程序 工具的服务端口已关闭 解决方案 在HBuider的菜单“运行”选择“运行到小程序模拟器-微信开发者工具”时&#xff0c;步骤如图&#xff1a; 提示&#xff1a;IDE service port disabled. To use CLI Call, open IDE -> Settings -> Security Settings,…...

计算机网络之TCP的可靠传输

上一篇内容可能比较多&#xff0c;显得比较杂乱&#xff0c;这一篇简单总结一下TCP是靠什么实现可靠传输的吧。 校验和 TCP是端到端的传输&#xff0c;由发送方计算校验和&#xff0c;接收方进行验证&#xff0c;目的是为了验证TCP首部和数据在发送过程中没有任何改动&#x…...

Python爬虫系列教程之第十四篇:爬虫项目部署、调度与监控系统

大家好&#xff0c;欢迎继续关注本系列爬虫教程&#xff01; 在前面的文章中&#xff0c;我们已经详细讲解了如何构建爬虫、如何处理反爬、如何实现分布式爬虫以及如何使用 Scrapy 框架开发高效的爬虫项目。随着项目规模的不断扩大&#xff0c;如何将爬虫项目稳定部署到生产环境…...

线程与进程的深入解析及 Linux 线程编程

在操作系统中&#xff0c;进程和线程是进行并发执行的两种基本单位。理解它们的区别和各自的特点&#xff0c;能够帮助开发者更好地进行多任务编程&#xff0c;提高程序的并发性能。本文将探讨进程和线程的基础概念&#xff0c;及其在 Linux 系统中的实现方式&#xff0c;并介绍…...

在ubuntu上用Python的openpyxl模块操作Excel的案例

文章目录 安装模块读取Excel数据库取数匹配数据和更新Excel数据 在Ubuntu系统的环境下基本职能借助Python的openpyxl模块实现对Excel数据的操作。 安装模块 本次需要用到的模块需要提前安装(如果没有的话) pip3 install openpyxl pip3 install pymysql在操作前&#xff0c;需…...

【OS安装与使用】part6-ubuntu 22.04+CUDA 12.4运行MARL算法(多智能体强化学习)

文章目录 一、待解决问题1.1 问题描述1.2 解决方法 二、方法详述2.1 必要说明2.2 应用步骤2.2.1 下载源码并安装2.2.2 安装缺失的依赖项2.2.3 训练执行MAPPO算法实例 三、疑问四、总结 一、待解决问题 1.1 问题描述 已配置好基础的运行环境&#xff0c;尝试运行MARL算法。 1…...

【Python爬虫(35)】解锁Python多进程爬虫:高效数据抓取秘籍

【Python爬虫】专栏简介&#xff1a;本专栏是 Python 爬虫领域的集大成之作&#xff0c;共 100 章节。从 Python 基础语法、爬虫入门知识讲起&#xff0c;深入探讨反爬虫、多线程、分布式等进阶技术。以大量实例为支撑&#xff0c;覆盖网页、图片、音频等各类数据爬取&#xff…...

HarmonyOS 开发套件 介绍 ——上篇

HarmonyOS 开发套件 介绍 ——上篇 在当今科技飞速发展的时代&#xff0c;操作系统作为智能设备的核心&#xff0c;其重要性不言而喻。而HarmonyOS&#xff0c;作为华为推出的全新操作系统&#xff0c;正以其独特的魅力和强大的功能&#xff0c;吸引着越来越多的开发者和用户的…...

Linux 高级篇 日志管理、定制自己的Linux系统、备份与恢复

一、日志管理 &#xff08;1&#xff09;基本介绍 日志文件是重要的系统信息文件&#xff0c;记录了如用户登录、系统启动、系统安全、邮件及各种服务等相关重要系统事件在安全方面&#xff0c;日志也至关重要&#xff0c;它能记录系统日常发生的各类事情&#xff0c;可用于检…...

deepseek与其他大模型配合组合

DeepSeek与其他大模型的配合组合&#xff0c;展现了其在多个领域中的强大应用潜力和灵活性。以下是对DeepSeek与其他大模型配合组合的详细分析&#xff1a; 一、DeepSeek与华知大模型的组合 背景介绍&#xff1a; 华知大模型是同方知网与华为联手打造的&#xff0c;具备全学科…...

经验分享—WEB渗透测试中遇到加密内容的数据包该如何测试!

经验分享—WEB渗透测试中遇到加密内容的数据包该如何测试&#xff01; 01 加解密的意义 现阶段的渗透测试让我发现越来越多的系统不只是在漏洞修补方面做了功夫&#xff0c;还对一些参数进行加密&#xff0c;干扰爬虫或者渗透测试的进行。 在我小白阶段看到下图这种加密方式…...

JUC并发—9.并发安全集合四

大纲 1.并发安全的数组列表CopyOnWriteArrayList 2.并发安全的链表队列ConcurrentLinkedQueue 3.并发编程中的阻塞队列概述 4.JUC的各种阻塞队列介绍 5.LinkedBlockingQueue的具体实现原理 6.基于两个队列实现的集群同步机制 4.JUC的各种阻塞队列介绍 (1)基于数组的阻塞…...

JSON格式,C语言自己实现,以及直接调用库函数(一)

JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式&#xff0c;易于人阅读和编写&#xff0c;同时也易于机器解析和生成。以下为你提供不同场景下常见的 JSON 格式示例。 1. 简单对象 JSON 对象是由键值对组成&#xff0c;用花括号 {} 包裹&…...

从翁恺MOOC到PAT实战:用C语言搞定‘斐波那契分数’求和的保姆级思路拆解

从翁恺MOOC到PAT实战&#xff1a;用C语言搞定‘斐波那契分数’求和的保姆级思路拆解 第一次看到这个题目时&#xff0c;很多人会下意识地认为这只是一道普通的分数求和题。但当你仔细观察这个序列&#xff1a;2/1, 3/2, 5/3, 8/5, 13/8... 会发现分子和分母的数字似曾相识——这…...

jless YAML文件支持的终极指南:自动检测与手动指定格式的完整教程

jless YAML文件支持的终极指南&#xff1a;自动检测与手动指定格式的完整教程 【免费下载链接】jless jless is a command-line JSON viewer designed for reading, exploring, and searching through JSON data. 项目地址: https://gitcode.com/gh_mirrors/jl/jless jl…...

WeDLM-7B-Base开源大模型教程:Diffusion LM与AR模型本质差异

WeDLM-7B-Base开源大模型教程&#xff1a;Diffusion LM与AR模型本质差异 1. 认识WeDLM-7B-Base模型 WeDLM-7B-Base是一款基于扩散机制&#xff08;Diffusion&#xff09;的70亿参数高性能语言模型。与传统的自回归&#xff08;AR&#xff09;模型不同&#xff0c;它采用创新的…...

Advantech工业连接器国产替代方案与选型实践解析

在工业计算机与嵌入式系统领域&#xff0c;连接器不仅是基础互连器件&#xff0c;更是系统稳定运行的重要保障。Advantech 作为工业计算机行业的代表厂商&#xff0c;其产品广泛应用于工业自动化、智能制造、医疗设备、交通系统及物联网等领域。虽然 Advantech 本身并非传统意义…...

408考研避坑指南:我踩过的那些“弯路”(教材、网课、题海战术)

408考研避坑指南&#xff1a;那些让我效率翻倍的实战经验 备考408计算机专业基础综合的同学们&#xff0c;一定都听过"教材为王"、"题海战术"、"名师必跟"这些老生常谈的建议。但作为一个从低效复习中挣扎出来的过来人&#xff0c;我想说&#x…...

XPack-MCP-Marketplace:AI时代的“应用商店”,一键部署与管理MCP服务

1. 项目概述&#xff1a;一个AI时代的“应用商店”雏形最近在折腾AI应用开发的朋友&#xff0c;估计都绕不开一个词&#xff1a;MCP&#xff08;Model Context Protocol&#xff09;。简单来说&#xff0c;它就像给AI大模型&#xff08;比如ChatGPT、Claude&#xff09;装上了一…...

别再折腾双系统了!用WSL2+CentOS7+xfce4打造你的Windows原生Linux开发桌面

告别双系统&#xff1a;用WSL2CentOS7构建无缝Linux开发环境 每次重启切换操作系统的等待&#xff0c;虚拟机卡顿时的烦躁&#xff0c;开发环境不一致导致的调试噩梦——这些困扰开发者多年的问题&#xff0c;其实早该被扔进技术历史的垃圾桶。当WSL2遇上轻量级桌面环境&#x…...

终极Jetpack Compose指南:SSComposeCookBook高效UI组件库全面解析

终极Jetpack Compose指南&#xff1a;SSComposeCookBook高效UI组件库全面解析 【免费下载链接】SSComposeCookBook A Collection of major Jetpack compose UI components which are commonly used.&#x1f389;&#x1f51d;&#x1f44c; 项目地址: https://gitcode.com/g…...

SpringMVC5.0

Spring留言板实现预期结果可以发布并显示点击提交后&#xff0c;显示并清除输入框并且再次刷新后&#xff0c;不会清除下面的缓存约定前后端交互接口Ⅰ 发布留言 url : /message/publish . param(参数) : from,to,say . return : true / false .Ⅱ 查询留言 url : /message/get…...

别再直接改/etc/sudoers了!用visudo命令的正确姿势与安全配置详解

为什么直接修改/etc/sudoers是危险的&#xff1f;深入解析visudo的安全机制与实战技巧 在Linux系统管理中&#xff0c;sudo权限的配置是每个管理员都无法回避的核心任务。许多新手管理员习惯性地使用vim或nano直接编辑/etc/sudoers文件&#xff0c;却不知道这个看似便捷的操作背…...