Subscription in tempo reale con useSubscription
Configurazione del link WebSocket, useSubscription(), integrazione dei dati della subscription nello stato reattivo.
Subscription in tempo reale con useSubscription è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.
Tempo reale con le subscription
Le subscription GraphQL inviano dati dal server al client tramite una connessione persistente. Mentre le query recuperano i dati una sola volta, le subscription trasmettono gli aggiornamenti in streaming: sono ideali per chat, feed in tempo reale e notifiche.
Trasporto WebSocket
Le subscription richiedono una connessione di lunga durata, quindi usano WebSocket invece di HTTP. La libreria graphql-ws fornisce il protocollo moderno tramite GraphQLWsLink.
npm install graphql-wsCreare il link WebSocket
Inserisca un client graphql-ws in un GraphQLWsLink che punti all'endpoint delle subscription wss://.
import { GraphQLWsLink } from '@apollo/client/link/subscriptions'
import { createClient } from 'graphql-ws'
const wsLink = new GraphQLWsLink(createClient({
url: 'wss://api.example.com/graphql'
}))Il problema del trasporto
Le query e le mutation devono continuare a passare tramite HTTP, mentre le subscription passano tramite WebSocket. Non può usare un solo link per tutto: deve suddividere il traffico in base al tipo di operazione.
Suddividere i link
La funzione split instrada ogni operazione: le subscription verso il link WebSocket e tutto il resto verso il link HTTP, in base alla definizione analizzata dell'operazione.
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
)Collegare lo split link al client
Passi il link combinato al client Apollo invece di un semplice uri. Ora il client sa come instradare ogni operazione.
const apolloClient = new ApolloClient({
link,
cache: new InMemoryCache()
})Nozioni di base su useSubscription
Il composable useSubscription apre lo stream e restituisce uno stato reattivo. Come useQuery, fornisce result, loading ed error.
import { useSubscription } from '@vue/apollo-composable'
import { gql } from '@apollo/client/core'
const { result } = useSubscription(gql(
'subscription { messageAdded { id text } }'
))Gestire ogni evento ricevuto
Usi l'hook onResult per reagire a ogni evento inviato non appena arriva: è il punto naturale in cui gestire i dati trasmessi in streaming.
const { onResult } = useSubscription(MESSAGE_ADDED)
onResult((res) => {
console.log('New message', res.data.messageAdded)
})Inserire gli eventi in un array reattivo
Un pattern comune consiste nel mantenere un array reattivo locale e aggiungervi ogni nuovo evento, così il template visualizza un elenco aggiornato e in continua crescita.
const messages = ref([])
const { onResult } = useSubscription(MESSAGE_ADDED)
onResult((res) => {
messages.value.push(res.data.messageAdded)
})Variabili delle subscription
Le subscription accettano variabili proprio come le query: ad esempio, può sottoscriversi ai messaggi di una singola stanza di chat.
useSubscription(
gql('subscription($room: ID!) { messageAdded(room: $room) { text } }'),
{ room: 'general' }
)Subscription e polling
Il polling esegue nuovamente una query a intervalli prestabiliti; le subscription inviano dati solo quando qualcosa cambia. Le subscription sono più efficienti per dati realmente in tempo reale, mentre il polling è più semplice quando è sufficiente un aggiornamento quasi in tempo reale.
Verifica rapida
Verifichi la Sua conoscenza delle subscription.
Riepilogo
Ha imparato a usare le subscription in tempo reale:
- Le subscription inviano dati tramite WebSocket usando GraphQLWsLink (graphql-ws).
- Usi split() per inviare le subscription tramite WS e le query e le mutation tramite HTTP.
- useSubscription restituisce un result reattivo con onResult per ogni evento ricevuto.
- Aggiunga gli eventi ricevuti a un array reattivo per ottenere un elenco aggiornato in tempo reale.
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 42
- Lezioni
- 156
Domande Frequenti
La lezione «Subscription in tempo reale con useSubscription» è gratuita?
Sì — il testo completo di «Subscription in tempo reale con useSubscription» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.
Cosa imparerò in «Subscription in tempo reale con useSubscription»?
Configurazione del link WebSocket, useSubscription(), integrazione dei dati della subscription nello stato reattivo. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Vue Academy?
Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Subscription in tempo reale con useSubscription»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Vue Academy?
Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Configurazione di Apollo Client in Vue 3
- useQuery per il recupero dei dati
- useMutation per modificare i dati
- Subscription in tempo reale con useSubscription