Assinaturas em tempo real com useSubscription
Configuração do link WebSocket, useSubscription() e incorporação dos dados da assinatura ao estado reativo.
Assinaturas em tempo real com useSubscription é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.
Tempo real com assinaturas
As assinaturas do GraphQL enviam dados do servidor para o cliente por meio de uma conexão persistente. Enquanto as consultas buscam dados uma vez, as assinaturas transmitem atualizações — perfeitas para conversas, feeds ao vivo e notificações.
Transporte por WebSocket
As assinaturas precisam de uma conexão duradoura, por isso usam WebSockets em vez de HTTP. A biblioteca graphql-ws fornece o protocolo moderno por meio de GraphQLWsLink.
npm install graphql-wsCriando o link WebSocket
Encapsule um cliente graphql-ws em um GraphQLWsLink que aponte para o endpoint de assinaturas wss://.
import { GraphQLWsLink } from '@apollo/client/link/subscriptions'
import { createClient } from 'graphql-ws'
const wsLink = new GraphQLWsLink(createClient({
url: 'wss://api.example.com/graphql'
}))O problema do transporte
As consultas e mutações ainda devem usar HTTP, enquanto as assinaturas devem usar WebSocket. Você não pode usar um único link para tudo — é preciso separar o tráfego por tipo de operação.
Dividindo os links
A função split encaminha cada operação: as assinaturas para o link WebSocket e todo o restante para o link HTTP, com base na definição de operação analisada.
import { split, HttpLink } from '@apollo/client/core'
import { getMainDefinition } from '@apollo/client/utilities'
const httpLink = new HttpLink({ uri: '/graphql' })
const link = split(
({ query }) => {
const def = getMainDefinition(query)
return def.kind === 'OperationDefinition' && def.operation === 'subscription'
},
wsLink,
httpLink
)Conectando o link dividido ao cliente
Passe o link combinado para o cliente Apollo em vez de uma uri simples. Agora o cliente sabe como encaminhar cada operação.
const apolloClient = new ApolloClient({
link,
cache: new InMemoryCache()
})Noções básicas de useSubscription
A função reutilizável useSubscription abre o fluxo e retorna um estado reativo. Assim como useQuery, ela fornece result, loading e error.
import { useSubscription } from '@vue/apollo-composable'
import { gql } from '@apollo/client/core'
const { result } = useSubscription(gql(
'subscription { messageAdded { id text } }'
))Tratando cada envio
Use o gancho onResult para reagir a cada evento enviado assim que ele chegar — esse é o lugar natural para tratar dados transmitidos em fluxo.
const { onResult } = useSubscription(MESSAGE_ADDED)
onResult((res) => {
console.log('New message', res.data.messageAdded)
})Adicionando dados a uma lista reativa
Um padrão comum é manter uma lista reativa local e acrescentar cada novo evento, para que o modelo renderize uma lista ativa e crescente.
const messages = ref([])
const { onResult } = useSubscription(MESSAGE_ADDED)
onResult((res) => {
messages.value.push(res.data.messageAdded)
})Variáveis de assinatura
As assinaturas aceitam variáveis assim como as consultas — por exemplo, para receber mensagens de uma única sala de conversa.
useSubscription(
gql('subscription($room: ID!) { messageAdded(room: $room) { text } }'),
{ room: 'general' }
)Assinaturas e consultas periódicas
Uma consulta periódica executa novamente uma consulta em intervalos definidos; as assinaturas enviam dados somente quando algo muda. As assinaturas são mais eficientes para dados realmente em tempo real, enquanto as consultas periódicas são mais simples quando uma atualização quase em tempo real é suficiente.
Verificação rápida
Teste seus conhecimentos sobre assinaturas.
Recapitulação
Você aprendeu sobre assinaturas em tempo real:
- As assinaturas enviam dados por WebSockets usando GraphQLWsLink (graphql-ws).
- Use split() para enviar assinaturas por WS e consultas/mutações por HTTP.
- useSubscription retorna um resultado reativo com onResult para cada envio.
- Acrescente os eventos recebidos a uma lista reativa para criar uma lista ao vivo.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 42
- Aulas
- 156
Perguntas Frequentes
A aula “Assinaturas em tempo real com useSubscription” é grátis?
Sim — o texto completo de “Assinaturas em tempo real com useSubscription” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.
O que vou aprender em “Assinaturas em tempo real com useSubscription”?
Configuração do link WebSocket, useSubscription() e incorporação dos dados da assinatura ao estado reativo. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Vue Academy?
Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Assinaturas em tempo real com useSubscription”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Vue Academy?
Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Configuração do Apollo Client no Vue 3
- useQuery para busca de dados
- useMutation para alterações de dados
- Assinaturas em tempo real com useSubscription