Como usar o Serviço do Azure SignalR com o Azure Front Door

O Azure Front Door é uma ADN (rede de entrega de aplicativos nativos de nuvem) moderna que fornece aceleração dinâmica do site, balanceamento de carga global, terminação TLS e segurança de camada de aplicativo. Ele opera na camada HTTP/HTTPS (Camada 7) e atua como o ponto de entrada para aplicativos Web , roteando e otimizando o tráfego com base em atributos como caminhos de URL, latência e status de integridade de back-ends.

Um dos principais benefícios do Azure Front Door é seu suporte nativo para conexões WebSocket e WebSocket Secure (WSS). Esse suporte permite a comunicação bidirecional em tempo real entre clientes e serviços de back-end sem a necessidade de nenhuma configuração especial.

Neste guia, demonstramos como usar o Azure Front Door com o Serviço do Azure SignalR para front-end de seus aplicativos em tempo real. Ao rotear o tráfego pelo Front Door, você pode:

• Aplicar suporte a WebSocket com aceleração global de alcance e borda,
• Aplicar políticas de segurança centralizadas, como regras de WAF e limitação de taxa,
• Reduza a exposição pública de seus serviços de back-end.

Conforme mostrado no diagrama, você configura o Azure Front Door para rotear o tráfego do WebSocket para o back-end do aplicativo alimentado pelo SignalR. Essa configuração garante que sua funcionalidade em tempo real se beneficie da baixa latência, do gerenciamento de tráfego escalonável e seguro por meio da rede de borda global do Azure.

Instalar e configurar o Azure Front Door

Crie um recurso de Serviço do Azure SignalR

Siga o artigo e crie um recurso do Serviço do SignalR

Criar um recurso do Azure Front Door

No portal do Azure, busque por Front Door e Criar.

Teste rápido

Realize testes rápidos para verificar se o ponto de extremidade do SignalR está íntegro e se o recurso do Azure Front Door está configurado corretamente.

Envie uma solicitação para <your-SignalR-resource-endpoint>/client e ela deve retornar 400 com o parâmetro de consulta "hub" da mensagem de erro. Essa mensagem significa que a solicitação chegou ao Serviço do SignalR e o serviço executou a validação conforme o esperado.

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

Devoluções

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

Enviar uma solicitação para o mesmo ponto de extremidade de integridade do Azure SignalR por meio do Azure Front Door http://<the-hostname-of-your-Azure-Front-Door-resource>/client. Vá para a aba Visão geral do recurso criado do Azure Front Door e localize o nome do host do endpoint.

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

Ele também deve retornar 400 com a mensagem de erro que o parâmetro de consulta 'hub' é necessário. Esta mensagem confirma que a solicitação passou com êxito pelo Azure Front Door para o Serviço do SignalR.

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

Executar um aplicativo de exemplo do SignalR por meio do Azure Front Door

Agora que podemos verificar se o tráfego pode chegar ao Serviço do SignalR por meio do Azure Front Door. Em seguida, usamos um aplicativo de exemplo barebone para demonstrar a capacidade do Azure Front Door de rotear o tráfego do WebSocket sem configuração. Adotaremos uma abordagem passo a passo para que você possa acompanhar, se necessário.

Criar o projeto

mkdir afd-demo 
cd afd-demo

touch afd-demo.csproj

Cole o conteúdo no arquivo afd-demo.csproj. Este projeto usa apenas o pacote "Microsoft.Azure.SignalR".

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

Definir configurações de aplicativo

Crie um appsettings.json arquivo e cole o conteúdo. Os valores serão referenciados no Program.cs arquivo, que criaremos na próxima etapa. Adicione uma ClientEndpoint seção no ConnectionString.

touch appsettings.json

As cadeias de conexão brutas aparecem neste artigo somente para fins de demonstração. Em ambientes de produção, sempre proteja suas chaves de acesso. Use o Azure Key Vault para gerenciar e rotacionar suas chaves com segurança, proteja sua cadeia de conexão usando o Microsoft Entra ID e autorize o acesso com o Microsoft Entra ID.

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

Criar arquivo Program.cs

touch Program.cs

Cole o código no Program.cs arquivo. O aplicativo Web define um hub signalr e serve index.html na raiz da Web.

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

Definir um hub do SignalR

mkdir hubs && cd hubs
touch demohubs.cs

Cole o código no demohubs.cs arquivo. Para simplificar, o hub expõe apenas BroadcastMessage o método para o cliente SignalR, que transmite a mensagem recebida para todos os clientes do SignalR conectados.

using Microsoft.AspNetCore.SignalR;

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

Definir a UI da Web

Verifique se você está na raiz da pasta do projeto.

mkdir wwwroot && cd wwwroot
touch index.html

Cole o código em index.html. A interface de usuário consiste em uma <textarea> para receber a entrada de texto do usuário e em um <button> para enviar a entrada do usuário por meio de uma conexão SignalR. Como definimos o comportamento do servidor SignalR para transmitir mensagens recebidas, você verá a mesma mensagem registrada no console do navegador.

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

Execute o aplicativo e verifique o fluxo de mensagem por meio do Azure Front Door

Esse é todo o código para o exemplo. Vamos executar o aplicativo.

  dotnet restore
  dotnet run

Abra http://localhost:5129 no navegador e use F12 o atalho de teclado para abrir ferramentas de desenvolvedor. Vá para o painel de rede, você pode ver que a conexão WebSocket está realmente estabelecida com o Azure Front Door.

Tente digitar algo na caixa de texto e pressione o botão enviar. Você verá que a mensagem está registrada no console do navegador conforme o esperado.

Você também pode inspecionar o fluxo de mensagens no painel de rede.