Bootcamp backendontwikkeling met Node.js · Les

GraphQL-subscriptions voor realtimegegevens

Voeg realtimefunctionaliteit toe aan uw GraphQL-API met subscriptions, zodat clients via WebSockets direct live-updates ontvangen zodra data verandert.

Les 4 van 413 stappen

GraphQL-subscriptions voor realtimegegevens is een gratis Bootcamp backendontwikkeling met Node.js-les op CoddyKit. Dit is les 4 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Bootcamp backendontwikkeling met Node.js. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Bootcamp backendontwikkeling met Node.js bevat in totaal 4 lessen.

De drie GraphQL-bewerkingen

GraphQL definieert drie typen hoofdbewerkingen:

Query: gegevens lezen
Mutation: gegevens wijzigen
Subscription: een stroom van live-updates ontvangen

Query's en mutations volgen het verzoek-antwoordpatroon; subscriptions houden een verbinding open voor doorlopende gebeurtenissen.

Wanneer gebruik je subscriptions?

Subscriptions zijn bijzonder geschikt wanneer clients realtime gegevens nodig hebben:

Chatberichten
Live meldingen
Samenwerken aan documenten
Live dashboards en scores

Voor gegevens die zelden veranderen is het eenvoudiger om een query periodiek uit te voeren.

WebSockets onder de motorkap

Query's en mutations worden via HTTP verstuurd, maar subscriptions hebben een persistent tweerichtingskanaal nodig — een WebSocket. De server stuurt gebeurtenissen naar geabonneerde clients zonder dat zij er opnieuw om hoeven te vragen.

Een subscription definiëren in het schema

Voeg een type Subscription toe aan je schema met velden waarop clients zich kunnen abonneren. Elk veld is een gebeurtenissenstroom die een bepaald type retourneert.

type Subscription {
  messageAdded(channelId: ID!): Message!
}

De PubSub-engine

Subscriptions zijn afhankelijk van een publiceer/abonneersysteem. Met een instantie van PubSub kunnen je resolvers gebeurtenissen publiceren en kunnen je subscriptions ernaar luisteren.

const { PubSub } = require('graphql-subscriptions');
const pubsub = new PubSub();

Een gebeurtenis publiceren

Publiceer binnen een mutation, nadat je de gegevens hebt opgeslagen, een gebeurtenis op een benoemd onderwerp. Iedereen die op dat onderwerp is geabonneerd, ontvangt de payload.

const message = await Message.create(input);
pubsub.publish('MESSAGE_ADDED', { messageAdded: message });
return message;

De subscription-resolver

Een subscription-resolver retourneert via asyncIterator een asynchrone iterator die de server vertelt welk onderwerp naar de client moet worden doorgestuurd.

const resolvers = {
  Subscription: {
    messageAdded: {
      subscribe: () => pubsub.asyncIterator('MESSAGE_ADDED')
    }
  }
};

Gebeurtenissen filteren

Vaak is een client alleen geïnteresseerd in gebeurtenissen voor één kanaal. withFilter verpakt de iterator en stuurt alleen gebeurtenissen door die overeenkomen met de argumenten van de subscription.

const { withFilter } = require('graphql-subscriptions');
subscribe: withFilter(
  () => pubsub.asyncIterator('MESSAGE_ADDED'),
  (payload, vars) => payload.messageAdded.channelId === vars.channelId
)

Subscription-query van de client

De client schrijft een subscription-bewerking net als een query, maar gebruikt daarbij het sleutelwoord subscription. De server streamt resultaten terwijl ze gebeuren.

subscription OnMessage($id: ID!) {
  messageAdded(channelId: $id) {
    id
    text
  }
}

Schalen over meerdere servers

De in-memory PubSub werkt alleen op één instantie. Vervang deze door een backend zoals graphql-redis-subscriptions om gebeurtenissen naar alle verbonden clients te verspreiden.

const { RedisPubSub } = require('graphql-redis-subscriptions');
const pubsub = new RedisPubSub();

Verbindingen opruimen

Open WebSockets verbruiken resources. De server moet verbroken verbindingen detecteren en het streamen stoppen. Apollo Server handelt hier veel van af, maar let op achtergebleven abonnementen en authenticeer de verbinding bij het instellen.

Korte controle

Test je kennis van GraphQL-abonnementen.

Beantwoord dit in de interactieve les

Samenvatting

Je hebt realtimegegevens toegevoegd met GraphQL-abonnementen:

Abonnementen streamen livegebeurtenissen via WebSockets
Declareer een type Subscription en los het op met asyncIterator
Mutaties publish-gebeurtenissen; withFilter richt zich op de juiste clients
Schaal over meerdere servers met een Redis-ondersteunde PubSub en ruim verbindingen netjes op

Je API kan nu chat, meldingen en live dashboards aansturen.

Gratis beginnen

Leer JavaScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 22
Lessen: 92

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “GraphQL-subscriptions voor realtimegegevens” gratis?

Ja — de volledige tekst van “GraphQL-subscriptions voor realtimegegevens” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Bootcamp backendontwikkeling met Node.js wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Bootcamp backendontwikkeling met Node.js bevat in totaal 4 lessen.

Wat leer ik in “GraphQL-subscriptions voor realtimegegevens”?

Voeg realtimefunctionaliteit toe aan uw GraphQL-API met subscriptions, zodat clients via WebSockets direct live-updates ontvangen zodra data verandert. Je oefent met Bootcamp backendontwikkeling met Node.js door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Bootcamp backendontwikkeling met Node.js te beginnen?

Ervaring vooraf is niet nodig. Bootcamp backendontwikkeling met Node.js op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.

Hoe lang duurt de les “GraphQL-subscriptions voor realtimegegevens”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Bootcamp backendontwikkeling met Node.js?

Ja. Elke les over Bootcamp backendontwikkeling met Node.js bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

Inleiding tot serverless met Node.js
Ontwerpprincipes voor GraphQL-API's
Een GraphQL-server bouwen met Apollo
GraphQL-subscriptions voor realtimegegevens

← Terug naar Bootcamp backendontwikkeling met Node.js