0Pricing
Vue Academy · Урок

Подписки в реальном времени с useSubscription

Настройка соединения WebSocket, useSubscription() и объединение данных подписки с реактивным состоянием

«Подписки в реальном времени с useSubscription» — бесплатный урок Vue Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Работа в реальном времени с подписками

Подписки GraphQL передают данные push от сервера клиенту через постоянное соединение. Если запросы получают данные один раз, подписки передают поток обновлений — это идеально подходит для чатов, лент в реальном времени и уведомлений.

Транспорт WebSocket

Подпискам нужно долгоживущее соединение, поэтому они используют WebSockets вместо HTTP. Библиотека graphql-ws предоставляет современный протокол через GraphQLWsLink.

npm install graphql-ws

Создание связи WebSocket

Оберните клиент graphql-ws в GraphQLWsLink, указав конечную точку подписок wss://.

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

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

Проблема транспорта

Запросы и мутации по-прежнему должны выполняться через HTTP, а подписки — через WebSocket. Нельзя использовать одну связь для всего — необходимо разделять трафик по типу операции.

Разделение связей

Функция разделения направляет каждую операцию: подписки — в связь WebSocket, а всё остальное — в связь HTTP, основываясь на разобранном определении операции.

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
)

Подключение разделённой связи к клиенту

Передайте объединённую link клиенту Apollo вместо обычного uri. Теперь клиент умеет направлять каждую операцию нужным способом.

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

Основы useSubscription

Составной API useSubscription открывает поток и возвращает реактивное состояние. Как и useQuery, он предоставляет result, loading и error.

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

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

Обработка каждого push-события

Используйте хук onResult, чтобы реагировать на каждое переданное событие сразу после его поступления — это естественное место для обработки потоковых данных.

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

Добавление данных в реактивный массив

Распространённый шаблон: храните локальный реактивный массив и добавляйте в него каждое новое событие, чтобы шаблон отображал живой постоянно растущий список.

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

Переменные подписки

Подписки принимают переменные так же, как запросы. Например, можно подписаться на сообщения из одной комнаты чата.

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

Подписки и опрос

Опрос повторно выполняет запрос по таймеру, а подписки передают данные только при изменении. Подписки эффективнее для действительно актуальных данных, а опрос проще, когда достаточно почти мгновенного обновления.

Проверка знаний

Проверьте свои знания о подписках.

Итоги

Вы изучили подписки в реальном времени:

  • Подписки передают данные через WebSockets с помощью GraphQLWsLink (graphql-ws).
  • Используйте split(), чтобы отправлять подписки через WS, а запросы и мутации — через HTTP.
  • useSubscription возвращает реактивный результат с onResult для каждого переданного события.
  • Добавляйте переданные события в реактивный массив, чтобы получить живой список.

Часто задаваемые вопросы

Урок «Подписки в реальном времени с useSubscription» бесплатный?

Да — полный текст урока «Подписки в реальном времени с useSubscription» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «Подписки в реальном времени с useSubscription»?

Настройка соединения WebSocket, useSubscription() и объединение данных подписки с реактивным состоянием Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Подписки в реальном времени с useSubscription»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Настройка Apollo Client во Vue 3
  2. useQuery для получения данных
  3. useMutation для изменения данных
  4. Подписки в реальном времени с useSubscription
← Назад к Vue Academy