Compartilhar via

Como usar o Serviço do Azure SignalR com o Gerenciamento de API do Azure

  • Artigo

O serviço de Gerenciamento de API do Azure fornece uma plataforma híbrida de gerenciamento de várias nuvens para APIs em todos os ambientes. Este artigo mostra como adicionar recursos em tempo real ao seu aplicativo com o Gerenciamento de API do Azure e o Serviço do Azure SignalR.

Diagrama mostrando a arquitetura de uso do Serviço do SignalR com o Gerenciamento de API.

Importante

As cadeias de conexão brutas aparecem neste artigo somente para fins de demonstração.

Uma cadeia de conexão inclui as informações de autorização necessárias para que o seu aplicativo acesse o serviço Azure Web PubSub. A chave de acesso dentro da cadeia de conexão é semelhante a uma senha raiz para o serviço. Em ambientes de produção, sempre proteja 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 o Microsoft Entra ID e autorizar o acesso com o Microsoft Entra ID.

Evite distribuir chaves de acesso para outros usuários, fazer hard-coding com elas ou salvá-las em qualquer lugar em texto sem formatação que seja acessível a outras pessoas. Gire suas chaves se você acredita que elas podem ter sido comprometidas.

Criar recursos

Configurar APIs

Limitações

Há dois tipos de solicitações para um cliente SignalR:

  • solicitação de negociação: solicitação HTTP POST para <APIM-URL>/client/negotiate/
  • solicitação de conexão: solicitação para <APIM-URL>/client/, pode ser WebSocket ou ServerSentEvent ou LongPolling dependendo do tipo de transporte do seu cliente SignalR

O tipo de solicitação de conexão varia dependendo do tipo de transporte dos clientes do SignalR. Por enquanto, o Gerenciamento de API ainda não dá suporte a diferentes tipos de APIs para o mesmo sufixo. Com essa limitação, ao usar o Gerenciamento de API, o cliente do SignalR não dá suporte ao fallback do tipo de transporte WebSocket para outros tipos de transporte. Pode haver suporte para fallback de ServerSentEvent para LongPolling. As seções abaixo descrevem as configurações detalhadas para diferentes tipos de transporte.

Configurar APIs quando o cliente se conectar com o transporte WebSocket

Esta seção descreve as etapas para configurar o Gerenciamento de API quando os clientes do SignalR se conectam com o transporte WebSocket. Quando os clientes do SignalR se conectam com o transporte WebSocket, três tipos de solicitações são envolvidos:

  1. Solicitação HTTP de simulação OPTIONS para negociação
  2. Solicitação HTTP POST para negociação
  3. Solicitação WebSocket para conexão

Vamos configurar o Gerenciamento de API no portal.

  1. Vá para a guia APIs no portal para a instância de Gerenciamento de API APIM1, selecione Adicionar API e escolha HTTP, Criar com os seguintes parâmetros:
    • Nome de exibiçãoSignalR negotiate
    • URL do serviço Web: https://<your-signalr-service-url>/client/negotiate/
    • Sufixo da URL da API: client/negotiate/
  2. Selecione a API SignalR negotiate criada e selecione Salvar com as configurações abaixo:
    1. Na guia Design
      1. Selecione Adicionar operação e Salvar com os seguintes parâmetros:
        • Nome de exibiçãonegotiate preflight
        • URL: OPTIONS /
      2. Selecione Adicionar operação e Salvar com os seguintes parâmetros:
        • Nome de exibiçãonegotiate
        • URL: POST /
    2. Alterne para a guia Configurações e desmarque Assinatura necessária para fins de demonstração rápida
  3. Selecione Adicionar API e escolha WebSocket, Criar com os seguintes parâmetros:
    • Nome de exibiçãoSignalR connect
    • URL do WebSocket: wss://<your-signalr-service-url>/client/
    • Sufixo da URL da API: client/
  4. Selecione a API SignalR connect criada e selecione Salvar com as configurações abaixo:
    1. Alterne para a guia Configurações e desmarque Assinatura necessária para fins de demonstração rápida

Agora, o Gerenciamento de API está configurado com êxito para dar suporte ao cliente SignalR com o transporte WebSocket.

Configurar APIs quando o cliente se conectar com o transporte ServerSentEvents ou LongPolling

Esta seção descreve as etapas para configurar o Gerenciamento de API quando os clientes do SignalR se conectam com o tipo de transporte ServerSentEvents ou LongPolling. Quando os clientes do SignalR se conectam ao transporte ServerSentEvents ou LongPolling, cinco tipos de solicitações estão envolvidos:

  1. Solicitação HTTP de simulação OPTIONS para negociação
  2. Solicitação HTTP POST para negociação
  3. Solicitação HTTP de simulação OPTIONS para conexão
  4. Solicitação HTTP POST para conexão
  5. Solicitação HTTP GET para conexão

Agora, vamos configurar o Gerenciamento de API no portal.

  1. Vá para a guia APIs no portal para a instância de Gerenciamento de API APIM1, selecione Adicionar API e escolha HTTP, Criar com os seguintes parâmetros:
    • Nome de exibiçãoSignalR
    • URL do serviço Web: https://<your-signalr-service-url>/client/
    • Sufixo da URL da API: client/
  2. Selecione a API SignalR criada e selecione Salvar com as configurações abaixo:
    1. Na guia Design
      1. Selecione Adicionar operação e Salvar com os seguintes parâmetros:
        • Nome de exibiçãonegotiate preflight
        • URL: OPTIONS /negotiate
      2. Selecione Adicionar operação e Salvar com os seguintes parâmetros:
        • Nome de exibiçãonegotiate
        • URL: POST /negotiate
      3. Selecione Adicionar operação e Salvar com os seguintes parâmetros:
        • Nome de exibiçãoconnect preflight
        • URL: OPTIONS /
      4. Selecione Adicionar operação e Salvar com os seguintes parâmetros:
        • Nome de exibiçãoconnect
        • URL: POST /
      5. Selecione Adicionar operação e Salvar com os seguintes parâmetros:
        • Nome de exibiçãoconnect get
        • URL: GET /
      6. Selecione a operação connect get conexão recém-adicionada e edite a política de back-end para desabilitar o buffer para ServerSentEvents, confira aqui para obter mais detalhes. 
        <backend>
    <forward-request buffer-response="false" />
</backend>
    2. Alterne para a guia Configurações e desmarque Assinatura necessária para fins de demonstração rápida

Agora o Gerenciamento de API está configurado com êxito para dar suporte ao cliente SignalR com ServerSentEvents ou LongPolling transporte.

Executar chat

Agora, o tráfego pode acessar o Serviço do SignalR por meio do Gerenciamento de API. Esse aplicativo de chat será usado como exemplo. Vamos começar executando-o localmente.

As cadeias de conexão brutas aparecem neste artigo apenas para fins de demonstração. Em ambientes de produção, sempre proteja 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 o Microsoft Entra ID e autorizar o acesso com o Microsoft Entra ID.

  • Primeiro, vamos obter a cadeia de conexão de ASRS1

    • Na guia Cadeias de conexão do ASRS1
      • Ponto de extremidade do cliente: insira a URL usando a URL do Gateway do APIM1, por exemplo, https://apim1.azure-api.net. Ele é um gerador de cadeia de conexão ao usar proxies reversos e o valor não é preservado quando você volta para essa guia. Quando o valor é inserido, a cadeia de conexão acrescenta uma seção ClientEndpoint.
      • Copie a cadeia de conexão

  • Clone o repositório GitHub https://github.com/aspnet/AzureSignalR-samples

  • Acesse a pasta Sala de chat/amostras:

  • Defina a cadeia de conexão copiada e execute o aplicativo localmente. Você pode ver que há uma seção ClientEndpoint no ConnectionString.

    cd samples/Chatroom
dotnet restore
dotnet user-secrets set Azure:SignalR:ConnectionString "<copied-connection-string-with-client-endpoint>"
dotnet run

  • Configurar o tipo de transporte para o cliente

    Abra index.html na pasta wwwroot e localize o código quando connection for criado, depois atualize-o para especificar o tipo de transporte.

    Por exemplo, para especificar a conexão para usar eventos enviados pelo servidor ou sondagem longa, atualize o código para:

    const connection = new signalR.HubConnectionBuilder()
  .withUrl(
    "/chat",
    signalR.HttpTransportType.ServerSentEvents |
      signalR.HttpTransportType.LongPolling
  )
  .build();

    Para especificar a conexão para usar WebSockets, atualize o código para:

    const connection = new signalR.HubConnectionBuilder()
  .withUrl("/chat", signalR.HttpTransportType.WebSockets)
  .build();

  • Abra http://localhost:5000 do navegador e use F12 para exibir os rastreamentos de rede. Você pode ver que a conexão é estabelecida pelo APIM1

Próximas etapas

Agora, você adicionou com êxito a funcionalidade em tempo real ao Gerenciamento de API usando o Azure SignalR. Saiba mais sobre o Serviço do SignalR.