Echtzeit-Subscriptions mit useSubscription
WebSocket-Link einrichten und mit useSubscription() Subscription-Daten in den reaktiven Status übernehmen
Echtzeit-Subscriptions mit useSubscription ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Echtzeit mit Subscriptions
GraphQL-Subscriptions übertragen Daten über eine persistente Verbindung vom Server zum Client. Während Queries einmalig Daten abrufen, streamen Subscriptions Aktualisierungen — ideal für Chats, Live-Feeds und Benachrichtigungen.
WebSocket-Transport
Subscriptions benötigen eine langlebige Verbindung und verwenden daher WebSockets statt HTTP. Die Bibliothek graphql-ws stellt über GraphQLWsLink das moderne Protokoll bereit.
npm install graphql-wsWebSocket-Link erstellen
Verpacken Sie einen graphql-ws-Client in einen GraphQLWsLink, der auf den wss://-Subscription-Endpunkt zeigt.
import { GraphQLWsLink } from '@apollo/client/link/subscriptions'
import { createClient } from 'graphql-ws'
const wsLink = new GraphQLWsLink(createClient({
url: 'wss://api.example.com/graphql'
}))Das Transportproblem
Queries und Mutationen sollten weiterhin über HTTP laufen, während Subscriptions über WebSocket laufen. Sie können nicht einen Link für alles verwenden — Sie müssen den Datenverkehr nach dem Operationstyp aufteilen.
Links aufteilen
Die Funktion split leitet jede Operation weiter: Subscriptions an den WebSocket-Link, alles andere an den HTTP-Link — basierend auf der geparsten Operationsdefinition.
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
)Den aufgeteilten Link in den Client einbinden
Übergeben Sie dem Apollo-Client den kombinierten link statt einer einfachen uri. Jetzt weiß der Client, wie er jede Operation weiterleiten muss.
const apolloClient = new ApolloClient({
link,
cache: new InMemoryCache()
})Grundlagen von useSubscription
Das Composable useSubscription öffnet den Stream und gibt einen reaktiven Status zurück. Wie useQuery liefert es result, loading und error.
import { useSubscription } from '@vue/apollo-composable'
import { gql } from '@apollo/client/core'
const { result } = useSubscription(gql(
'subscription { messageAdded { id text } }'
))Jeden Push verarbeiten
Verwenden Sie den onResult-Hook, um auf jedes übertragene Ereignis zu reagieren, sobald es eintrifft — hier ist der natürliche Ort für die Verarbeitung von Streaming-Daten.
const { onResult } = useSubscription(MESSAGE_ADDED)
onResult((res) => {
console.log('New message', res.data.messageAdded)
})In ein reaktives Array schreiben
Ein gängiges Muster: Halten Sie ein lokales reaktives Array vor und hängen Sie jedes neue Ereignis an, damit das Template eine dynamisch wachsende Liste rendert.
const messages = ref([])
const { onResult } = useSubscription(MESSAGE_ADDED)
onResult((res) => {
messages.value.push(res.data.messageAdded)
})Variablen für Subscriptions
Subscriptions akzeptieren wie Queries Variablen — abonnieren Sie beispielsweise Nachrichten aus einem einzelnen Chatraum.
useSubscription(
gql('subscription($room: ID!) { messageAdded(room: $room) { text } }'),
{ room: 'general' }
)Subscriptions oder Polling
Beim Polling wird eine Query in festen Zeitabständen erneut abgerufen; Subscriptions übertragen Daten nur, wenn sich etwas ändert. Für echte Echtzeitdaten sind Subscriptions effizienter, während Polling einfacher ist, wenn nahezu Echtzeit ausreicht.
Schnelltest
Testen Sie Ihr Wissen über Subscriptions.
Zusammenfassung
Sie haben Echtzeit-Subscriptions kennengelernt:
- Subscriptions übertragen Daten über WebSockets mithilfe von GraphQLWsLink (graphql-ws).
- Verwenden Sie split(), um Subscriptions über WS und Queries/Mutationen über HTTP zu senden.
- useSubscription gibt ein reaktives result mit onResult für jeden Push zurück.
- Hängen Sie übertragene Ereignisse an ein reaktives Array an, um eine Live-Liste zu erstellen.
Häufig gestellte Fragen
Ist die Lektion „Echtzeit-Subscriptions mit useSubscription“ kostenlos?
Ja — der vollständige Text von „Echtzeit-Subscriptions mit useSubscription“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Echtzeit-Subscriptions mit useSubscription“?
WebSocket-Link einrichten und mit useSubscription() Subscription-Daten in den reaktiven Status übernehmen Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Vue Academy zu starten?
Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Echtzeit-Subscriptions mit useSubscription“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?
Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Apollo-Client-Einrichtung in Vue 3
- useQuery zum Abrufen von Daten
- useMutation für Datenänderungen
- Echtzeit-Subscriptions mit useSubscription