Realtidsprenumerationer med useSubscription
Konfigurera WebSocket-länk, använd useSubscription() och slå samman prenumerationsdata med reaktiv state.
Realtidsprenumerationer med useSubscription är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vue Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vue Academy innehåller totalt 4 lektioner.
Realtid med subscriptions
GraphQL-subscriptions skickar data från servern till klienten över en beständig anslutning. Medan frågor hämtar data en gång strömmar subscriptions uppdateringar – perfekt för chatt, liveflöden och aviseringar.
WebSocket-transport
Subscriptions behöver en långvarig anslutning och använder därför WebSockets i stället för HTTP. Biblioteket graphql-ws tillhandahåller det moderna protokollet via GraphQLWsLink.
npm install graphql-wsSkapa WebSocket-länken
Omslut en graphql-ws-klient i en GraphQLWsLink som pekar på subscription-slutpunkten wss://.
import { GraphQLWsLink } from '@apollo/client/link/subscriptions'
import { createClient } from 'graphql-ws'
const wsLink = new GraphQLWsLink(createClient({
url: 'wss://api.example.com/graphql'
}))Transportproblemet
Frågor och mutationer bör fortfarande skickas över HTTP, medan subscriptions skickas över WebSocket. Du kan inte använda en länk för allt – du måste dela upp trafiken efter operationstyp.
Dela upp länkarna
Funktionen split dirigerar varje operation: subscriptions till WebSocket-länken och allt annat till HTTP-länken, baserat på den tolkade operationsdefinitionen.
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
)Koppla in den uppdelade länken i klienten
Skicka den kombinerade link till Apollo-klienten i stället för en vanlig uri. Nu vet klienten hur varje operation ska dirigeras.
const apolloClient = new ApolloClient({
link,
cache: new InMemoryCache()
})Grunderna i useSubscription
Den komponerbara funktionen useSubscription öppnar dataströmmen och returnerar reaktivt tillstånd. Precis som useQuery ger den dig result, loading och error.
import { useSubscription } from '@vue/apollo-composable'
import { gql } from '@apollo/client/core'
const { result } = useSubscription(gql(
'subscription { messageAdded { id text } }'
))Hantera varje push
Använd hooken onResult för att reagera på varje pushad händelse när den anländer – det naturliga stället att hantera strömmande data.
const { onResult } = useSubscription(MESSAGE_ADDED)
onResult((res) => {
console.log('New message', res.data.messageAdded)
})Lägg till data i en reaktiv array
Ett vanligt mönster är att behålla en lokal reaktiv array och lägga till varje ny händelse, så att mallen visar en lista som uppdateras och växer i realtid.
const messages = ref([])
const { onResult } = useSubscription(MESSAGE_ADDED)
onResult((res) => {
messages.value.push(res.data.messageAdded)
})Variabler för subscriptions
Subscriptions kan ta emot variabler precis som frågor – till exempel för att prenumerera på meddelanden från ett enda chattrum.
useSubscription(
gql('subscription($room: ID!) { messageAdded(room: $room) { text } }'),
{ room: 'general' }
)Subscriptions jämfört med polling
Polling hämtar en fråga igen enligt ett tidsintervall, medan subscriptions bara skickar data när något ändras. Subscriptions är effektivare för verkliga realtidsdata, medan polling är enklare när nästan realtid räcker.
Snabbtest
Testa dina kunskaper om subscriptions.
Sammanfattning
Du har lärt dig om subscriptions i realtid:
- Subscriptions skickar data över WebSockets via GraphQLWsLink (graphql-ws).
- Använd split() för att skicka subscriptions över WS och frågor/mutationer över HTTP.
- useSubscription returnerar ett reaktivt result med onResult för varje push.
- Lägg till pushade händelser i en reaktiv array för en live-lista.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 42
- Lektioner
- 156
Vanliga frågor
Är lektionen ”Realtidsprenumerationer med useSubscription” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”Realtidsprenumerationer med useSubscription”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vue Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Realtidsprenumerationer med useSubscription”?
Konfigurera WebSocket-länk, använd useSubscription() och slå samman prenumerationsdata med reaktiv state. Ni övar på Vue Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Vue Academy?
Du behöver inga förkunskaper. Utbildningen i Vue Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”Realtidsprenumerationer med useSubscription”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Vue Academy-lektionen?
Ja. Varje Vue Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Konfigurera Apollo Client i Vue 3
- useQuery för datahämtning
- useMutation för dataändringar
- Realtidsprenumerationer med useSubscription