Az Azure SignalR szolgáltatás használata az Azure Front Door használatával

Az Azure Front Door egy modern natív felhőbeli alkalmazáskézbesítési hálózat (ADN), amely dinamikus helygyorsítást, globális terheléselosztást, TLS-lezárást és alkalmazásréteg-biztonságot biztosít. A HTTP/HTTPS rétegben (7. réteg) működik, és a webalkalmazások belépési pontjaként működik – a forgalom átirányítása és optimalizálása olyan attribútumok alapján, mint az URL-útvonalak, a késés és a háttérrendszer állapotának állapota.

Az Azure Front Door egyik fő előnye a WebSocket és a WebSocket Secure (WSS) kapcsolatok natív támogatása. Ez a támogatás lehetővé teszi a valós idejű, kétirányú kommunikációt az ügyfelek és a háttérszolgáltatások között anélkül, hogy speciális konfigurációra lenne szükség.

Ebben az útmutatóban bemutatjuk, hogyan használhatja az Azure Front Doort az Azure SignalR Service-vel a valós idejű alkalmazások előtérbe helyezéséhez. A Front Dooron keresztüli forgalom irányításával a következőt teheti:

• WebSocket-támogatás alkalmazása globális elérésű és peremhálózati gyorsítással,
• Központosított biztonsági szabályzatok, például WAF-szabályok és sebességkorlátozás alkalmazása,
• Csökkentse a háttérszolgáltatások nyilvános kitettségét.

A diagramon látható módon úgy konfigurálja az Azure Front Doort, hogy a WebSocket-forgalmat a SignalR-alapú alkalmazás háttérrendszerébe irányozza. Ez a beállítás biztosítja, hogy a valós idejű funkciók kihasználják az alacsony késleltetésű, méretezhető és biztonságos forgalomkezelés előnyeit az Azure globális peremhálózatán keresztül.

Az Azure Front Door beállítása és konfigurálása

Azure SignalR service-erőforrás létrehozása

Kövesse a cikket , és hozzon létre egy SignalR-szolgáltatáserőforrást

Azure Front Door-erőforrás létrehozása

Az Azure portálon keresse meg a Front Door és Létrehozás lehetőséget.

Gyorsteszt

Végezzen gyorsteszteket annak ellenőrzésére, hogy a SignalR-végpont kifogástalan állapotban van-e, és hogy az Azure Front Door-erőforrás megfelelően van-e konfigurálva.

Küldjön egy kérést <your-SignalR-resource-endpoint>/client , és a választ 400 kódú hibával kell visszakapnia, amely azt üzeni, hogy a "hub" lekérdezési paraméter szükséges. Ez az üzenet azt jelenti, hogy a kérés megérkezett a SignalR szolgáltatáshoz, a szolgáltatás pedig a várakozások szerint hajtotta végre az ellenőrzést.

curl -v <your-SignalR-resource-endpoint>/client

Visszatérítések

< HTTP/1.1 400 Bad Request
< ...
<
'hub' query parameter is required.

Küldjön egy kérést az Azure Front Door http://<the-hostname-of-your-Azure-Front-Door-resource>/client keresztül az Azure SignalR egészségügyi végpontjára. Nyissa meg a létrehozott Azure Front Door-erőforrás Áttekintés lapját, és keresse meg a végpont állomásnevét.

curl -I http://<the-hostname-of-your-Azure-Front-Door-resource>/client

A 400-nak is vissza kell adnia a "hub" lekérdezési paraméterrel rendelkező hibaüzenetet. Ez az üzenet megerősíti, hogy a kérés sikeresen átment az Azure Front Dooron a SignalR szolgáltatásba.

< HTTP/1.1 400 Bad Request
< ...
<
'hub' query parameter is required.

SignalR-mintaalkalmazás futtatása az Azure Front Dooron keresztül

Most, hogy ellenőrizni tudjuk, hogy a forgalom az Azure Front Dooron keresztül eléri-e a SignalR szolgáltatást. Ezután egy barebone-mintaalkalmazást használunk annak bemutatására, hogy az Azure Front Door képes-e a WebSocket-forgalmat konfiguráció nélkül irányítani. Lépésenkénti megközelítést alkalmazunk, hogy szükség esetén követni tudja a lépéseket.

A projekt létrehozása

mkdir afd-demo 
cd afd-demo

touch afd-demo.csproj

Másolja be a tartalmat a afd-demo.csproj fájlba. Ez a projekt csak a "Microsoft.Azure.SignalR" csomagot használja.

<Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup>
    <TargetFramework>net7.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
    <RootNamespace>afd_demo</RootNamespace>
  </PropertyGroup>
  <ItemGroup>
    <PackageReference Include="Microsoft.Azure.SignalR" Version="1.30.2" />
  </ItemGroup>
</Project>

Alkalmazásbeállítások konfigurálása

Hozzon létre egy appsettings.json fájlt, és illessze be a tartalmat. Az értékekre a Program.cs fájl hivatkozik, amelyet a következő lépésben hozunk létre. Adjon hozzá egy szakaszt ClientEndpoint a ConnectionStringben.

touch appsettings.json

A cikkben megjelenő nyers kapcsolati karakterláncok kizárólag bemutató célokat szolgálnak. Gyártási környezetben mindig védje a hozzáférési kulcsait. Az Azure Key Vault használatával biztonságosan kezelheti és elforgathatja a kulcsokat, és biztonságossá teheti a kapcsolati karakterláncot a Microsoft Entra ID-val, és engedélyezheti a hozzáférést a Microsoft Entra ID-val.

{
  "Azure": {
    "SignalR": {
      "ConnectionString": "<the-connection-string-of-your-Azure-SignalR-resource>;ClientEndpoint=<the-endpoint-of-your-Azure-Front-Door-resource>"
    }
  }
}

Fájl létrehozása Program.cs

touch Program.cs

Illessze be a kódot a Program.cs fájlba. A webalkalmazás definiál egy SignalR-központot, és a webes gyökérkiszolgálón szolgál index.html .

using Microsoft.Azure.SignalR;
var builder = WebApplication.CreateBuilder(args);

// Automatically read in the configuration from `appsettings.json`
builder.Services.AddSignalR().AddAzureSignalR();

var app = builder.Build();
app.UseStaticFiles();

app.UseRouting();

app.MapHub<DemoHub>("/demohub");

app.MapGet("/", async context =>
{
    var path = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "index.html");
    context.Response.ContentType = "text/html";
    await context.Response.SendFileAsync(path);
});

app.Run();

SignalR-központ definiálása

mkdir hubs && cd hubs
touch demohubs.cs

Illessze be a kódot a demohubs.cs fájlba. Az egyszerűség kedvéért a központ csak BroadcastMessage a SignalR-ügyfél számára teszi elérhetővé a metódust, amely a kapott üzenetet az összes csatlakoztatott SignalR-ügyfélnek közvetíti.

using Microsoft.AspNetCore.SignalR;

public class DemoHub : Hub
{
    public Task BroadcastMessage(string message) =>
        Clients.All.SendAsync("broadcastMessage", message);
}

Webes felhasználói felület definiálása

Győződjön meg arról, hogy a projektmappa gyökerénél van.

mkdir wwwroot && cd wwwroot
touch index.html

Illessze be a következő kódba: index.html. A felhasználói felület egy <textarea> szöveges bemenetet fogad a felhasználótól, a <button> felhasználói bemenetet pedig SignalR-kapcsolaton keresztül küldi el. Mivel meghatároztuk a SignalR-kiszolgáló viselkedését a fogadott üzenetek közvetítéséhez, ugyanaz az üzenet lesz naplózva a böngészőkonzolon.

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta name="viewport" content="width=device-width">
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />
  <title>Azure SignalR with Azure Front Door as the reverse proxy</title>
</head>

<body>
  <div>
    <textarea id="message" style="display: block; width: 100%; padding: 5px 10px; max-width: 400px; margin-bottom: 8px;"
      placeholder="Your message..."></textarea>
    <button id="btn-send" disabled>Send</button>
  </div>

  <!--Reference the SignalR library. -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/6.0.1/signalr.js"></script>

  <script type="module">
    document.addEventListener("DOMContentLoaded", async function () {
      const connection = new signalR.HubConnectionBuilder()
        .withUrl("/demohub")
        .build();

      connection.on("broadcastMessage", (msg) => {
        console.log(msg)
      })
      await connection.start();
      document.getElementById("btn-send").removeAttribute("disabled")

      document.getElementById("btn-send").addEventListener("click", () => {
        const message = document.getElementById("message").value
        if (message !== "") {
          connection.send("broadcastMessage", message)
          document.getElementById("message").value = ""
        } else {
          alert("Message body is empty. Please enter message.")
        }
      })
    })
  </script>
</body>

</html>

Futtassa az alkalmazást, és ellenőrizze az üzenetfolyamot az Azure Front Dooron keresztül

Ez a minta összes kódja. Fussuk az alkalmazást.

  dotnet restore
  dotnet run

Nyissa meg http://localhost:5129 a böngészőből, és használja F12 a billentyűparancsot a fejlesztői eszközök megnyitásához. Lépjen a hálózati panelre, és láthatja, hogy a WebSocket-kapcsolat valóban létrejött az Azure Front Doorral.

Próbáljon meg begépelni valamit a szövegmezőbe, és nyomja le a Küldés gombot. Láthatja, hogy az üzenet a várt módon lesz naplózva a böngészőkonzolon.

A hálózati panelen is megvizsgálhatja az üzenetek áramlását.