ASP.NET Core SignalR est une bibliothèque de Microsoft qui, notamment, permet aux développeurs d’intégrer des fonctionnalités en temps réel dans les applications web. Bien que la première chose qui vienne naturellement à l’esprit lorsque l’on entend « temps réel » soit un chat, cela peut s’appliquer à de nombreux cas d’utilisation tels que les jeux, les sondages en ligne, les tableaux de bord en temps réel, les applications collaboratives, etc. Chez Redwerk, nous avons une grande expérience de SignalR, et pouvons affirmer sans risque qu’il s’agit d’une bibliothèque réellement puissante et facile à utiliser.
Imaginons que vous soyez confronté à une situation où votre client dispose d’un tableau de bord de planification pour une grande équipe. Comment fournir aux utilisateurs finaux des informations à jour sans les obliger à actualiser la page en permanence ? Ou, par exemple, si vous utilisez Azure Media Services et que vous devez informer vos utilisateurs que la vidéo a été traitée avec succès ? La mauvaise approche serait d’utiliser le sondage (polling). En réalité, le sondage en soi n’est pas une mauvaise chose car, par nature, il s’agit simplement de l’implémentation d’un appel à un point d’accès (endpoint). Cependant, le sondage constant est une perte de ressources, surtout lorsque vous devez interroger un point d’accès qui récupère à chaque fois quelque chose de la base de données. C’est une perte de ressources, de trafic, d’efforts, et il est indéniable que la plupart des requêtes seront inutiles. C’est là que SignalR entre en jeu.
Comme mentionné dans la documentation officielle, SignalR prend en charge plusieurs techniques pour gérer les communications en temps réel :
- WebSockets : C’est la méthode la plus optimale car c’est le seul transport qui établit une connexion bidirectionnelle persistante. Si le client et le serveur prennent en charge un tel mécanisme, il sera utilisé.
- Server-Sent Events (Événements envoyés par le serveur) : Utilisé lorsque les WebSockets ne sont pas pris en charge. Il s’agit d’un mécanisme qui permet au serveur de pousser de manière asynchrone des données vers le client une fois qu’un canal entre le serveur et le client est créé (en créant un objet appelé EventSource).
- Long Polling (Sondage long) : Utilisé lorsque les WebSockets et les Server-Sent Events ne sont pas pris en charge. Il est basé sur le modèle d’application web Comet, dans lequel le client demande des informations au serveur comme dans un sondage normal, mais si le serveur n’a aucune nouvelle information pour le client, au lieu d’envoyer une réponse vide, il maintient la requête ouverte et attend que des informations soient envoyées. Une fois qu’il en a, le serveur termine la requête en envoyant une réponse au client. Ordinairement, après cela, le client demande immédiatement à nouveau des informations au serveur, de sorte que le serveur dispose presque toujours d’une requête en attente disponible.
En arrière-plan, SignalR choisit automatiquement la meilleure méthode parmi celles que le serveur et le client sont capables d’utiliser.
Dans cet article, nous utiliserons ASP.NET Core SignalR et certaines personnes pourraient confondre avec ASP.NET SignalR. Clarifions donc ce point. Il existe deux implémentations de SignalR :
- ASP.NET SignalR : Représenté par le package NuGet Microsoft.AspNet.SignalR et s’exécute sur les applications utilisant le .NET Framework et System.Web ;
- ASP.NET Core SignalR : Fait partie de la plateforme ASP.NET Core qui s’exécute sur .NET Core et .NET Framework et utilise le package NuGet Microsoft.AspNetCore.App. Il n’est pas compatible avec les clients ou serveurs ASP.NET SignalR.
Dans l’ensemble, ASP.NET Core SignalR conserve bon nombre des concepts et fonctionnalités de base de SignalR. Voici les principales différences entre eux :
- Reconnexions automatiques. Elles ne sont pas prises en charge dans ASP.NET Core SignalR. L’application cliente doit explicitement démarrer une nouvelle connexion lorsqu’elle est nécessaire. Lorsque ASP.NET SignalR est apparu pour la première fois, la reconnexion automatique semblait être une bonne idée, mais cela s’est avéré buggé et inefficace. Il en va de même pour la mise en mémoire tampon des messages non envoyés par le serveur ; c’est au serveur de l’implémenter ou non.
- Différences côté client. Le client ASP.NET Core SignalR est écrit en TypeScript. Vous pouvez utiliser la bibliothèque cliente JavaScript ou TypeScript sans référence obligatoire à jQuery. De plus, la manière d’obtenir le client a changé : dans les versions précédentes, le client JavaScript était obtenu via un package NuGet dans Visual Studio, mais vous pouvez maintenant utiliser npm pour obtenir et installer le package.
- Mise à l’échelle (Scaleout). Ils présentent une légère différence en matière de mise à l’échelle depuis que le service Azure SignalR prend en charge ASP.NET. Essentiellement, SignalR disposait d’un support intégré pour la mise à l’échelle avec Redis et SQL Server. ASP.NET Core SignalR a été repensé avec un modèle de mise à l’échelle plus simple et plus extensible : il prend en charge Redis et le service Azure SignalR.
- Prise en charge des protocoles. ASP.NET Core SignalR prend en charge JSON, un nouveau protocole binaire basé sur MessagePack, et permet également de créer des protocoles personnalisés.
- Injection de dépendances (DI). ASP.NET Core intègre l’injection de dépendances. Les services peuvent l’utiliser pour accéder au HubContext (et nous examinerons ce point plus loin dans l’article).
Dans cet article, nous examinerons le processus de création d’un chat simple. Bien qu’il s’agisse d’un exemple très « classique », il est facile de montrer le processus général de travail avec SignalR et cela ne prend pas beaucoup de temps. Comme framework frontend, nous utiliserons Vue.js, un framework JavaScript open-source pour la création d’interfaces utilisateur. Actuellement, ASP.NET Core ne prend en charge nativement qu’Angular, React et React avec Redux. Dans le paragraphe suivant, nous examinerons un peu comment gérer cette situation et vous donnerons une idée générale de ce avec quoi nous allons travailler dans la partie pratique.
Puisque notre objectif principal est d’acquérir des connaissances sur la manière de travailler avec ASP.NET Core SignalR, nous n’analyserons pas Vue.js en détail. Bien sûr, nous fournirons quelques détails qui permettront aux lecteurs d’avoir une compréhension générale du fonctionnement de tout cela, mais pas de manière trop détaillée.
ASP.NET Core avec Vue.js
La discussion sur ce qui serait le mieux à utiliser – ReactJS, Angular, Vue.js, ou autre chose – pourrait faire l’objet d’un article indépendant. Dans celui-ci, nous avons choisi le framework Vue.js car il est assez simple, mais puissant, avec une bonne documentation (ce qui est également important, surtout pour les débutants). Vue est devenu le projet GitHub frontend le plus populaire en 2018. Au moment de la rédaction, il compte 148 000 étoiles et plus de 21 000 forks sur GitHub. De plus, Vue.js n’a pas de modèle officiel, et ceux qui souhaitent l’utiliser peuvent être un peu désorientés quant à ce qu’il faut faire. Toutes ces raisons ont motivé le choix de Vue.js et la présentation de certaines solutions disponibles pour les lecteurs.
Le problème du manque de modèle s’est posé pour les développeurs avec la version ASP.NET Core 2.1. Auparavant, les modèles SPA étaient disponibles via le package Microsoft.AspNetCore.SpaTemplates et prenaient en charge Vue.js. Depuis que tous les modèles SPA ont été déplacés dans le dépôt principal, leur choix est devenu plus limité. La bonne nouvelle est qu’il existe plusieurs façons de résoudre ce problème.
La première variante consiste à créer un projet distinct pour le frontend en utilisant le Vue CLI. C’est une solution très courante et vous trouverez de nombreux guides à ce sujet. Cette variante est également plus complexe mais présente ses propres avantages, tels que la mise à l’échelle indépendante et la possibilité d’utiliser des options d’hébergement adaptées à chacun.
La deuxième approche consiste à remplacer manuellement React par Vue.js dans le modèle React SPA. En fait, c’est précisément ainsi que certains modèles open source ont été créés, vous pouvez donc maintenant comprendre leur base et leur nature.
Par souci de concision, nous n’allons pas nous arrêter sur toutes ces solutions. Au lieu de cela, nous nous arrêterons sur la dernière solution mentionnée ici : l’utilisation des modèles déjà créés (que nous avons mentionnés précédemment). Il existe un certain nombre de modèles open source que vous pouvez utiliser. Nous avons choisi un modèle assez populaire de TrilonIO. En fait, vous pouvez essayer n’importe quel autre modèle et décider lequel vous convient le mieux. Notre choix a été motivé par le fait que nous avons une bonne expérience de l’utilisation de ce modèle dans l’un de nos projets.
Maintenant que vous avez une vision de ce pour quoi SignalR est adapté, des exigences pour notre démo et de ce qui nous a conduits à ces choix, nous pouvons commencer à examiner l’ensemble du processus de manière ciblée.
Démarrer avec Vue.js et ASP.NET Core SignalR
Configuration du projet
Dans ce paragraphe, nous examinons en détail le processus de création d’un chat simple. Ainsi, ceux qui le connaissent déjà d’une manière ou d’une autre peuvent sauter l’explication et simplement examiner la manière de travailler avec SignalR. Cependant, pour les débutants, cela doit être utile et intéressant de voir le processus depuis le début. Nous examinons une variante de création d’une nouvelle solution avec le projet en utilisant Windows PowerShell. Vous devez avoir installé Node.js et .NET Core, et bien sûr avoir un IDE.
Alors, commençons. Ouvrez la console, naviguez jusqu’à votre dossier et exécutez la commande suivante :
$ dotnet new sln -n RealTimeApp
Avec la commande `dotnet new`, vous pouvez créer un nouveau projet, un fichier de configuration ou une solution basée sur le modèle spécifié avec toutes les dépendances requises. Ici, nous indiquons que nous voulons créer une solution (avec l’option `sln`) nommée `RealTimeApp` (avec l’option `-n RealTimeApp`). Si vous ne spécifiez pas le nom, il correspondra automatiquement au nom du dossier. Après avoir exécuté cette commande, vous devriez voir une solution nouvellement créée dans votre dossier. Conformément à la structure standard du projet, créez un nouveau dossier à côté de la solution avec la commande suivante :
$ md RealTimeAppCore
Nous utilisons ensuite le modèle TrilonIO, qui doit être installé manuellement en exécutant la commande suivante dans le dossier créé :
$ dotnet new --install "aspnetcore-vuejs"
En conséquence, vous devriez voir une liste de tous les modèles disponibles et pouvoir créer un nouveau projet avec l’un d’eux. Le modèle dont nous avons besoin doit s’appeler vuejs, et avec la commande ci-dessous, nous pouvons créer un nouveau projet en utilisant :
$ dotnet new vuejs
Le nom du projet est le même que le nom du dossier, ce qui nous convient. Les commandes ci-dessus créent simplement le nouveau projet et la solution, mais ils ne sont pas connectés l’un à l’autre. Pour les lier ensemble, retournez dans le dossier de la solution et exécutez cette commande :
$ dotnet sln add .RealTimeAppCoreRealTimeAppCore.csproj
Si vous ouvrez maintenant le projet dans Visual Studio, vous verrez un projet assez standard avec quelques contrôleurs, vues et modèles, ainsi qu’un exemple d’utilisation basique. Le modèle peut être assez intéressant pour ceux qui n’ont aucune expérience de Vue.js. Nous créons tout à partir de zéro, alors supprimons les fichiers inutiles suivants :
- …ClientAppcomponentsabout.vue
- …ClientAppcomponentsfetch-data.vue
- …ClientAppcomponentscounter-example.vue
- dossier entier…Providers
- …ControllersWeatherController.cs
- …ModelsWeatherForecast.cs
Après la suppression, vous pourriez rencontrer des erreurs. Pour les corriger, il suffit de nettoyer la classe Startup en supprimant les lignes suivantes :
- using RealTimeAppCore.Providers ;
- services.AddSingleton<IWeatherProvider, WeatherProviderFake>();
À ce stade, nous avons un projet propre et pouvons commencer à configurer un projet pour nos besoins. Premièrement, nous aurons besoin d’un modèle et d’un contrôleur. Faites un clic droit sur le dossier “Models”, sélectionnez “Add” dans le menu contextuel et créez une nouvelle classe “Message”. Dans notre cas, elle ne doit contenir que deux champs : “Text” et “Date”, comme indiqué ci-dessous :
using System;
namespace RealTimeAppCore.Models {
public class Message {
public string Text { get; set; }
public DateTime Date { get; set; }
}
}
La structure est suffisamment simple, c’est pourquoi nous n’avons pas besoin de l’examiner. Le contrôleur sera un peu plus compliqué. De même que pour les modèles, faites un clic droit sur le dossier “Controllers”, sélectionnez “Add” dans le menu contextuel et créez une nouvelle classe “MessagesController”. Voici le contenu de ce fichier, que nous examinons ci-dessous :
using Microsoft.AspNetCore.Mvc;
using RealTimeAppCore.Models;
using System.Collections.Generic;
namespace RealTimeAppCore.Controllers {
[Route("api/[controller]")]
public class MessagesController : Controller {
[HttpGet("[action]")]
public IActionResult GetMessages() {
List messages = new List();
var result = new {
messages
};
return Ok(result);
}
}
}
Avec l’attribut `[Route(“api/[controller]”)]`, nous définissons que toutes les méthodes de ce contrôleur peuvent être exécutées pour le chemin `[hôte]/api/[nom du contrôleur]/[nom de la méthode]`. Les débutants doivent garder à l’esprit que le nom du contrôleur fait référence à la partie du nom sans le mot « Controller », donc pour la méthode `GetMessages`, l’URL est `[hôte]/api/Messages/GetMessages`. À ce stade, nous n’avons qu’une seule méthode, qui renvoie une liste vide de messages.
Pour terminer la configuration de notre projet, nous devons également apporter quelques modifications aux fichiers frontend. Tout d’abord, nettoyons nos routes en remplaçant le contenu du fichier `ClientApprouterroutes.js` par les lignes suivantes :
import HomePage from 'components/home-page'
export const routes = [
{ name: 'home', path: '/', component: HomePage, display: 'Home', icon: 'home' }
]
Nous avons juste besoin d’un routage simple, donc le routage nettoyé (puisque nous avons supprimé d’autres vues) de l’exemple nous convient. Deuxièmement, nous devons mettre à jour notre page d’accueil. À cette étape, nous supprimons simplement toutes les données inutiles et ajoutons un chargeur simple, un titre et une méthode pour récupérer les données. Remplacez le contenu du fichier `ClientAppcomponentshome-page.vue` par les lignes suivantes :
<template>
<div>
<h1>Simple chat</h1>
<div v-if="!messages" class="text-center">
<p><em>Chargement...</em></p>
<h1><icon icon="spinner" pulse /></h1>
</div>
<template v-if="messages">
<div v-for="(message, index) in messages" :key="index">
<p><em>Message:</em>'{{ message.text }}'</p>
</div>
</template>
</div>
</template>
<script>
export default {
data() {
return {
messages: null
}
},
methods: {
async loadMessages() {
try {
let response = await this.$http.get(`/api/messages/getMessages`)
this.messages = response.data.messages
} catch (err) {
console.log(err)
}
}
},
async created() {
this.loadMessages()
}
}
</script>
<style>
</style>
Pour ceux qui ne connaissent pas Vue.js, examinons un peu le contenu de ce fichier. Lorsqu’une instance Vue est créée, elle ajoute toutes les propriétés trouvées dans son objet `data` au système de réactivité de Vue. Dans notre exemple, nous avons simplement défini un objet « messages » vide, qui sera mis à jour dans la méthode `loadMessages`.
Chaque instance Vue lors de sa création passe par une série d’étapes d’initialisation et exécute des fonctions dites de « hooks de cycle de vie ». Avec l’aide de tels hooks, vous pouvez ajouter votre propre code à exécuter à des étapes spécifiques. Dans notre exemple, nous avons utilisé le hook « created » pour définir l’objet message avec les données du contrôleur après la création de l’instance Vue.
En fait, les lecteurs qui veulent simplement savoir comment configurer un projet ASP.NET Core avec Vue.js devraient avoir un modèle de base maintenant.
Configurer SignalR
Il est maintenant temps de découvrir le point clé de l’article : SignalR. Vous n’avez pas besoin d’installations supplémentaires car il fait partie du méta-package Microsoft.AspNetCore.App, qui doit être installé automatiquement.
Pour activer SignalR, il suffit de mettre à jour votre classe Startup comme suit :
- Ajoutez le `using` `Microsoft.AspNetCore.SignalR;` au début du fichier ;
- Mettez à jour la méthode `ConfigureServices` en ajoutant l’appel `services.AddSignalR()`, qui configure les services requis par le middleware SignalR :
public void ConfigureServices(IServiceCollection services) { services.AddSignalR(); // Add framework services. services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2); } - Configurez les routes SignalR en appelant `app.UseSignalR` dans la méthode `Startup.Configure` :
public void Configure(IApplicationBuilder app, IHostingEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); // Webpack initialization with hot-reload. app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions { HotModuleReplacement = true, }); } else { app.UseExceptionHandler("/Home/E // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts. app.UseHsts(); } app.UseHttpsRedirection(); app.UseStaticFiles(); app.UseSignalR(route => { route.MapHub("/signalr-hub"); }); app.UseMvc(routes => { routes.MapRoute( name: "default", template: "{controller=Home}/{action=Index}/{id?}"); routes.MapSpaFallbackRoute( name: "spa-fallback", defaults: new { controller = "Home", action = "Index" }); }); }
Avec la ligne `route.MapHub(“/signalr-hub”)`, nous configurons la classe `SignalRHub` comme gestionnaire de requêtes pour le chemin « signalr-hub », de sorte que les clients devraient pouvoir se connecter au hub à l’adresse `[hôte]/signalr-hub`.
Démarrer avec les Hubs SignalR
En utilisant les hubs, ASP.NET Core SignalR rend possible la communication bidirectionnelle entre le serveur et le client. Comme décrit dans la documentation officielle, les hubs appellent le code côté client en envoyant des messages contenant le nom et les paramètres de la méthode côté client. Le client essaie de faire correspondre le nom à une méthode dans le code côté client. Lorsqu’une correspondance est trouvée, il appelle la méthode et lui transmet les données de paramètre désérialisées.
La création d’un hub est un processus très simple. Créez un nouveau dossier nommé « Hubs » dans le projet et ajoutez un nouveau fichier `SignalRHub.cs`. Notre nouvelle classe doit hériter de la classe de base Hub :
using Microsoft.AspNetCore.SignalR;
namespace ResPlanner.Hubs {
public class SignalRHub : Hub {
}
}
Vous pouvez également ajouter des méthodes publiques dans cette classe, qui peuvent être appelées par les clients. SignalR gère la sérialisation et la désérialisation des paramètres et des valeurs de retour, vous pouvez donc les spécifier comme dans n’importe quelle méthode C#.
Nous utilisons également la bibliothèque cliente JavaScript SignalR pour gérer l’établissement de la connexion à notre Hub et pour la gestion des événements. Elle est fournie sous forme de package npm, vous pouvez donc facilement l’installer en exécutant cette commande :
$ npm install --save-dev @aspnet/signalr
Maintenant, nous sommes prêts pour la dernière étape du guide : créons une nouvelle méthode dans le contrôleur, qui recevra un nouveau message, enverra un événement à tous les clients et préparera notre client à recevoir cet événement.
Puisque nous devons envoyer un événement non pas depuis le Hub lui-même, mais depuis le contrôleur, nous devons injecter un `IHubContext` dans le contrôleur en l’ajoutant au constructeur, comme vous pouvez le voir dans le listing ci-dessous. Nous ajoutons également une nouvelle méthode qui reçoit un modèle créé précédemment et envoie un événement à tous les clients connectés, en utilisant `Clients.All`. Voici à quoi votre contrôleur doit ressembler maintenant :
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.SignalR;
using RealTimeAppCore.Models;
using ResPlanner.Hubs;
using System;
using System.Collections.Generic;
using System.Threading.Tasks;
namespace RealTimeAppCore.Controllers {
[Route("api/[controller]")]
public class MessagesController : Controller {
///
/// The context
///
private readonly IHubContext _hubContext;
public MessagesController(IHubContext hubContext) {
_hubContext = hubContext;
}
[HttpGet("[action]")]
public IActionResult GetMessages() {
List messages = new List();
var result = new {
messages
};
return Ok(result);
}
[HttpPost("[action]")]
public async Task SendMessage([FromBody]Message message) {
await _hubContext.Clients.All.SendAsync("RefreshEvent", Json(new {
text = message.Text,
date = DateTime.Now.ToString("MM/dd/yyyy HH:mm:ss")
}));
}
}
}
Essentiellement, ce sont tous les changements pour le côté serveur. Pour se connecter et écouter les événements du serveur, côté client, nous devrions faire ce qui suit :
- Dans la méthode `initSignalR()` :
- Créez une nouvelle connexion au Hub avec les lignes suivantes :
this.connection = new HubConnectionBuilder() .withUrl(window.location.origin + '/signalr-hub') .configureLogging(LogLevel.Information) .build(); … this.connectToSignalR(); - Configurez la reconnexion après 5 secondes, si la connexion du Hub est fermée :
this.connection.onclose(() => { this.connectToSignalR(); }) - Commencez à écouter l’événement `RefreshEvent` du serveur. Une fois reçu, notre liste de messages devrait être mise à jour avec de nouvelles données :
this.connection.on('RefreshEvent', (data) => { this.messages.push({ text: data.value.text, date: data.value.date }) this.$store.getters.needReloadPage })
- Créez une nouvelle connexion au Hub avec les lignes suivantes :
- Ajoutez la méthode `connectToSignalR`, dans laquelle nous établissons réellement la connexion :
connectToSignalR() { this.connection.start().catch(err => { console.error('Failed to connect with hub', err) return new Promise((resolve, reject) => setTimeout(() => this.connectToSignalR().then(resolve).catch(reject), 5000)) }) }
De plus, nous devrions ajouter une nouvelle méthode pour envoyer un message au serveur. D’abord, nous ajoutons un formulaire pour la saisie utilisateur après le template avec un champ de saisie et un bouton, comme ceci :
<section class="form">
<div class="field">
<div class="control">
<input v-model="form.textMessage" class="message-input" type="text" placeholder="Type a message here">
<button class="dark-bg text-white submit-button" @click.prevent="sendMessage">Submit</button>
</div>
</div>
</section>
Ensuite, nous lions la valeur de l’élément de saisie du formulaire aux données de l’instance Vue en utilisant la directive v-model, donc les données devraient ressembler à ceci :
data() {
return {
messages: [],
form: {
textMessage: ''
}
}
},
Enfin, nous ajoutons la méthode `sendMessage()`, qui doit être appelée après que l’utilisateur a cliqué sur le bouton et qui doit appeler la méthode `SendMessage` du contrôleur. Ainsi, après toutes ces modifications, votre fichier ‘home-page.vue’ devrait contenir ce qui suit :
<template>
<div>
<h1>Simple chat</h1>
<div v-if="!messages" class="text-center">
<p>Chargement...</p>
<h1><icon icon="spinner" pulse /></h>
</div>
<template v-if="messages">
<div v-for="(message, index) in messages" :key="index">
<p> <em>Message le {{ message.date }}: </em> '{{ message.text }}'</p>
</div>
</template>
<section class="form">
<div class="field">
<div class="control">
<input v-model="form.textMessage" class="message-input" type="text" placeholder="Type a message here">
<button class="dark-bg text-white submit-button" @click.prevent="sendMessage"gt;Submit</button>
</div>
</div>
</section>
</div>
</template>
<script>
import { HubConnectionBuilder, LogLevel } from '@aspnet/signalr'
export default {
data() {
return {
messages: [],
form: {
textMessage: ''
}
}
},
methods: {
async loadMessages() {
try {
let response = await this.$http.get(`/api/messages/getMessages`)
console.log(response.data.messages)
this.messages = response.data.messages
} catch (err) {
window.alert(err)
console.log(err)
}
},
initSignalR() {
this.connection = new HubConnectionBuilder()
.withUrl(window.location.origin + '/signalr-hub')
.configureLogging(LogLevel.Information)
.build();
this.connection.onclose(() => {
this.connectToSignalR();
})
this.connectToSignalR();
this.connection.on('RefreshEvent', (data) => {
this.messages.push({ text: data.value.text, date: data.value.date })
this.$store.getters.needReloadPage
})
},
connectToSignalR() {
this.connection.start().catch(err => {
console.error('Failed to connect with hub', err)
return new Promise((resolve, reject) =>
setTimeout(() => this.connectToSignalR().then(resolve).catch(reject), 5000))
})
},
closeConnectionSR() {
if (!this.connection) return;
this.connection.off('RefreshEvent');
this.connection = null;
},
sendMessage() {
this.$http.post('api/Messages/SendMessage', {
text: this.form.textMessage
})
.then(request => {
console.log(request)
if (request.status = 200) {
this.form.textMessage = '';
}
});
}
},
async created() {
this.initSignalR()
}
}
</script>
<style>
.submit-button {
padding: .5rem .75rem;
margin-left: 10px;
border: 1px solid #dee2e6;
border-radius: 10px;
width: 150px;
}
.message-input {
padding: .5rem .75rem;
color: #007bff;
border: 1px solid #dee2e6;
border-radius: 10px;
width: 700px;
height: 50px;
}
</style>
Vous pouvez maintenant commencer à tester notre chat de démonstration ! Essayez d’ouvrir deux fenêtres de navigateur différentes et commencez à discuter : vous verrez que tous les clients disponibles afficheront les données mises à jour :
Conclusion
Dans cet article, nous avons essayé de couvrir tous les aspects généraux de la manière de commencer à travailler avec ASP.NET Core, Vue.js et SignalR. Vous y trouverez également des détails sur ce qu’est SignalR, les avantages qu’il offre, une brève comparaison entre ASP.NET SignalR et ASP.NET Core SignalR, etc. Nous espérons que cet article a dissipé certaines craintes des débutants et a montré une autre façon de travailler avec ces technologies aux développeurs plus expérimentés. Nous pensons donc que chacun devrait pouvoir y trouver quelque chose d’intéressant et de nouveau.
Découvrez comment nous avons développé une solution pour une logistique fitness transparente en utilisant ASP.NET core
