Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Découvrir ASP.NET Core 1.0

Générer du push avec Signal-R

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Envoyez des données en temps réel à tous les utilisateurs grâce aux WebSockets. Pour cela, vous utiliserez Signal-R, une technologie disponible sous ASP.NET Core.
07:27

Transcription

Nous allons terminer par implémenter une fonctionnalité de push dans notre site. Alors, le push utilise indirectement des technologies de web sockets ou de server sent events, de technologies qui sont assez récentes, qui permettent d'envoyer des informations au navigateur, sans pour autant répondre à une sollicitation de l'utilisateur. Prenons un exemple. Si jamais la personne clique ici sur J'Aime, tous les autres sorciers qui regardent le site et notamment ce sortilège, pourraient être intéressés de voir le J'Aime évoluer. Et ils n'ont pourtant peut-être rien fait, ils sont en train de regarder juste le site et il y a des évolutions sur le site à faire, des mises à jour. Donc c'est ce que l'on va faire maintenant en utilisant un signal R qui, sur ASP.NET Core, n'est pas encore distribué, mais par contre que l'on peut trouver au niveau des dépôts des développeurs. Il se peut que, au moment où vous regardiez la vidéo, signal R soit distribué, soit en release. et donc vous puissiez l'inclure avec le gestionnaire de paquets que l'on a utilisé jusqu'à maintenat : nuGet. Nous, on va rajouter donc ce dépôt dans notre fichier en ajoutant un fichier dans notre projet NuGet.config et en collant donc ce fichier de configuration ici, où on précise, dans cette partie-là, voilà, le dépôt où on trouvera nos ressources. Alors maintenant on peut aller dans project.json pour spécifier les deux dépendances dont on a besoin, signal R server et web sockets. Enregistrer. La mise à jour se fait. Et donc tout de suite, on peut commencer à utiliser signal R. Pour utiliser signal R, première chose à faire déjà l'initialiser dans le Startup.cs ici. Alors, ici dans Configure Services, déjà on va activer une partie des logs pour s'y retrouver, voilà. C'est toujours utile, sur une technologie comme ça, d'avoir plus d'informations, puisque le débuggage se fait entre le client et le serveur. Et puis pour mettre en oeuvre le routage, ici, voilà. Donc là on paramètre les web sockets pour que on puisse ouvrir une connexion entre le client et le server en dehors du modèle HTTP puisque les web sockets sont des sockets à part. Et puis, pouvoir envoyer des données depuis le server. Alors, l'outil que l'on va utiliser maintenant, qui va nous permettre d'envoyer à tous les utilisateurs c'est ce qu'on appelle un hub. Alors, on isole en général les hubs dans un répertoire Hubs. Et on va créer un hub. Alors, c'est une classe très facile à créer, puisque on a juste à la faire dériver de Hubs. On va l'appeler JAimeHub là, pour qu'on distingue bien les deux mots, j'aime hub. Et puis donc on va la dériver de Hubs. Alors, Hubs est dans ici ASP NET Core signal R, voilà. Maintenant il faut se demander où c'est que l'on veut pouvoir envoyer l'information aux utilisateurs. Nous, on va capter un J'Aime envoyé par une requête AJAX dans notre contrôleur Home. Et puis donc il va recevoir une information J'Aime ici avec l'identifiant de l'objet sur lequel on a fait un J'Aime. Et ensuite donc on traite cette requête AJAX, qui sera en Get, on cherche le sortilège de cet identifiant, si on ne l'a pas trouvé, c'est une mauvaise requête, on pourra même mettre un NotFound. C'est plus naturel. Ensuite, on incrémente le J'Aime et on met à jour la base de données. Et, si tout s'est bien passé, on peut récupérer notre hub et envoyer donc. Ici cette méthode c'est au choix, et on peut mettre toutes les méthodes que l'on veut, ici, et pareil pour les paramètres. C'est ce qu'on appelle un objet dynamique, le All. Et il s'adaptera à tout ce qu'on met là. Par contre, on verra la correspondance dans Javascript. Le context manager est un objet Signal R, donc il faut inclure signal R infrastructure, et l'initialiser par injection dépendante. Donc ici. Comme on l'avait fait pour Entity Framework notamment, si vous vous rappelez bien. Donc, côté server, tout est bon. On ouvre bien le web socket, on envoie les informations. Maintenant, côté client, il faut les recevoir, et puis aussi signaler |quand une personne clique. Donc pour ces deux étapes, on va déjà intégrer dans notre programme et dans notre côté client tout ce qu'il faut pour avoir les Hubs de Signal R. Donc c'est ces trois lignes d'inclusion de script. Et puis, on va rajouter le code dépendant. Alors ce code c'est, je récupère le Hub, et je récupère tous les éléments qui sont en J'Aime, et puis je vais associer un clic à ces éléments. Donc J'Aime, ici, je vais faire un clic pour chacun. Quand je clique, qu'est-ce que je fais ? Je sollicite juste le Home J'Aime, que je viens de coder côté contrôleur, en lui passant l'identifiant du sort sur lequel je clique. Voilà, donc il faut signaler les objets qui sont J'Aime et puis signaler aussi ici les éléments qu'il faut modifier quand on clique. Et les éléments qu'il faut modifier quand on reçoit le signal c'est ici. On retrouve le nom de la méthode, donc ici vous devez avoir, ici dans J'Aime, ce que vous avez utilisé sur le All ici. Donc c'est exactement, ici, la même valeur puisque c'est ça qui va faire le lien entre l'appel du contrôleur sur le web socket et votre Javascript. Et donc on modifiera l'élément que j'ai marqué par jm pour prendre le sortilège en question. Je retrouve d'après son identifiant, je reçois un objet JSON, et je mets à jour. Enfin il faut modifier donc nos boutons. Ici rajouter une classe jm pour retrouver ce bouton. Rajouter l'identifiant du sort qui correspond. Et puis ici signaler le J'Aime de façon à pouvoir le modifier facilement en lui donnant un identifiant aussi, pour le retrouver avec le GetElement by Id. Donc voilà. Maintenant tout est implémenté, on va pouvoir tester. Alors il va nous falloir un deuxième navigateur. Donc on a l'URL. Alors ici on va constater, mais c'est assez facile, que ça marche bien. Voilà. Ici donc, je récupère l'adresse. Je la prends sur Chrome. Voilà. Donc j'ai deux fois mon site. Ici le réduire un peu lorsque je fais plus, j'ai le nombre qui s'incrémente et si je mets à six, ici, pareil sur Chrome. On est bien à six. Donc on a vraiment quelque chose qui est assez impressionnant pour du web, puisque on a l habitude d'avoir beaucoup d'interaction sollicitée. Ici les interactions, elles sont dynamiques. On est vraiment sur du temps réel. Voilà qui ponctue bien notre découverte d'ASP.NET Core. Il est maintenant le temps de conclure.

Découvrir ASP.NET Core 1.0

Prenez en main ASP.NET Core 1.0. Développez ainsi des applications web multiplateformes en C#, déployables sur Windows, Linux, Mac ainsi qu'en containers Dockers.

1h32 (20 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
ASP.NET Core ASP.NET Core 1
Spécial abonnés
Date de parution :1 févr. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !