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

引言

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

一、什么是 EventStream？

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

核心优势：

基于 HTTP，无需复杂协议
自动重连机制
轻量级，兼容性良好

二、实现思路

服务端：通过 SSE 接口持续推送数据流（文本片段）。
客户端：使用 EventSource 监听服务端事件，逐步拼接并渲染数据。
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();
};