Partilhar via

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

  • Artigo

O serviço de Gerenciamento de API do Azure fornece uma plataforma de gerenciamento híbrida e multicloud 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 Azure SignalR.

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

Importante

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

Uma cadeia de conexão inclui as informações de autorização necessárias para seu aplicativo acessar o Serviço Azure SignalR. A chave de acesso dentro da cadeia de conexão é semelhante a uma senha de root para o seu serviç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.

Evite distribuir chaves de acesso para outros usuários, codificá-las ou salvá-las em qualquer lugar em texto simples acessível a outras pessoas. Rode as chaves se acreditar que 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/
  • connect request: solicitação para <APIM-URL>/client/, pode ser WebSocket ou ServerSentEvent LongPolling depende do tipo de transporte do seu cliente SignalR

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

Configurar APIs quando o cliente se conecta com WebSocket o transporte

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

  1. OPÇÕES comprovação HTTP solicitação para negociação
  2. Pedido HTTP POST para negociação
  3. Solicitação WebSocket para conexão

Vamos configurar o Gerenciamento de API a partir do portal.

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

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

Configurar APIs quando o cliente se conecta LongPolling ou ServerSentEvents transporta

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

  1. OPÇÕES comprovação HTTP solicitação para negociação
  2. Pedido HTTP POST para negociação
  3. OPÇÕES comprovação HTTP solicitação 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 a partir do portal.

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

Agora, o Gerenciamento de API está configurado com êxito para suportar o cliente SignalR com ServerSentEvents ou LongPolling transporte.

Executar bate-papo

Agora, o tráfego pode chegar ao Serviço SignalR por meio do Gerenciamento de API. Vamos usar este aplicativo de bate-papo como exemplo. Vamos começar por executá-lo localmente.

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.

  • Primeiro, vamos obter a cadeia de conexão do 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. É um gerador de cadeia de conexão ao usar proxies reversos e o valor não é preservado na próxima vez que você voltar a essa guia. Quando o valor é inserido, a cadeia de conexão acrescenta uma ClientEndpoint seção.
      • Copie a cadeia de conexão

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

  • Vá para a pasta samples/Chatroom:

  • Defina a cadeia de conexão copiada e execute o aplicativo localmente, você pode ver que há uma ClientEndpoint seção 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 em pasta wwwroot e encontre o código quando connection for criado, atualize-o para especificar o tipo de transporte.

    Por exemplo, para especificar a conexão para usar server-sent-events ou long polling, 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 a partir do navegador e use F12 para visualizar os rastreamentos de rede, você pode ver que a conexão é estabelecida através de APIM1

Próximos passos

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