Sanntidsabonnementer med useSubscription
Oppsett av WebSocket-link, useSubscription() og sammenslåing av abonnementsdata i reaktiv state.
Sanntidsabonnementer med useSubscription er en gratis leksjon i Vue Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Vue Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Vue Academy inneholder totalt 4 leksjoner.
Sanntid med subscriptions
GraphQL-subscriptions sender data fra serveren til klienten over en vedvarende tilkobling. Der spørringer henter data én gang, strømmer subscriptions oppdateringer – perfekt for chat, sanntidsstrømmer og varsler.
WebSocket-transport
Subscriptions trenger en langvarig tilkobling og bruker derfor WebSockets i stedet for HTTP. Biblioteket graphql-ws tilbyr den moderne protokollen via GraphQLWsLink.
npm install graphql-wsOpprette WebSocket-lenken
Pakk en graphql-ws-klient inn i en GraphQLWsLink som peker på wss://-endepunktet for subscriptions.
import { GraphQLWsLink } from '@apollo/client/link/subscriptions'
import { createClient } from 'graphql-ws'
const wsLink = new GraphQLWsLink(createClient({
url: 'wss://api.example.com/graphql'
}))Transportproblemet
Spørringer og mutasjoner bør fortsatt gå over HTTP, mens subscriptions går over WebSocket. De kan ikke bruke én lenke til alt – De må splitte trafikken etter operasjonstype.
Dele lenker
split-funksjonen ruter hver operasjon: subscriptions til WebSocket-lenken, alt annet til HTTP-lenken, basert på den analyserte operasjonsdefinisjonen.
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
)Koble den delte lenken til klienten
Send den kombinerte link til Apollo-klienten i stedet for en vanlig uri. Nå vet klienten hvordan hver operasjon skal rutes.
const apolloClient = new ApolloClient({
link,
cache: new InMemoryCache()
})Grunnleggende om useSubscription
useSubscription-composable-funksjonen åpner strømmen og returnerer reaktiv tilstand. I likhet med useQuery gir den Dem result, loading og error.
import { useSubscription } from '@vue/apollo-composable'
import { gql } from '@apollo/client/core'
const { result } = useSubscription(gql(
'subscription { messageAdded { id text } }'
))Håndtere hver push
Bruk onResult-hooken til å reagere på hver push-hendelse idet den kommer – det naturlige stedet å håndtere strømmende data.
const { onResult } = useSubscription(MESSAGE_ADDED)
onResult((res) => {
console.log('New message', res.data.messageAdded)
})Legge til i en reaktiv matrise
Et vanlig mønster er å beholde en lokal reaktiv matrise og legge til hver nye hendelse, slik at malen gjengir en levende liste som vokser.
const messages = ref([])
const { onResult } = useSubscription(MESSAGE_ADDED)
onResult((res) => {
messages.value.push(res.data.messageAdded)
})Subscription-variabler
Subscriptions godtar variabler på samme måte som spørringer – De kan for eksempel abonnere på meldinger fra ett enkelt chatterom.
useSubscription(
gql('subscription($room: ID!) { messageAdded(room: $room) { text } }'),
{ room: 'general' }
)Subscriptions kontra polling
Polling henter en spørring på nytt med et tidsintervall, mens subscriptions sender data bare når noe endres. Subscriptions er mer effektive for ekte sanntidsdata, mens polling er enklere når tilnærmet sanntid er tilstrekkelig.
Hurtigsjekk
Test kunnskapen Deres om subscriptions.
Oppsummering
De har lært om subscriptions i sanntid:
- Subscriptions sender data over WebSockets via GraphQLWsLink (graphql-ws).
- Bruk split() til å sende subscriptions over WS og spørringer/mutasjoner over HTTP.
- useSubscription returnerer et reaktivt resultat med onResult for hver push.
- Legg push-hendelser til i en reaktiv matrise for å lage en levende liste.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 42
- Leksjoner
- 156
Ofte stilte spørsmål
Er leksjonen «Sanntidsabonnementer med useSubscription» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Vue Academy, inkludert «Sanntidsabonnementer med useSubscription», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Vue Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Sanntidsabonnementer med useSubscription»?
Oppsett av WebSocket-link, useSubscription() og sammenslåing av abonnementsdata i reaktiv state. Du øver på Vue Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Vue Academy?
Ingen tidligere erfaring er nødvendig. Vue Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.
Hvor lang tid tar leksjonen «Sanntidsabonnementer med useSubscription»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Vue Academy-leksjonen?
Ja. Alle Vue Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Konfigurere Apollo Client i Vue 3
- useQuery for datahenting
- useMutation for dataendringer
- Sanntidsabonnementer med useSubscription