基于.NET Core 1.0+Angular 2的ABP项目集成SignalR实现全局通知求助

Got it, let's walk through a solid, ABP-friendly approach to add SignalR and push product name update notifications to all logged-in users. I'll break this into backend and frontend steps tailored to your tech stack:

Backend Setup (.NET Core 1.0 + ABP) #

1. Install SignalR NuGet Package #

Since you're on .NET Core 1.0, you'll need the compatible SignalR package. Run this in your project directory:

dotnet add package Microsoft.AspNetCore.SignalR --version 1.0.0

Or via Package Manager Console:

Install-Package Microsoft.AspNetCore.SignalR -Version 1.0.0

2. Configure SignalR in Startup.cs #

Update your Startup.cs to register SignalR services and map the hub:

• In ConfigureServices, add SignalR to the service collection:

  public void ConfigureServices(IServiceCollection services)
  {
      // ... existing ABP and other service registrations
      services.AddSignalR();
  }
  

• In Configure, add the SignalR middleware after authentication:

  public void Configure(IApplicationBuilder app, IHostingEnvironment env)
  {
      // ... existing middleware (like app.UseAuthentication())
      app.UseSignalR(routes =>
      {
          routes.MapHub<ProductNotificationHub>("/productNotificationHub");
      });
  }
  

3. Create the SignalR Hub #

Make a new class that inherits from Hub—this acts as the communication bridge between backend and frontend:

using Microsoft.AspNetCore.SignalR;

namespace YourProjectName.Web.Hubs
{
    public class ProductNotificationHub : Hub
    {
        // We don't need custom hub methods here since we'll push from the backend directly
    }
}

4. Trigger Notifications from Product App Service #

When an admin updates a product name, inject the IHubContext into your product application service to send the notification to all connected users.

First, update your app service's constructor to inject IHubContext<ProductNotificationHub>:

using Microsoft.AspNetCore.SignalR;
using Abp.Application.Services;
using Abp.Authorization;

namespace YourProjectName.Products
{
    [AbpAuthorize("Admin")] // Ensure only admins can trigger this
    public class ProductAppService : ApplicationService, IProductAppService
    {
        private readonly IHubContext<ProductNotificationHub> _hubContext;
        private readonly IProductRepository _productRepository;

        public ProductAppService(
            IHubContext<ProductNotificationHub> hubContext,
            IProductRepository productRepository)
        {
            _hubContext = hubContext;
            _productRepository = productRepository;
        }

        // Your existing UpdateProduct method
        public async Task UpdateProduct(UpdateProductInput input)
        {
            var product = await _productRepository.GetAsync(input.Id);
            var oldName = product.Name;
            product.Name = input.NewName;

            await _productRepository.UpdateAsync(product);

            // Push notification to all logged-in users
            await _hubContext.Clients.All.SendAsync(
                "ReceiveProductUpdate",
                product.Id,
                input.NewName,
                oldName
            );
        }
    }
}

5. Secure SignalR Connections #

To ensure only logged-in users receive notifications, add an authentication check in the hub's OnConnectedAsync method:

public override async Task OnConnectedAsync()
{
    if (!Context.User.Identity.IsAuthenticated)
    {
        Context.Abort();
        return;
    }
    await base.OnConnectedAsync();
}

Ensure your ABP authentication middleware runs before SignalR in Startup.cs (it should already be part of ABP's default setup).

Frontend Setup (Angular 2) #

1. Install SignalR Client Package #

For Angular 2, use the compatible SignalR client package. Run this in your Angular project:

npm install @aspnet/signalr-client --save

2. Create a SignalR Notification Service #

Create a service to handle the SignalR connection and broadcast notifications to your Angular components:

import { Injectable } from '@angular/core';
import { HubConnection, HubConnectionBuilder } from '@aspnet/signalr-client';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class ProductNotificationService {
    private hubConnection: HubConnection;
    private productUpdateSubject = new Subject<{productId: number, newName: string, oldName: string}>();
    productUpdates$ = this.productUpdateSubject.asObservable();

    constructor() {
        this.startConnection();
        this.setupListeners();
    }

    private startConnection(): void {
        // Get the auth token from ABP's session (adjust based on your auth setup)
        const token = localStorage.getItem('AbpAuthToken');

        this.hubConnection = new HubConnectionBuilder()
            .withUrl('/productNotificationHub', {
                accessTokenFactory: () => token
            })
            .build();

        this.hubConnection.start()
            .then(() => console.log('SignalR connection established'))
            .catch(err => console.error('Error starting SignalR connection: ', err));
    }

    private setupListeners(): void {
        this.hubConnection.on('ReceiveProductUpdate', (productId, newName, oldName) => {
            this.productUpdateSubject.next({productId, newName, oldName});
        });
    }
}

3. Use the Service in Your Components #

Inject the service into any component that needs to display notifications. For example, a header component showing toast alerts:

import { Component, OnInit } from '@angular/core';
import { ProductNotificationService } from './product-notification.service';

@Component({
    selector: 'app-header',
    templateUrl: './header.component.html'
})
export class HeaderComponent implements OnInit {
    constructor(private notificationService: ProductNotificationService) {}

    ngOnInit(): void {
        this.notificationService.productUpdates$.subscribe(update => {
            // Show a toast or notification to the user
            alert(`Product ${update.productId} was updated: "${update.oldName}" → "${update.newName}"`);
            // Replace alert with a proper UI component like ngx-toastr if you have it
        });
    }
}

4. Register the Service in Angular Module #

Don't forget to add the service to your Angular module's providers:

import { NgModule } from '@angular/core';
import { ProductNotificationService } from './product-notification.service';

@NgModule({
    // ... declarations, imports
    providers: [ProductNotificationService]
})
export class AppModule {}

Key Notes & Troubleshooting #

• CORS Configuration: If your Angular app is on a different port/domain, update your ABP backend's CORS settings to allow SignalR requests. Add withCredentials: true to your CORS policy and include the SignalR hub path.
• Version Compatibility: Double-check that the SignalR server and client versions match (.NET Core 1.0 ↔ @aspnet/signalr-client 1.0.x). Mismatched versions can cause connection issues.
• Target Specific Users: If you need to notify only certain users instead of all logged-in ones, use _hubContext.Clients.User(userId) instead of Clients.All—you can get the user ID from AbpSession.UserId in your app service.

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