ASP.NET MVC 5：如何从控制器循环向视图实时传递数据？

这个问题我之前处理过类似的场景，核心是要把原来的「一次性返回所有数据」改成「增量式推送数据」，ASP.NET MVC5里用**服务器发送事件（SSE）**是最直接的方案——不用引入复杂的WebSocket框架，刚好适配你这种每次循环生成一点数据就推给前端的需求。下面分后端和前端一步步来实现：

后端控制器实现 #

首先要把原来的同步Action改成异步SSE流Action，因为普通Action是一次性返回响应，而SSE需要服务器持续向客户端分批推送数据：

using Newtonsoft.Json;
using System.Threading.Tasks;
using System.Web.Mvc;

public class HomeController : Controller
{
    public async Task<ActionResult> StreamTwitterData()
    {
        // 设置SSE专属响应头，告诉客户端这是持续的事件流
        Response.ContentType = "text/event-stream";
        Response.CacheControl = "no-cache";
        Response.Headers.Add("Connection", "keep-alive");

        bool shouldContinue = true;
        int processedBatch = 0;

        do
        {
            try
            {
                // 替换成你实际的Twitter API异步调用
                var twitterBatchData = await FetchTwitterApiDataAsync();
                
                // 把当前批次数据序列化为JSON，包装成SSE格式（必须以data:开头，双换行结尾）
                var serializedData = JsonConvert.SerializeObject(new {
                    metric = twitterBatchData.MetricValue,
                    timeLabel = twitterBatchData.CreatedAt.ToString("HH:mm:ss")
                });
                Response.Write($"data: {serializedData}\n\n");
                
                // 强制把数据推给客户端，避免服务器缓冲
                await Response.FlushAsync();

                processedBatch++;
                // 替换成你的循环终止条件（比如无更多数据/达到最大批次）
                shouldContinue = processedBatch < 15 && twitterBatchData.HasNextPage;

                // 这里是模拟API耗时（你的场景中API本身会耗时，可删除）
                await Task.Delay(1000);
            }
            catch (Exception ex)
            {
                // 推送错误信息给前端，然后终止循环
                Response.Write($"data: {{\"error\": \"{ex.Message}\"}}\n\n");
                await Response.FlushAsync();
                shouldContinue = false;
            }
        } while (shouldContinue);

        // 推送完成信号，告诉前端循环结束
        Response.Write("data: {\"completed\": true}\n\n");
        await Response.FlushAsync();

        return new EmptyResult();
    }

    // 模拟Twitter API异步调用，替换成你的实际逻辑
    private async Task<TwitterBatchData> FetchTwitterApiDataAsync()
    {
        // 这里写你的API请求逻辑，返回当前批次的数据和是否还有下一页
        return await Task.FromResult(new TwitterBatchData {
            MetricValue = new Random().Next(10, 50),
            CreatedAt = DateTime.Now,
            HasNextPage = true
        });
    }
}

// 自定义数据模型，替换成你实际的Twitter数据结构
public class TwitterBatchData
{
    public int MetricValue { get; set; }
    public DateTime CreatedAt { get; set; }
    public bool HasNextPage { get; set; }
}

关键细节说明：

• 必须设置text/event-stream响应头，客户端才能识别这是SSE流
• 每次推送数据要严格遵循SSE格式：data: {JSON内容}\n\n
• 调用Response.FlushAsync()强制推送数据，不能等服务器自动缓冲
• 用异步方法（async/await）避免阻塞服务器线程，影响其他请求

前端Chart.js实时更新 #

前端用EventSource连接后端的SSE Action，每次收到数据就更新图表：

<canvas id="twitterChart" width="400" height="200"></canvas>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// 初始化空的Chart.js图表
const ctx = document.getElementById('twitterChart').getContext('2d');
const twitterChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [],
        datasets: [{
            label: 'Twitter 实时数据',
            data: [],
            borderColor: '#1DA1F2',
            backgroundColor: 'rgba(29, 161, 242, 0.1)',
            tension: 0.2
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: { beginAtZero: true },
            x: { title: { display: true, text: '时间' } }
        }
    }
});

// 建立SSE连接，路径对应后端Action
const eventSource = new EventSource('/Home/StreamTwitterData');

// 监听服务器推送的消息
eventSource.onmessage = function(event) {
    const data = JSON.parse(event.data);

    // 处理错误情况
    if (data.error) {
        alert('数据获取失败：' + data.error);
        eventSource.close();
        return;
    }

    // 处理完成信号
    if (data.completed) {
        eventSource.close();
        console.log('所有数据推送完成');
        return;
    }

    // 更新图表数据
    twitterChart.data.labels.push(data.timeLabel);
    twitterChart.data.datasets[0].data.push(data.metric);
    twitterChart.update();
};

// 处理连接异常
eventSource.onerror = function(error) {
    console.error('SSE连接出错：', error);
    eventSource.close();
};
</script>

额外注意事项 #

1. 如果循环运行时间过长，建议每隔30秒发送一次心跳数据（Response.Write("data: \n\n"); await Response.FlushAsync();），避免服务器/客户端超时断开连接
2. 确保你的Twitter API调用是真正异步的，否则会阻塞服务器线程
3. 如果需要兼容IE浏览器（现在很少见），可以给EventSource加polyfill，或者换成WebSocket方案

内容的提问来源于stack exchange，提问作者user9270960