如何通过实时应用程序随时随地使用Fiddler

使用实时应用程序需要特别注意分析在客户端和服务器之间不断传输的数据。为了协助完成这项任务，Fiddler Everywhere 通过 WebSocket 检查器提供了最好的资源。查看这篇关于如何使用它们的文章。

随着连接到互联网的智能设备的频繁使用，对实时通信的需求越来越多地出现在人们的生活中。实时应用程序蓬勃发展，尤其是近年来。也许最著名的 其中是社交网络应用程序，但还有其他几个具有相同的相关性和需求 - 视频会议应用程序，在线游戏，聊天，电子商务交易等等。

随着对此类应用程序的高需求，维护这些应用程序以支持用户需求的需求也增加了。在本文中，我们将构建一个实时应用程序，并了解分析构成 这些应用程序，捕获WebSocket流量的好处，以及使用Fiddler Everywhere如何轻松完成这项工作。

什么是 WebSockets？

WebSocket 是在应用程序和服务器之间执行称为“握手”的过程的 Web 应用程序。简单来说，应用程序与服务器建立连接并在它们之间传输数据，保持连接 开放，这使得这个过程非常快，从而允许实时通信。

此技术并非 .NET 独有。在其他平台中存在WebSocket，例如Node。在 ASP.NET Core 的上下文中，可以从头开始实现 WebSockets，但是有一个非常有用的本机库称为 SignalR，它 包含实现实时应用程序所需的一切。如果你想了解更多关于SignalR的信息，我建议你阅读微软官方文档，你可以通过这个链接访问：SignalR简介。

使用 SignalR 和 .NET 6 使应用栩栩如生

今天的应用程序有望提供最新信息，而无需点击更新按钮。我们怎样才能做到这一点？一个有趣的方法是使用SignalR。

接下来，我们将创建一个应用程序并实现一个 WebSocket。然后我们将分析这个过程是如何通过Fiddler Everywhere完成的。

关于项目

我们将在本文中创建的项目将是使用 .NET 6 开发的 Web 项目，我们将在其中使用 SignalR 的资源。这将是一个简单的聊天消息应用程序，用于演示使用Fiddler Everywhere以及如何分析数据 客户端和服务器与Fiddler功能的帮助下。

您可以通过以下链接访问最终项目的完整源代码：源代码。

项目实施

先决条件

小提琴手无处不在

Visual Studio 2022 和 .NET 6 SDK

创建网络应用

在 Visual Studio 2022 中，选择“创建新项目”。

选择“ASP.NET 核心 Web 应用”，然后点击“下一步”。

将项目命名为类似于ChatSignalR。

选择“.NET 6.0（长期支持）”，然后选择“创建”。

将 SignalR 客户端库添加到项目

SignalR 服务器库包含在 ASP.NET Core 共享框架中。JavaScript 客户端库不会自动包含在内，因此，在本教程中，我们将使用库管理器 （LibMan） 从 联合国公共权利中心。

因此，在Visual Studio中：

在“解决方案资源管理器”下，右击该项目，然后选择“>客户端库添加”。

在“添加客户端库”对话框中：

为“提供程序”选择 unpkg。

为库输入 @microsoft/signalr@latest。

选择“选择特定文件”，展开 dist/browser 文件夹，然后选择 signalr.js 和 signalr.min.js。

将“目标位置”设置为 wwwroot/js/signalr/。

选择“安装”。

创建信令中心

类允许客户端和服务器直接通信。SignalR 使用集线器而不是像 MVC ASP.NET 控制器。因此，我们需要创建一个将从主类继承的类。HubHub

在 SignalRChat 项目文件夹中，创建一个“中心”文件夹。在 Hubs 文件夹中，使用以下代码创建“ChatHub”类：

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);

}

C#

ChatHub 类继承自 SignalR 的原生类 （SignalRHub）。该类负责管理连接、组和消息传递系统。Hub

SendMessage 方法可以由连接的客户端调用，并向所有客户端发送消息。此方法是异步的，以提供最大的可伸缩性。稍后将讨论调用此方法的 JavaScript 客户端代码。

添加信号R 设置

现在我们已经创建了类，我们需要添加我们刚刚创建的 SignalR 和 ChatHub 类设置，因此将 Program.cs 文件中的代码替换为以下代码：Hub

using ChatSignalR.Hubs;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddRazorPages();

builder.Services.AddSignalR();

var app = builder.Build();

// Configure the HTTP request pipeline.

if (!app.Environment.IsDevelopment())

{

    app.UseExceptionHandler("/Error");

    // 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.UseRouting();

app.UseAuthorization();

app.MapRazorPages();

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

app.Run();

C#

添加信号客户端

下一步是创建将与服务器（集线器）通信的客户端。首先，我们将添加带有文本框和按钮的 HTML 标记来发送消息，然后我们将添加包含函数和操作的 JavaScript 代码 由 HTML 页面执行。

将文件的内容替换为以下代码：Pages/Index.cshtml

@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>

C#

现在我们只需要创建将执行发送和接收消息功能的 JavaScript 代码。

下面的代码创建并启动连接，并在“发送”按钮中添加一个将消息发送到中心的处理程序。最后，它将处理程序添加到从中心接收消息并将其添加到列表中的连接对象。

因此，在该文件夹中，使用以下代码创建一个扩展名为 .js （chat.js） 的文件：wwwroot/js

"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();

});

JavaScript

运行应用程序

通过Visual Studio或终端运行应用程序。

从启动应用程序的地址栏中复制 URL。

打开另一个浏览器选项卡并将 URL 粘贴到地址栏中。

在每个选项卡上输入名称和消息，然后选择“发送消息”按钮。

名称和消息会立即显示在两个页面上。

WebSocket 检查器与 Fiddler 无处不在

实时通信需要特别注意应用程序运行时发生的事件，从开始到现在。由于连接仅建立一次，因此信息在 客户端和服务器使得有必要使用捕获这些操作详细信息的工具。

想象一下，在一款在线游戏中，一些玩家在进入游戏中的某个位置时会报告错误。如果每毫秒传输数千条信息，您将如何找出问题所在 在玩家的客户端和游戏的服务器之间？您需要筛选和分析与用户报告问题的区域相关的信息。为此，需要一些专门的工具。

Fiddler Everywhere非常适合此类任务，因为它具有多种功能，这些功能在分析应用程序之间的握手工作方面有很大帮助。

下面列出了Fiddler Everywhere上可用的工具，用于完整分析我们的聊天应用程序的执行。您可以在以下链接中查看所有检查器类型函数的官方文档：WebSocket 检查器。

过滤来自我们应用程序的实时流量

根据定义，Fiddler Everywhere 捕获计算机上存在的所有流量。要分析我们之前创建的应用程序，我们需要在列表中对其进行过滤。下面的 GIF 显示了如何执行此操作：

以下是 Fiddler Everywhere 中可用的选项卡，以及如何在我们刚刚构建的应用程序中使用它们。

1. 握手选项卡

WebSocket API 的“握手”选项卡提供了多种类型的检查工具，允许您检查 WebSocket 请求和响应的不同部分 — 下面列出了每个部分以及我们应用程序的抽象详细信息。 执行。

1.1 标头检查器

“标头检查器”选项卡允许您查看请求和响应的 HTTP 标头。

请求标头检查器

在此选项卡中，我们可以检查使用的 HTTP 方法，在本例中为 GET。

被请求的 URL 的路径 - （/chatHub？id=...）。

HTTP 版本 - HTTP/1.1。

请求行可以由一行或多行组成，其中包含有关请求和客户端的元数据的名称-值对，例如用户代理和接受语言。

响应标头

每个 HTTP 响应都以描述请求结果的纯文本标头开头。响应的第一行（状态行）包含以下值：

HTTP 版本 - HTTP/1.1。

响应状态代码 - 101。

状态行可以包含一行或多行，其中包含有关响应和服务器的元数据的名称/值对，例如响应文件长度和内容类型。

1.2 参数检查

器 参数检查器仅在“请求”部分中可用，显示输入终端的任何参数的内容。在聊天应用示例中，我们没有通过以下方式发送和接收值 网址。相反，其他值以键/值格式显示，例如“transport” = “webSockets”，“requestUrl” = “https://localhost:7215/”等。

参数检查器

1.3 Cookie 检查器 Cookie 检查器显示任何出站 Cookie 和 Cookie2 请求标头以及任何入站 Set-Cookie

、Set-Cookie2 和 P3P 响应标头的内容。

1.4 原始检查器

原始检查器允许您以文本格式查看完整的请求和响应，包括标头和正文。大多数检查器表示大面积的文本，这些文本显示使用检测到的字符集解释的文本正文 带有标头、字节顺序标记或嵌入式 META 标记声明。

如果请求或响应显示的内容经过编码或压缩，则原始检查器附带一个特殊的解码按钮（位于检查器工具栏中）。单击它将解码内容。

预览检查器和正文检查器也可用，但它们不符合本文中示例的上下文。

2. 消息选项卡

“消息”选项卡呈现从客户端发送或从服务器接收的 WebSocket 消息的列表。该列表不断填充新的未来消息，直到双向通信断开连接。

每个传入的 WebSocket 消息都可以通过元数据检查器和消息检查器单独检查。

2.1 元数据检查器

元数据检查器包含有关所选 WebSocket 消息的时间戳和屏蔽信息。

2.2 消息检查器

消息检查器包含纯文本或 JSON 格式的未屏蔽消息内容（取决于消息格式）。

结论

使用 WebSocket 检查器对于处理实时应用程序是必不可少的。Fiddler Everywhere拥有对此类应用程序中的数据流量进行完整分析所需的一切。

在本文中，我们创建了一个实时应用程序的示例，并了解了如何通过 WebSocket 检查器使用 Fiddler 中可用的功能，这些功能使分析任务变得更加容易。

上一条：Fiddler Everywhere3.3 版本中有哪些新功能！

下一条：Fiddler如何轻松捕获安卓HTTPS移动流量