Com s'afegeix una funcionalitat web en temps real a l'aplicació Angular mitjançant ASP.NET

Bloc

Com s'afegeix una funcionalitat web en temps real a l'aplicació Angular mitjançant ASP.NET

Com s'afegeix una funcionalitat web en temps real a l'aplicació Angular mitjançant ASP.NET

En aquesta publicació, seguiré els passos necessaris per afegir funcions web en temps real a l'aplicació Angular mitjançant ASP.NET Enllaços del servei Core SignalR i Azure SignalR per a Azure Functions 2.0. Els temes específics que tractarà aquest article són

  • Afegeix ASP.NET Core SignalR a ASP.NET API web Core 2.1
    • ASP.NET Core SignalR
    • ASP.NET Core SignalR redimensiona mitjançant
      • Pla posterior del servei Azure SignalR
      • Planxa posterior de Redis Cache
  • Publicar / subscriure missatges a SignalR Hub des de l'aplicació Angular
  • Publiqueu / subscriviu missatges a SignalR Hub mitjançant les vinculacions del servei Azure SignalR per a Azure Functions 2.0 de l'Angular App
  • Creeu imatges de Docker i implementeu-les al servei Azure Kubernetes

Les eines que s’utilitzen per desenvolupar aquests components són Visual Studio for Mac / VS Code / VS 2017, AKS Dashboard, Docker for Desktop i kubectl.

Afegeix ASP.NET Core SignalR a ASP.NET API web Core 2.1

ASP.NET Core SignalR és una biblioteca de codi obert que simplifica afegir funcions web en temps real a les aplicacions. La funcionalitat web en temps real permet que el codi del servidor transmeti contingut als clients de manera instantània. Les següents seccions revisaran els canvis necessaris per afegir-hi SignalR ASP.NET API web Core 2.1 juntament amb SignalR redimensionen mitjançant els plans posteriors Azure SignalR Service i Redis.

ASP.NET Core SignalR

Els indicadors principals sobre el diagrama de components que es mostren a continuació són

reaccionar la mida de la font nativa
  • En navegar fins a l’aplicació angular (navegador), s’autenticarà l’usuari i es recuperarà el testimoni d’accés de l’Azure AD mitjançant MSAL
  • Angular App passarà el testimoni de portador (JWT) a les sol·licituds i ASP.NET L’API web Core 2.1 validarà el testimoni d’accés
  • L'aplicació angular establirà la connexió a ASP.NET Core SignalR Hub (API web) i publicar / subscriure missatges
  • Angular App establirà la connexió amb el servei Azure SignalR mitjançant el punt final de l’aplicació Function i publicarà / subscriu missatges
  • Aplicació angular, ASP.NET L’API web principal i l’SQL Server s’allotgen al servei Azure Kubernetes. Tinc els codis de colors dels Pods suposant la configuració de dos nodes.

Els passos necessaris per habilitar-los ASP.NET Core SignalR in ASP.NET L’API web Core 2.1 són

entrevista de microsoft al campus
  • Configureu SignalR Hub: l’API SignalR Hubs us permet trucar als mètodes dels clients connectats des del servidor. Al codi del servidor, definiu els mètodes que el client crida. Al codi de client, definiu els mètodes que es criden des del servidor. SignalR s’encarrega de tot el que hi ha darrere de les escenes que faci possible les comunicacions en temps real de client a servidor i de servidor a client. Afegiu la interfície INotificationHub i la classe NotificationHub necessàries per definir mètodes que el client crida.
public interface INotificationHub { Task MessageNotification(string message); Task PublishMessageAck(string value); } public class NotificationHub : Hub { public async Task PublishMessage(string message) { await this.Clients.AllExcept(this.Context.ConnectionId).MessageNotification($'Broadcast: {message}'); await this.Clients.Caller.PublishMessageAck($'Broadcast Ack: {message}'); } public override async Task OnConnectedAsync() { await Groups.AddToGroupAsync(Context.ConnectionId, 'Users'); await base.OnConnectedAsync(); } public override async Task OnDisconnectedAsync(Exception exception) { await Groups.RemoveFromGroupAsync(Context.ConnectionId, 'Users'); await base.OnDisconnectedAsync(exception); } }
  • Especifiqueu SignalRConfigMode SingalRConfigMode = SignalRConfigMode.ASPNetCoreSignalR a la classe Startup.cs
  • Actualitzeu el mètode ConfigureServices i afegiu el servei SignalR.
services.AddSignalR(options => { options.EnableDetailedErrors = true; });
    • Actualitzeu el mètode Configura i afegiu SignalR a IApplicationBuilder canalització d'execució de sol·licituds. El valor de la variable SignalRHub que he especificat a la mostra és /api/SignalRHub.
app.UseSignalR((options) => { options.MapHub(SignalRHub); });
  • Permet que el controlador d’autenticació JWT llegeixi l’accéstestimoni de la cadena de consulta quan entra una sol·licitud d'esdeveniments enviada per WebSocket o servidor Service.AddAuthentication(...).AddJwtBearer(...) mètode.
OnMessageReceived = context => { var accessToken = context.Request.Query['access_token']; var path = context.HttpContext.Request.Path; if (!string.IsNullOrEmpty(accessToken) && (path.StartsWithSegments(SignalRHub))) { context.Token = accessToken; } return Task.CompletedTask; },
  • Es pot accedir a les reclamacions de l’usuari autoritzat trucant a Context.User.Claims a la classe NotificationHub.

En un únic escenari de node / servidor, això funciona bé quan ASP.NET L'API web Core 2.1 es redueix, per exemple. quan s’executen més d’un Pods, els clients connectats a SignalR Hub en un Pod no rebran el missatge publicat a SignalR Hub en un altre Pod. ASP.NET Core SignalR admet Redis Cache i Azure SignalR Service.

ASP.NET Core SignalR redimineu mitjançant el pla posterior de Redis Cache

La memòria cau de Redis es pot utilitzar com a pla posterior per a ASP.NET Escala de Core SignalR. La memòria cau de Redis s'utilitza com a Pub / Sub per reenviar missatges a altres servidors. Aquesta opció necessita habilitar sessions enganxoses. L'únic canvi en el diagrama de components de la implementació anterior és que els pods de l'API web es comuniquen amb el servei Redis Cache.

Els canvis de codi necessaris per utilitzar la placa posterior de Redis són

  • Instal·leu el paquet Microsoft.AspNetCore.SignalR.Redis Nuget
  • Especifiqueu SignalRConfigMode SingalRConfigMode = SignalRConfigMode.Redis a la classe Startup.cs
  • Actualitzeu el mètode ConfigureServices i afegiu AddRedis
services.AddSignalR(options => { options.EnableDetailedErrors = true; }).AddRedis(RedisConnectionString);
  • Especifiqueu el valor de 'RedisConnectionString': 'REDIS_CONNECTION_STRING' a appsettings.json

ASP.NET El Core SignalR es redimensiona mitjançant el pla posterior del servei Azure SignalR

El servei Azure SignalR es pot utilitzar com a pla posterior per a ASP.NET Escala de Core SignalR. Aquesta opció no necessita sessions enganxoses per estar habilitada.Un dels motius clau per utilitzar el servei Azure SignalR és la simplicitat. Amb Azure SignalR Service, no cal que gestioneu problemes com el rendiment, l’escalabilitat i la disponibilitat.L'únic canvi del diagrama de components de la implementació anterior és que els pods de l'API web es comuniquen amb el servei Azure SignalR.

com comprar finançament de la guineu

Els canvis de codi necessaris per utilitzar el servei Azure SignalR són

  • Instal·leu el paquet Microsoft.Azure.SignalR Nuget
  • Especifiqueu SignalRConfigMode SingalRConfigMode = SignalRConfigMode.AzureSignalRService a la classe Startup.cs
  • Actualitzeu el mètode ConfigureServices i afegiu AddAzureSignalR
services.AddSignalR(options => { options.EnableDetailedErrors = true; }).AddAzureSignalR(configure => { configure.ConnectionString = AzureSignalRConnectionString; });
  • Actualitzeu el mètode Configure i afegiu UseAzureSignalR
app.UseAzureSignalR((options) => { options.MapHub(SignalRHub); })
  • Especifiqueu el valor de 'AzureSignalRConnectionString': 'AZURE_SIGNALR_CONNECTION_STRING' a appsettings.json

Publicar / subscriure missatges a SignalR Hub des de l'aplicació Angular

La mostra d'aplicacions angulars s'actualitza per publicar-se / subscriure's a SignalR Hub. Els principals indicadors sobre el fragment de codi que es detallen a continuació són

  • Instal·leu aspnet / signalr que proporciona suport per a clients JavaScript i TypeScript per SignalR per ASP.NET Nucli
  • L'URL SignalR Hub s'especifica a $ {this.config.get (). API_URL} $ {this.config.get (). SIGNALR_HUB}
  • El Token d'accés és necessari per autoritzar les sol·licituds a SignalR Hub i s'especifica a {accessTokenFactory: () => this.authHelper.getAccessTokenFromCache ()}
  • L'interval de connexió de nou intent és de 10000
  • L’aplicació es subscriu als missatges MessageNotification i PublishMessageAck de SignalR Hub
  • L’aplicació envia missatges a SignalR Hub mitjançant PublishMessage
  • Especifiqueu 'API_URL': 'WEB_API_URL' a 'environment.ts'
import { EventEmitter, Injectable, OnDestroy, OnInit } from '@angular/core'; import { HubConnection, HubConnectionBuilder } from '@aspnet/signalr'; import * as signalR from '@aspnet/signalr'; import { AuthHelperService, AccessTokenInfo } from './auth-helper.service'; import { Config } from './config/config'; @Injectable({ providedIn: 'root', }) export class SignalRService { messageReceived = new EventEmitter(); hubConnection: HubConnection; constructor(private authHelper: AuthHelperService, private config: Config) { } init() { this.createConnection(); this.startConnection(); } private createConnection() { this.hubConnection = new HubConnectionBuilder() .withUrl(`${this.config.get().API_URL}${this.config.get().SIGNALR_HUB}`, { accessTokenFactory: () => this.authHelper.getAccessTokenFromCache() }) .configureLogging(signalR.LogLevel.Information) .build(); this.hubConnection.onclose(err => { console.log('SignalR hub connection closed.'); this.stopHubAndunSubscribeToServerEvents(); this.restartConnection(err); }); } private restartConnection(err: Error): void { console.log(`Error ${err}`); console.log('Retrying connection to SignalR Hub ...'); setTimeout(() => { this.startConnection(); }, 10000); } private startConnection(): void { this.hubConnection .start() .then(() => { console.log('SignalR Hub connection started'); this.subscribeToServerEvents(); }) .catch(err => { this.restartConnection(err); }); } public publishMessage(message: string) { this.hubConnection.invoke('PublishMessage', message); } private subscribeToServerEvents(): void { this.hubConnection.on('MessageNotification', (data: any) => { this.messageReceived.emit('MessageNotification:' + data); }); this.hubConnection.on('PublishMessageAck', (data: any) => { this.messageReceived.emit('MessageNotification - Ack :' + data); }); } private stopHubAndunSubscribeToServerEvents(): void { this.hubConnection.off('MessageNotification'); this.hubConnection.off('PublishMessageAck'); this.hubConnection.stop().then(() => console.log('Hub connection stopped')); } }

Publiqueu / subscriviu missatges a SignalR Hub mitjançant les vinculacions del servei Azure SignalR per a Azure Functions 2.0 de l'Angular App

El bloc anterior d'aquesta sèrie descriu els passos necessaris per desenvolupar una aplicació de funcions ambEnllaços del servei Azure SignalR per a Azure Functions 2.0.La mostra d'aplicacions angulars s'actualitza per publicar / subscriure's a Azure SignalR Service Hub mitjançant Azure Functions (no cal que allotgeu cap aplicació web). Els principals indicadors sobre el fragment de codi que es detallen a continuació són

  • Instal·leu aspnet / signalr que proporciona suport per a clients JavaScript i TypeScript per SignalR per ASP.NET Nucli
  • $ {this.config.get (). La sol·licitud de negociació de FUNCTION_APP_URL} retornarà l'objecte SignalRConnectionInfo amb URL i accessToken.
  • Es necessita SignalRConnectionInfo per connectar-se a l'Azure SignalR Service Hub especificant accessTokenFactory: () => info.accessToken i url inUrl (url, opcions)
  • L'interval de connexió de nou intent és de 10000
  • L’aplicació envia missatges a SignalR Hub enviant una sol·licitud de publicació a $ {this.config.get (). FUNCTION_APP_URL} sendmessage
  • L’aplicació es subscriu a SendMessage, és a dir, this.hubConnection.on (‘sendMessage’, (dades: qualsevol) de SignalR Hub
  • Especifiqueu 'FUNCTION_APP_URL': 'FUNCTION_APP_URLFUNCTION_APP_URL' a environment.ts
import { Injectable, EventEmitter, OnDestroy } from '@angular/core'; import { HttpClient, HttpErrorResponse } from '@angular/common/http'; import { HubConnection, IHttpConnectionOptions } from '@aspnet/signalr'; import * as signalR from '@aspnet/signalr'; import { Observable, throwError } from 'rxjs'; import { SignalRConnectionInfo } from './signalRConnectionInfo'; import { Config } from './config/config'; @Injectable({ providedIn: 'root' }) export class SignalRFuncService { hubConnection: HubConnection; messageReceived = new EventEmitter(); constructor(private http: HttpClient, private config: Config) { } private getConnectionInfo(): Observable { const requestUrl = `${this.config.get().FUNCTION_APP_URL}negotiate`; return this.http.post(requestUrl, null); } init() { this.getConnectionInfo().subscribe((info: SignalRConnectionInfo) => { const options = { accessTokenFactory: () => info.accessToken }; this.createConnection(info.url, options); this.startConnection(); }, error => { console.error(`An error occurred during init: ${error}`); console.log('Retrying connection to Azure Function - SignalR Hub ...'); setTimeout(() => { this.init(); }, 10000); }); } private createConnection(url: string, options: IHttpConnectionOptions) { this.hubConnection = new signalR.HubConnectionBuilder() .withUrl(url, options) .configureLogging(signalR.LogLevel.Information) .build(); this.hubConnection.onclose(err => { console.log('Azure Function - SignalR Hub connection closed.'); this.stopHubAndunSubscribeToServerEvents(); this.restartConnection(err); }); } private startConnection(): void { this.hubConnection .start() .then(() => { console.log('Azure Function - SignalR Hub connection started.'); this.subscribeToServerEvents(); }) .catch(err => { this.restartConnection(err); }); } private restartConnection(err: Error): void { console.log(`Error ${err}`); console.log('Retrying connection to Azure Function - SignalR Hub ...'); setTimeout(() => { this.startConnection(); }, 10000); } send(message: string) { const requestUrl = `${this.config.get().FUNCTION_APP_URL}sendmessage`; this.http.post(requestUrl, message).subscribe( (data: any) => console.log(`Func Hub sendMessage: ${message}`), error => console.error(`An error occurred in sendMessage: ${error}`) ); } private subscribeToServerEvents(): void { this.hubConnection.on('sendMessage', (data: any) => { this.messageReceived.emit('MessageNotification - Function: ' + data); }); } private stopHubAndunSubscribeToServerEvents(): void { this.hubConnection.off('sendMessage'); this.hubConnection.stop().then(() => console.log('Hub connection stopped')); } } export class SignalRConnectionInfo { url: string; accessToken: string; }

Compileu Docker Images i implementeu-lo al servei Azure Kubernetes

Construeix imatges docker per a ASP.NET Core Web API i Angular App i desplegueu aquestes imatges d'acoblament al clúster del servei Azure Kubernetes. Després del desplegament, aneu a App Angular i envieu el missatge mitjançant ASP.NET Punt final Core SignalR o Azure Functions 2.0.

Resum

Això completa l'article sobre com afegir funcions web en temps real a l'aplicació Angular mitjançant ASP.NET Enllaços del servei Core SignalR i Azure SignalR per a Azure Functions 2.0. Es pot descarregar el codi font complet des de GitHub-AzureFunctions i GitHub-AKS .

Publicat originalment el blogs.msdn.microsoft.com

Espero que aquest post segurament us ajudi i vosaltres. Gràcies per llegir, comparteix si t'ha agradat.

llenguatge de consulta estructurat pdf

#angular # asp-net #docker #kubernetes #azure