coresignalerintegration.md

ASPNET Core SignalR Integration

For more information about ASPNET Core SignalR check out SignalR ASPNET Core Integration.

1. Add SignalR to ABP

If you are using the ABP starter template SignalR is already implemented and you can skip to step 2

Follow the installation steps here

2. Add Abp.AppFactory.Sync

• Add the Abp.AppFactory.Sync NuGet Package to your Web.Core project

• Add Abp.AppFactory.Sync as a dependency to you WebCoreModule

[DependsOn( ...,
      typeof(Abp.AppFactory.Sync)]
public class ExampleWebCoreModule : AbpModule 
{ 
     ...
}

3. Add Abp.AppFactory.Interfaces

If Abp.AppFactory.Interfaces 1.3.0 or greater is already included in your Application project then skip to step 4

• Add the Abp.AppFactory.Interfaces NuGet Package to your Application project

4. Add Abp.AppFactory.AsyncCrudAppServiceBase

• Add the Abp.AppFactory.AsyncCrudAppServiceBase NuGet Package to your Application project

5. Use SyncHub in Startup

• In Startup.cs in Configure() replace AbpCommonHub with SyncHub:

...
using Abp.AppFactory.Sync;
...
public void Configure(...)
{
      ...

      app.UseSignalR(routes =>
      {
          routes.MapHub<SyncHub>("/signalr");
      });
      
      ...
}

6. Implement Sync on your Application Services

• Inherit AsyncCrudAppServiceBase on all your crud AppServices

...
using Abp.AppFactory

public class ExampleAppService : AsyncCrudAppServiceBase<Example, ExampleDto>
{

      public DataAppService(
            IRepository<Data, int> repository,
            ISyncHub syncHub,
            ...
            ) : base(repository, syncHub)
      {
            ...
      }
      ...
}

• If overriding Create, Update or Delete methods be sure to either call the base method or call Sync() when you update your entities

        public override Task<ExampleDto> Update(ExampleDto input)
        {
            ...
            return base.Update(input);
        }
        
        /// OR
        
        public override async Task Delete(EntityDto<int> input)
        {
            ...
            await Sync();
        }

7. Add Abp.AppFactory.SyncedPagedListingComponentBase

• Add the Abp.AppFactory.SyncedPagedListingComponentBase file to your shared folder in your Angular project

8. Implement Sync on your Angular Components

• Extend components with SyncedPagedListingComponentBase

export class ExampleComponent extends SyncedPagedListingComponentBase<ExampleDto> {
      ...
      constructor(
            injector: Injector,
            ...
      ) {
            super(injector, ExampleDto);
            ...
      }
}

• If overriding ngOnInit be sure to call the super method

  ngOnInit() {
      super.ngOnInit();
      ...
  }

Done!

• Now when an entity is added or updated all related pages will refresh their data