SignalR with Angular and ASP.NET Core

blogs:

• Getting started with SignalR using ASP.NET Core and Angular
• SignalR Group messages with ngrx and Angular
• Using EF Core and SQLite to persist SignalR Group messages in ASP.NET Core
• Securing an Angular SignalR client using JWT tokens with ASP.NET Core and IdentityServer4
• Implementing custom policies in ASP.NET Core using the HttpContext
• Sending Direct Messages using SignalR with ASP.NET core and Angular
• Using Message Pack with ASP.NET Core SignalR
• Uploading and sending image messages with ASP.NET Core SignalR

History

2018-10-26: Updated Angular 7.0.1

2018-10-14: Updated Angular 6.1.10, .NET Core 2.1.5, ASP.NET Core SignalR 1.0.4

2018-09-09: Updated Angular 6.1.7

2018-08-03: Updated to .NET Core 2.1.2, Angular 6.1.0, bootstrap 4

2018-05-31: Updated to .NET Core 2.1

2018-05-27: Updated to Angular 6.0.3

2018-05-12: Updated to Angular 6.0.1, using message pack SignalR extension method in client

2018-05-08: Updated to .NET Core 2.1 rc1

2018-05-04: Updated to Angular 6

2018-04-22: Updating nuget packages and npm packages, @aspnet/signalr 1.0.0-preview2-final, Microsoft.AspNetCore.SignalR 1.0.0-preview2-final

2018-03-19: Added example for Message Pack

2018-03-14: Updated signalr Microsoft.AspNetCore.SignalR 1.0.0-preview1-final, Angular 5.2.8, @aspnet/signalr 1.0.0-preview1-update1

2017-10-15: Updated signalr 1.0.0-alpha2-final

SignalR

https://github.com/aspnet/SignalR#readme

npm feed

https://www.npmjs.com/package/@aspnet/signalr https://www.npmjs.com/package/msgpack5

MyGet feeds required for project if using the latest dev

https://dotnet.myget.org/F/aspnetcore-ci-dev/api/v3/index.json

https://dotnet.myget.org/F/aspnetcore-ci-dev/npm/ https://dotnet.myget.org/feed/aspnetcore-ci-dev/package/npm/@aspnet/signalr-client

npm packages

"@aspnet/signalr": "1.0.4",
"msgpack5": "4.2.0"

Production Build

The new uglifyjs-webpack-plugin is required.

Step 1:

in the package.json add:

"uglifyjs-webpack-plugin": "1.0.0-beta.2",

Step 2:

add the UglifyJSPlugin webpack plugin (S is capital), in the webpack production build file

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

Step 3:

Update the webpack production build

        new UglifyJSPlugin({
            parallel: {
                cache: true,
                workers: 2
            }
        }),