Comment utiliser Fiddler Partout avec des applications en temps réel

Travailler avec des applications en temps réel nécessite une attention particulière pour analyser les données qui sont constamment transférées entre le client et le serveur. Pour vous aider dans cette tâche, Fiddler Everywhere dispose des meilleures ressources grâce aux inspecteurs WebSocket. Consultez cet article pour savoir comment les utiliser.

Avec l’utilisation fréquente d’appareils intelligents connectés à Internet, le besoin de communication en temps réel est de plus en plus présent dans la vie des gens. Les applications en temps réel ont fleuri, surtout ces dernières années. Les plus connues d’entre elles sont peut-être les applications de réseaux sociaux, mais il en existe plusieurs autres qui ont la même pertinence et le même besoin : applications de visioconférence, jeux en ligne, chat, transactions de commerce électronique et bien d’autres.

Avec la forte demande pour ce type d’application, la nécessité de maintenir ces applications a également augmenté pour répondre à la demande des utilisateurs. Dans cet article, nous allons créer une application en temps réel et examiner l’importance d’analyser les données qui composent ces applications, les avantages de la capture du trafic WebSocket et comment cela peut être une tâche facile avec Fiddler Everywhere.

Que sont les WebSockets ?

Les WebSockets sont des applications Web qui exécutent un processus appelé « prise de contact » entre l’application et le serveur. En termes simples, l’application établit une connexion avec le serveur et transfère les données entre eux, en gardant la connexion ouverte, ce qui rend ce processus très rapide, permettant ainsi la communication en temps réel.

Cette technologie n’est pas exclusive à .NET. Il existe des WebSockets présents sur d’autres plates-formes, telles que Node. Dans le contexte d’ASP.NET Core, il est possible d’implémenter WebSockets à partir de zéro, mais il existe une bibliothèque native très utile appelée SignalR, qui contient tout le nécessaire pour implémenter une application en temps réel. Si vous voulez en savoir plus sur SignalR, je vous suggère de lire la documentation officielle de Microsoft, à laquelle vous pouvez accéder via ce lien : Introduction à SignalR.

Ensuite, nous allons créer une application et implémenter un WebSocket. Ensuite, nous analyserons comment ce processus est effectué via Fiddler Everywhere.

À propos du projet

Le projet que nous allons créer dans cet article sera un projet web développé avec .NET 6, dans lequel nous utiliserons les ressources de SignalR. Il s’agira d’une simple application de messagerie instantanée pour démontrer l’utilisation de Fiddler Everywhere et comment analyser les données entre le client et le serveur à l’aide des fonctionnalités de Fiddler.

Vous pouvez accéder au code source complet du projet final à ce lien : Code source.

La mise en œuvre du projet

Conditions préalables

• Violoniste partout
• Visual Studio 2022 et SDK .NET 6

Création de l’application Web

• Dans Visual Studio 2022, sélectionnez Créer un nouveau projet.
• Sélectionnez Application Web ASP.NET Core, puis cliquez sur Suivant.
• Nommez le projet quelque chose comme ChatSignalR.
• Sélectionnez .NET 6.0 (prise en charge à long terme) puis Créer.

Ajout de la bibliothèque client SignalR au projet

La bibliothèque de serveur SignalR est incluse dans le framework partagé ASP.NET Core. La bibliothèque cliente JavaScript n’est pas automatiquement incluse, c’est pourquoi, dans ce didacticiel, nous utiliserons Library Manager (LibMan) pour obtenir la bibliothèque cliente de unpkg.

Ainsi, dans Visual Studio :

• Sous Explorateur de solutions, cliquez avec le bouton droit sur le projet et sélectionnez Ajouter > Bibliothèque côté client.
• Dans la boîte de dialogue Ajouter une bibliothèque côté client :
• Sélectionnez unpkg pour le fournisseur.
• Entrez @microsoft/signalr@latest pour Bibliothèque.
• Sélectionnez Choisir des fichiers spécifiques, développez le dossier dist/navigateur et sélectionnez signalr.js et signalr.min.js.
• Définissez Emplacement cible sur wwwroot/js/signalr/.
• Sélectionnez Installer.

Créer un concentrateur SignalR

UN Hub permet au client et au serveur de communiquer directement. SignalR utilise un Hub au lieu de contrôleurs comme dans ASP.NET MVC. Nous devons donc créer une classe qui héritera de la Hub classe principale.

Dans le dossier du projet SignalRChat, créez un dossier « Hubs ». Dans le dossier Hubs, créez la classe « ChatHub » avec le code suivant :

using Microsoft.AspNetCore.SignalR;
namespace ChatSignalR.Hubs;

public class ChatHub : Hub
{
    public async Task SendMessage(string user, string message) =>
        await Clients.All.SendAsync("ReceiveMessage", user, message);
}

La classe ChatHub hérite de la classe native de SignalR (SignalRHub). Le Hub class est responsable de la gestion des connexions, des groupes et des systèmes de messagerie.

La méthode SendMessage peut être appelée par un client connecté et envoyer un message à tous les clients. Cette méthode est asynchrone pour fournir une évolutivité maximale. Le code client JavaScript qui appelle cette méthode sera discuté plus tard.

Ajout de paramètres SignalR

Maintenant que nous avons créé le Hub classe, nous devons ajouter les paramètres de classe SignalR et ChatHub que nous venons de créer, alors remplacez le code dans le fichier Program.cs par le code ci-dessous :

using ChatSignalR.Hubs;

var builder = WebApplication.CreateBuilder(args);


builder.Services.AddRazorPages();
builder.Services.AddSignalR();

var app = builder.Build();


if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();
app.MapHub<ChatHub>("/chatHub");

app.Run();

Ajout du client SignalR

L’étape suivante consiste à créer le client qui communiquera avec le serveur (hub). Nous ajouterons d’abord le balisage HTML avec les zones de texte et le bouton pour envoyer le message, puis nous ajouterons le code JavaScript qui contiendra les fonctions et les actions effectuées par la page HTML.

Remplacer le contenu du Pages/Index.cshtml fichier avec le code suivant :

@page
    <div class="container">
        <div class="row">&nbsp;</div>
        <div class="row">
            <div class="col-2">User</div>
            <div class="col-4"><input type="text" id="userInput" /></div>
        </div>
        <div class="row">
            <div class="col-2">Message</div>
            <div class="col-4"><input type="text" id="messageInput" /></div>
        </div>
        <div class="row">&nbsp;</div>
        <div class="row">
            <div class="col-6">
                <input type="button" id="sendButton" value="Send Message" />
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <hr />
        </div>
    </div>
    <div class="row">
        <div class="col-6">
            <ul id="messagesList"></ul>
        </div>
    </div>
<script src="~/js/signalr/dist/browser/signalr.js"></script>
<script src="~/js/chat.js"></script>

Il ne nous reste plus qu’à créer le code JavaScript qui exécutera les fonctions d’envoi et de réception de messages.

Le code ci-dessous crée et démarre une connexion, et ajoute dans le bouton Envoyer un gestionnaire qui envoie des messages au hub. Enfin, il ajoute un gestionnaire à l’objet de connexion qui reçoit les messages du concentrateur et les ajoute à la liste.

Ainsi, dans le wwwroot/js dossier, créez un fichier avec l’extension .js (chat.js) avec le code suivant :

"use strict";

var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();

document.getElementById("sendButton").disabled = true;

connection.on("ReceiveMessage", function (user, message) {
    var li = document.createElement("li");
    document.getElementById("messagesList").appendChild(li);
    li.textContent = `${user} says ${message}`;
});

connection.start().then(function () {
    document.getElementById("sendButton").disabled = false;
}).catch(function (err) {
    return console.error(err.toString());
});

document.getElementById("sendButton").addEventListener("click", function (event) {
    var user = document.getElementById("userInput").value;
    var message = document.getElementById("messageInput").value;
    connection.invoke("SendMessage", user, message).catch(function (err) {
        return console.error(err.toString());
    });
    event.preventDefault();
});

Exécutez l’application

Exécutez l’application via Visual Studio ou un terminal.

• Copiez l’URL de la barre d’adresse où l’application a démarré.
• Ouvrez un autre onglet du navigateur et collez l’URL dans la barre d’adresse.
• Sur chacun des onglets, saisissez un nom et un message, puis sélectionnez le bouton Envoyer un message.

Le nom et le message s’affichent instantanément sur les deux pages.

Inspecteurs WebSocket avec Fiddler Everywhere

La communication en temps réel nécessite une attention particulière aux événements qui se produisent pendant l’exécution de l’application, depuis sa création jusqu’au moment présent. La connexion n’étant établie qu’une seule fois, la rapidité avec laquelle les informations transitent entre le client et le serveur rend nécessaire l’utilisation d’outils captant le détail de ces opérations.

Imaginez un jeu en ligne où certains joueurs signalent des bogues lorsqu’ils entrent dans un certain endroit du jeu. Comment feriez-vous pour savoir d’où vient le problème si, chaque milliseconde, des milliers d’informations sont transférées entre le client du joueur et le serveur du jeu ? Vous devrez filtrer et analyser les informations pertinentes pour la zone où les utilisateurs ont signalé le problème. Certains outils spécialisés sont nécessaires à cette fin.

Fiddler Everywhere est parfait pour ce type de tâche, car il possède plusieurs fonctionnalités qui aident beaucoup dans le travail d’analyse de la poignée de main entre les applications.

Les outils disponibles sur Fiddler Everywhere sont listés ci-dessous pour une analyse complète de l’exécution de notre application de chat. Vous pouvez consulter la documentation officielle de toutes les fonctions des types d’inspecteurs sur ce lien : Inspecteurs WebSocket.

Filtrage du trafic en direct depuis notre application

Par définition, Fiddler Everywhere capture tout le trafic présent sur votre machine. Pour analyser l’application que nous avons créée précédemment, nous devons la filtrer dans la liste. Le GIF ci-dessous montre comment procéder :

Vous trouverez ci-dessous les onglets disponibles dans Fiddler Everywhere et comment les utiliser dans l’application que nous venons de créer.

1. Onglet Poignée de main

L’onglet Handshake de l’API WebSocket fournit plusieurs types d’outils d’inspection, qui vous permettent d’examiner différentes parties des demandes et des réponses WebSocket, chacune étant répertoriée ci-dessous et les détails abstraits de l’exécution de notre application.

1.1 Inspecteur des en-têtes
L’onglet Inspecteur d’en-tête vous permet d’afficher les en-têtes HTTP de la requête et de la réponse.

Dans cet onglet, nous pouvons vérifier la méthode HTTP utilisée, dans ce cas, GET.

Le chemin de l’URL demandée—(/chatHub?id=…).
La version HTTP—HTTP/1.1.

La ligne Request peut consister en une ou plusieurs lignes contenant des paires nom-valeur de métadonnées sur la requête et le client, telles que User-Agent et Accept-Language.

Chaque réponse HTTP commence par des en-têtes en texte brut qui décrivent le résultat de la requête. La première ligne de la réponse (la ligne Status) contient les valeurs suivantes :

La version HTTP—HTTP/1.1.
Le code d’état de la réponse—101.

La ligne d’état peut être constituée d’une ou plusieurs lignes contenant des paires nom-valeur de métadonnées sur la réponse et le serveur, telles que la longueur du fichier de réponse et le type de contenu.

1.2 Inspecteur des paramètres
L’inspecteur de paramètres, uniquement disponible dans la section Requête, affiche le contenu de tous les paramètres des bornes d’entrée. Dans l’exemple de l’application de chat, aucune valeur n’est envoyée et reçue via une URL. Au lieu de cela, d’autres valeurs sont affichées au format clé/valeur comme « transport » = « webSockets », « requestUrl » = « https://localhost:7215/», entre autres.

1.3 Inspecteur des cookies
L’inspecteur de cookies affiche le contenu de tous les en-têtes de requête sortants Cookie et Cookie2 et de tous les en-têtes de réponse entrants Set-Cookie, Set-Cookie2 et P3P.

1.4 Inspecteur brut
Raw Inspector vous permet d’afficher la demande et la réponse complètes, y compris les en-têtes et les corps, au format texte. La majeure partie de l’inspecteur représente une grande zone de texte qui affiche le corps du texte interprété à l’aide du jeu de caractères détecté avec les en-têtes, le marqueur d’ordre des octets ou une déclaration de balise META intégrée.

Si la demande ou la réponse est affichée avec le contenu encodé ou compressé, l’inspecteur brut est livré avec un bouton de décodage spécial (situé dans la barre d’outils de l’inspecteur). Cliquer dessus décodera le contenu.

L’inspecteur d’aperçu et l’inspecteur de corps sont également disponibles, mais ils ne correspondent pas au contexte de l’exemple de l’article.

2. Onglet Messages

L’onglet Messages affiche une liste des messages WebSocket envoyés par le client ou reçus du serveur. La liste est constamment remplie de nouveaux messages futurs jusqu’à ce que la communication bidirectionnelle soit déconnectée.

Chaque message WebSocket entrant peut être inspecté séparément via l’inspecteur de métadonnées et l’inspecteur de message.

2.1 Inspecteur de métadonnées
L’inspecteur de métadonnées contient des horodatages et des informations de masquage sur le message WebSocket sélectionné.

2.2 Inspecteur de messages
L’inspecteur de message contient le contenu du message non masqué en texte brut ou JSON (selon le format du message).

Conclusion

L’utilisation des inspecteurs WebSocket est indispensable pour travailler avec des applications en temps réel. Fiddler Everywhere a tout ce qu’il faut pour une analyse complète du trafic de données dans ce type d’application.

Dans cet article, nous avons créé un exemple d’application en temps réel et vu comment utiliser les fonctionnalités disponibles dans Fiddler via les inspecteurs WebSocket, ce qui facilite grandement la tâche d’analyse.