0Pricing
Vue Academy · Leçon

Abonnements en temps réel avec useSubscription

Configuration d’une liaison WebSocket, useSubscription() et fusion des données d’abonnement dans l’état réactif

Abonnements en temps réel avec useSubscription est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.

Temps réel avec les abonnements

Les abonnements GraphQL poussent les données du serveur vers le client au moyen d’une connexion persistante. Alors que les requêtes récupèrent les données une seule fois, les abonnements diffusent les mises à jour : c’est idéal pour les discussions, les flux en direct et les notifications.

Transport WebSocket

Les abonnements nécessitent une connexion de longue durée ; ils utilisent donc les WebSockets plutôt que HTTP. La bibliothèque graphql-ws fournit le protocole moderne via GraphQLWsLink.

npm install graphql-ws

Créer le lien WebSocket

Encapsulez un client graphql-ws dans un GraphQLWsLink pointant vers le point de terminaison d’abonnement wss://.

import { GraphQLWsLink } from '@apollo/client/link/subscriptions'
import { createClient } from 'graphql-ws'

const wsLink = new GraphQLWsLink(createClient({
  url: 'wss://api.example.com/graphql'
}))

Le problème du transport

Les requêtes et les mutations doivent toujours passer par HTTP, tandis que les abonnements passent par WebSocket. Vous ne pouvez pas utiliser un seul lien pour tout : vous devez répartir le trafic selon le type d’opération.

Répartir les liens

La fonction split achemine chaque opération : les abonnements vers le lien WebSocket et tout le reste vers le lien HTTP, en fonction de la définition d’opération analysée.

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
)

Intégrer le lien réparti au client

Transmettez le link combiné au client Apollo au lieu d’un simple uri. Le client sait maintenant comment acheminer chaque opération.

const apolloClient = new ApolloClient({
  link,
  cache: new InMemoryCache()
})

Principes de base de useSubscription

Le composable useSubscription ouvre le flux et renvoie un état réactif. Comme useQuery, il fournit result, loading et error.

import { useSubscription } from '@vue/apollo-composable'
import { gql } from '@apollo/client/core'

const { result } = useSubscription(gql(
  'subscription { messageAdded { id text } }'
))

Gérer chaque transmission

Utilisez le crochet onResult pour réagir à chaque événement transmis dès son arrivée : c’est l’endroit naturel pour gérer les données diffusées en continu.

const { onResult } = useSubscription(MESSAGE_ADDED)
onResult((res) => {
  console.log('New message', res.data.messageAdded)
})

Ajouter les données à un tableau réactif

Un schéma courant consiste à conserver un tableau réactif local et à y ajouter chaque nouvel événement, afin que le modèle affiche une liste en direct qui s’agrandit.

const messages = ref([])
const { onResult } = useSubscription(MESSAGE_ADDED)
onResult((res) => {
  messages.value.push(res.data.messageAdded)
})

Variables d’abonnement

Les abonnements acceptent des variables comme les requêtes ; vous pouvez par exemple vous abonner aux messages d’un seul salon de discussion.

useSubscription(
  gql('subscription($room: ID!) { messageAdded(room: $room) { text } }'),
  { room: 'general' }
)

Abonnements ou interrogation périodique

L’interrogation périodique relance une requête selon un intervalle ; les abonnements transmettent des données uniquement lorsqu’un changement survient. Les abonnements sont plus efficaces pour de véritables données en temps réel, tandis que l’interrogation périodique est plus simple lorsque le quasi-temps réel suffit.

Vérification rapide

Évaluez vos connaissances sur les abonnements.

Récapitulatif

Vous avez appris les abonnements en temps réel :

  • Les abonnements poussent les données via les WebSockets avec GraphQLWsLink (graphql-ws).
  • Utilisez la fonction de répartition pour envoyer les abonnements via WS et les requêtes ou mutations via HTTP.
  • useSubscription renvoie un résultat réactif avec onResult pour chaque transmission.
  • Ajoutez les événements transmis à un tableau réactif pour créer une liste en direct.

Questions Fréquemment Posées

La leçon « Abonnements en temps réel avec useSubscription » est-elle gratuite ?

Oui — le texte complet de « Abonnements en temps réel avec useSubscription » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Abonnements en temps réel avec useSubscription » ?

Configuration d’une liaison WebSocket, useSubscription() et fusion des données d’abonnement dans l’état réactif Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Vue Academy ?

Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Abonnements en temps réel avec useSubscription » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?

Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Configurer Apollo Client dans Vue 3
  2. useQuery pour récupérer des données
  3. useMutation pour modifier des données
  4. Abonnements en temps réel avec useSubscription
← Retour à Vue Academy