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

O Azure Front Door é uma moderna rede de entrega de aplicativos (ADN) nativa da nuvem que fornece aceleração dinâmica do site, balanceamento de carga global, terminação TLS e segurança da 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 qualquer configuração especial.

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

• Aplique o suporte a WebSocket com alcance global e aceleração na periferia.
• Aplicar políticas de segurança centralizadas, como regras 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 manipulação de tráfego de baixa latência, escalável e segura por meio da rede de borda global do Azure.

Instalar e configurar o Azure Front Door

Criar um recurso do Serviço Azure SignalR

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

Criar um recurso do Azure Front Door

No portal do Azure, procure por Front Door e clique em Criar.

Teste rápido

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

Envie um pedido para <your-SignalR-resource-endpoint>/client e deve devolver 400 com a mensagem de erro 'hub' é um parâmetro de consulta obrigatório. Esta mensagem significa que o pedido chegou ao SignalR Service e o serviço efetuou 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.

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

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

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

< 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 que o tráfego pode alcançar o Serviço SignalR através 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 WebSocket sem configuração. Adotamos 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>

Configurar as definições da aplicação

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

touch appsettings.json

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

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

Criar Program.cs ficheiro

touch Program.cs

Cole o código no Program.cs arquivo. A aplicação 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 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 ao cliente SignalR, que transmite a mensagem recebida para todos os clientes SignalR conectados.

using Microsoft.AspNetCore.SignalR;

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

Definir Web UI

Certifica-te de que estás na raiz da pasta do projeto.

mkdir wwwroot && cd wwwroot
touch index.html

Cole o código em index.html. A interface do usuário consiste em um <textarea> para receber entrada de texto do usuário e um <button> para enviar a entrada do usuário através 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 mensagens através do Azure Front Door

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

  dotnet restore
  dotnet run

Abra http://localhost:5129 a partir do navegador e use F12 o atalho de teclado para abrir as ferramentas de desenvolvedor. Vá para o painel de rede, você pode ver que a conexão WebSocket é 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.