Criação de APIs pub/sub genéricas alimentadas por WebSockets de tecnologia sem servidor no AWS AppSync - AWS AppSync GraphQL

Criação de APIs pub/sub genéricas alimentadas por WebSockets de tecnologia sem servidor no AWS AppSync

Importante

A partir de 13 de março de 2025, você pode criar uma API PubSub em tempo real com a tecnologia WebSockets usando Eventos do AWS AppSync. Para obter mais informações, consulte Publicar eventos via WebSocket no Guia do desenvolvedor do AWS AppSync Events.

Alguns aplicativos exigem apenas APIs de WebSocket simples, nas quais os clientes recebem um canal ou tópico específico. Dados JSON genéricos sem formato específico ou requisitos fortemente informados podem ser enviados a clientes que recebem um desses canais em um padrão puro e simples de publicação-assinatura (pub/sub).

Use o AWS AppSync para implementar APIs de WebSocket pub/sub simples com pouco ou nenhum conhecimento em GraphQL em questão de minutos, gerando automaticamente o código GraphQL no back-end da API e no lado do cliente.

Criar e configurar APIs pub-sub

Para começar, faça o seguinte:

  1. Faça login no Console de gerenciamento da AWS e abra o Console do AppSync.

    1. No Painel, escolha Criar API.

  2. Na próxima tela, escolha Criar uma API em tempo real e, em seguida, escolha Avançar.

  3. Insira um nome fácil de lembrar para a API pub/sub.

  4. Você pode ativar os atributos da API privada, mas recomendamos mantê-los desativados por enquanto. Escolha Avançar.

  5. Você pode optar por gerar automaticamente uma API pub/sub funcional usando WebSockets. Também recomendamos desativar esse atributo por enquanto. Escolha Avançar.

  6. Escolha Criar API e aguarde alguns minutos. Uma nova API pub/sub pré-configurada do AWS AppSync será criada em sua conta do AWS.

A API usa os resolvedores locais integrados do AWS AppSync (para obter mais informações sobre o uso de resolvedores locais, consulte o Tutorial: Resolvedores locais no Guia do desenvolvedor do AWS AppSync) para gerenciar vários canais pub/sub temporários e conexões WebSocket, que entregam e filtram automaticamente os dados para clientes inscritos com base somente no nome do canal. As chamadas de API são autorizadas com uma chave da API.

Depois que a API for implantada, você verá algumas etapas extras para gerar o código do cliente e integrá-lo ao aplicativo cliente. Para obter um exemplo de como integrar rapidamente um cliente, este guia usará um aplicativo web React simples.

  1. Comece criando um aplicativo React padronizado usando o NPM na máquina local:

    $ npx create-react-app mypubsub-app $ cd mypubsub-app
    nota

    Este exemplo usa as bibliotecas do Amplify para conectar clientes à API de back-end. No entanto, não é necessário criar um projeto Amplify CLI localmente. Embora o React seja o cliente preferido neste exemplo, as bibliotecas do Amplify também oferecem suporte a clientes iOS, Android e Flutter, fornecendo os mesmos recursos nesses diferentes runtimes. Os clientes Amplify suportados fornecem abstrações simples para interagir com os back-ends da API do GraphQL do AWS com algumas linhas de código, inclusive recursos integrados do WebSocket totalmente compatíveis com o protocolo WebSocket em tempo real do AWS AppSync:

    $ npm install @aws-amplify/api
  2. No console do AWS AppSync, selecione JavaScript e, em seguida, Fazer download para fazer download de um único arquivo com os detalhes de configuração da API e o código de operações gerado do GraphQL.

  3. Copie o arquivo baixado para a pasta do /src no projeto do React.

  4. Em seguida, substitua o conteúdo do arquivo padrão existente do src/App.js pelo código de cliente de amostra disponível no console.

  5. Use o seguinte comando para criar e iniciar o aplicativo localmente.

    $ npm start
  6. Para testar o envio e o recebimento de dados em tempo real, abra duas janelas do navegador e acesse localhost:3000. O aplicativo de amostra está configurado para enviar dados JSON genéricos para um canal com codificação rígida chamado robots.

  7. Em uma das janelas do navegador, insira o seguinte blob JSON na caixa de texto e clique em Enviar:

    { "robot":"r2d2", "planet": "tatooine" }

Ambas as instâncias do navegador são inscritas no canal robots e recebem os dados publicados em tempo real, exibidos na parte inferior do aplicativo web:

Exemplo de aplicativo React para a API pub/sub

Todo o código necessário da API do GraphQL, incluindo o esquema, os resolvedores e as operações, é gerado automaticamente para permitir um caso de uso genérico de pub/sub. No back-end, os dados são publicados no endpoint em tempo real do AWS AppSync com uma mutação do GraphQL, como a seguinte:

mutation PublishData { publish(data: "{\"msg\": \"hello world!\"}", name: "channel") { data name } }

Os assinantes acessam os dados publicados enviados para o canal temporário específico com uma assinatura relacionada do GraphQL:

subscription SubscribeToData { subscribe(name:"channel") { name data } }

Implementar APIs pub-sub em aplicativos existentes

Caso você só precise implementar um atributo em tempo real em um aplicativo existente, essa configuração genérica da API pub/sub pode ser facilmente integrada a qualquer aplicativo ou tecnologia de API. Embora haja vantagens em usar um único endpoint da API para acessar, manipular e combinar com segurança dados de uma ou mais fontes de dados em uma única chamada de rede com o GraphQL, não há necessidade de converter ou recriar um aplicativo existente baseado em REST do zero para aproveitar os recursos em tempo real do AWS AppSync. Por exemplo, você pode ter uma workload CRUD existente em um endpoint de API separado com clientes enviando e recebendo mensagens ou eventos do aplicativo existente para a API pub/sub genérica somente para fins de tempo real e pub/sub.