How to stream data from ASP.NET Core API to Angular in real-time?

Frontend
1

I’m working on a project that needs to show results quickly by streaming data from the backend to the frontend. My setup uses ASP.NET Core for the API and Angular for the frontend.

Here’s what I’ve got so far:

[HttpPost("streamData")]
public IEnumerable<string> StreamData(DataRequest req)
{
    try
    {
        var dataStream = _dataService.GetStreamingData(req);
        foreach (var update in dataStream)
        {
            foreach (var chunk in update.Content)
            {
                yield return chunk.Text;
            }
        }
    }
    catch (Exception ex)
    {
        _logger.LogError(ex, "Streaming data failed.");
        yield break;
    }
}

And in Angular:

streamData(request: DataRequest) {
  return this.http.post(this.apiUrl + 'streamData', request, {
    responseType: 'text',
    observe: 'events'
  });
}

// In component
this.dataService.streamData(request)
  .pipe(takeUntil(this.stopSignal))
  .subscribe({
    next: (event: any) => {
      console.log(event);
    },
    error: (err) => {
      console.error(err);
      this.isLoading = false;
    }
  });

The console shows the whole response at once, but I want to see each piece come in separately. How can I modify this to get a stream of individual chunks instead of one big response? Any tips on tweaking either the backend or frontend code would be super helpful!

2

For real-time streaming in ASP.NET Core to Angular, consider using Server-Sent Events (SSE). On the backend, modify your action method to return an IActionResult that sets up an SSE stream:

[HttpGet("streamData")]
public async Task<IActionResult> StreamData()
{
    Response.Headers.Add("Content-Type", "text/event-stream");
    
    foreach (var data in _dataService.GetStreamingData())
    {
        await Response.WriteAsync($"data: {data}\n\n");
        await Response.Body.FlushAsync();
    }
    
    return new EmptyResult();
}

In Angular, use an EventSource to consume the stream:

const eventSource = new EventSource('/api/streamData');
eventSource.onmessage = (event) => {
    console.log('Received:', event.data);
    // Process your data here
};

eventSource.onerror = (error) => {
    console.error('EventSource failed:', error);
    eventSource.close();
};

This approach provides a more efficient, native streaming solution compared to long-polling or websockets for unidirectional real-time data flow.

3

hey man, u might wanna try using signalR for this. it’s pretty good for real-time stuff. on the backend, u can setup a hub and send messages as they come in. then in angular, u can use the signalR client to listen for those messages. it’s way easier than trying to hack together a streaming solution with http

4

hey there! have u thought about using websockets? they’re super cool for real-time stuff. you could use the @microsoft/signalr package in angular to connect to a SignalR hub on ur backend. it’s like:

const connection = new HubConnectionBuilder()
  .withUrl('/datahub')
  .build();

connection.on('ReceiveData', (data) => {
  console.log(data);
});

connection.start();

what do u think? it might be easier than streaming over http!