Suscripciones en tiempo real con useSubscription
Configuración del enlace WebSocket, useSubscription() y combinación de datos de suscripción en el estado reactivo
Suscripciones en tiempo real con useSubscription es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.
Tiempo real con suscripciones
Las suscripciones de GraphQL envían datos del servidor al cliente mediante una conexión persistente. Mientras que las consultas obtienen datos una vez, las suscripciones transmiten actualizaciones continuamente: son perfectas para chats, fuentes en directo y notificaciones.
Transporte mediante WebSocket
Las suscripciones necesitan una conexión de larga duración, por lo que usan WebSockets en lugar de HTTP. La biblioteca graphql-ws proporciona el protocolo moderno mediante GraphQLWsLink.
npm install graphql-wsCrear el enlace WebSocket
Envuelva un cliente de graphql-ws en un GraphQLWsLink que apunte al endpoint de suscripciones wss://.
import { GraphQLWsLink } from '@apollo/client/link/subscriptions'
import { createClient } from 'graphql-ws'
const wsLink = new GraphQLWsLink(createClient({
url: 'wss://api.example.com/graphql'
}))El problema del transporte
Las consultas y las mutaciones deben seguir realizándose mediante HTTP, mientras que las suscripciones usan WebSocket. No puede utilizar un solo enlace para todo: necesita dividir el tráfico según el tipo de operación.
Dividir los enlaces
La función split dirige cada operación: las suscripciones al enlace WebSocket y todo lo demás al enlace HTTP, según la definición de operación analizada.
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
)Integrar el enlace dividido en el cliente
Pase el link combinado al cliente de Apollo en lugar de un uri simple. Ahora el cliente sabe cómo dirigir cada operación.
const apolloClient = new ApolloClient({
link,
cache: new InMemoryCache()
})Fundamentos de useSubscription
El composable useSubscription abre el flujo y devuelve un estado reactivo. Al igual que useQuery, proporciona result, loading y error.
import { useSubscription } from '@vue/apollo-composable'
import { gql } from '@apollo/client/core'
const { result } = useSubscription(gql(
'subscription { messageAdded { id text } }'
))Gestionar cada envío
Use el hook onResult para reaccionar a cada evento enviado en cuanto llega: es el lugar natural para gestionar datos transmitidos.
const { onResult } = useSubscription(MESSAGE_ADDED)
onResult((res) => {
console.log('New message', res.data.messageAdded)
})Añadir datos a un arreglo reactivo
Un patrón habitual consiste en mantener un arreglo reactivo local y añadir cada evento nuevo para que la plantilla muestre una lista activa que crece continuamente.
const messages = ref([])
const { onResult } = useSubscription(MESSAGE_ADDED)
onResult((res) => {
messages.value.push(res.data.messageAdded)
})Variables de suscripción
Las suscripciones aceptan variables igual que las consultas; por ejemplo, puede suscribirse a los mensajes de una sola sala de chat.
useSubscription(
gql('subscription($room: ID!) { messageAdded(room: $room) { text } }'),
{ room: 'general' }
)Suscripciones frente a polling
El polling vuelve a consultar una consulta según un intervalo; las suscripciones solo envían datos cuando algo cambia. Las suscripciones son más eficientes para datos verdaderamente en tiempo real, mientras que el polling es más sencillo cuando basta con una actualización casi en tiempo real.
Comprobación rápida
Compruebe sus conocimientos sobre las suscripciones.
Resumen
Ha aprendido sobre las suscripciones en tiempo real:
- Las suscripciones envían datos mediante WebSockets usando GraphQLWsLink (graphql-ws).
- Use split() para enviar las suscripciones mediante WS y las consultas y mutaciones mediante HTTP.
- useSubscription devuelve un result reactivo con onResult para cada envío.
- Añada los eventos recibidos a un arreglo reactivo para crear una lista activa.
Preguntas frecuentes
¿La lección «Suscripciones en tiempo real con useSubscription» es gratis?
Sí — el texto completo de «Suscripciones en tiempo real con useSubscription» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Suscripciones en tiempo real con useSubscription»?
Configuración del enlace WebSocket, useSubscription() y combinación de datos de suscripción en el estado reactivo Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Suscripciones en tiempo real con useSubscription»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Configuración de Apollo Client en Vue 3
- useQuery para obtener datos
- useMutation para modificar datos
- Suscripciones en tiempo real con useSubscription