vue2 实现流式输出

在Vue2中实现流式输出通常使用Server-Sent Events (SSE) 技术，也称为服务器推送事件。下面是一个简单的步骤说明：

1. **安装依赖**[^1]
首先，确保已安装`vue-server-renderer`（如果尚未安装）以支持在服务器上渲染Vue组件。在项目根目录运行：

   npm install vue-server-renderer --save-dev

2. **设置事件源**
在服务器端，创建一个HTTP响应并开启SSE连接：

   const http = require('http');
   const eventSource = http.createServer((req, res) => {
     res.writeHead(200, { 'Content-Type': 'text/event-stream' });
     res.write(`data: ${new Date().toLocaleTimeString()} Some data from server\n\n`);
     // 模拟持续的数据流
     setInterval(() => {
       res.write(`data: ${new Date().toLocaleTimeString()} More data\n\n`);
     }, 2000);
   });

   eventSource.listen(3000, () => console.log('Listening on port 3000'));

3. **客户端订阅事件**
在Vue组件中，通过JavaScript的EventSource API订阅这个事件源：

   import Vue from 'vue';
   import EventSource from 'eventsource';

   new Vue({
     created() {
       const source = new EventSource('/sse');
       source.addEventListener('message', event => {
         console.log(`Received data: ${event.data}`);
         // 更新视图或执行其他操作
       });
       // 错误处理
       source.addEventListener('error', error => {
         console.error('Error occurred:', error);
       });
     },
   });

4. **更新视图**
当从服务器接收到新数据时，你可以选择性地更新组件的状态，然后触发Vue的更新机制自动渲染到DOM。

这样就实现了Vue2中的流式输出，每当服务器有新的数据发布，客户端就会实时接收到并更新视图。