Vue Academy · Lekcja

Subskrypcje czasu rzeczywistego z useSubscription

Konfiguracja połączenia WebSocket, useSubscription() oraz scalanie danych subskrypcji ze stanem reaktywnym.

Lekcja 4 z 413 kroki

Subskrypcje czasu rzeczywistego z useSubscription to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Dane w czasie rzeczywistym za pomocą subskrypcji

Subskrypcje GraphQL przesyłają dane z serwera do klienta przez trwałe połączenie. Podczas gdy zapytania pobierają dane jednorazowo, subskrypcje przesyłają aktualizacje na bieżąco — doskonale sprawdzają się w czatach, kanałach na żywo i powiadomieniach.

Transport WebSocket

Subskrypcje wymagają długotrwałego połączenia, dlatego korzystają z WebSocketów zamiast HTTP. Biblioteka graphql-ws udostępnia nowoczesny protokół za pośrednictwem GraphQLWsLink.

npm install graphql-ws

Tworzenie łącza WebSocket

Należy opakować klienta graphql-ws w obiekt GraphQLWsLink wskazujący endpoint subskrypcji wss://.

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

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

Problem transportu

Zapytania i mutacje powinny nadal korzystać z HTTP, natomiast subskrypcje powinny korzystać z WebSocketu. Nie można użyć jednego łącza do wszystkiego — trzeba rozdzielić ruch według typu operacji.

Rozdzielanie łączy

Funkcja split kieruje każdą operację: subskrypcje do łącza WebSocket, a wszystkie pozostałe operacje do łącza HTTP, na podstawie sparsowanej definicji operacji.

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
)

Podłączanie rozdzielonego łącza do klienta

Do klienta Apollo należy przekazać połączone link zamiast zwykłego uri. Od tej pory klient wie, jak kierować poszczególne operacje.

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

Podstawy useSubscription

Composable useSubscription otwiera strumień i zwraca stan reaktywny. Podobnie jak useQuery, udostępnia wartości result, loading i error.

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

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

Obsługa każdego przesłanego zdarzenia

Hook onResult pozwala reagować na każde przesłane zdarzenie zaraz po jego nadejściu — to naturalne miejsce do obsługi danych ze strumienia.

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

Dodawanie do reaktywnej tablicy

Często stosuje się następujący wzorzec: należy przechowywać lokalną tablicę reaktywną i dodawać do niej każde nowe zdarzenie, aby szablon wyświetlał aktualną, powiększającą się listę.

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

Zmienne subskrypcji

Subskrypcje przyjmują zmienne tak samo jak zapytania — można na przykład subskrybować wiadomości z jednego pokoju czatu.

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

Subskrypcje a polling

Polling ponownie wykonuje zapytanie zgodnie z harmonogramem, natomiast subskrypcje przesyłają dane tylko wtedy, gdy coś się zmieni. Subskrypcje są wydajniejsze w przypadku prawdziwych danych czasu rzeczywistego, a polling jest prostszy, gdy wystarczy niemal natychmiastowa aktualizacja.

Szybkie sprawdzenie

Proszę sprawdzić swoją wiedzę o subskrypcjach.

Odpowiedz w interaktywnej lekcji

Podsumowanie

W tej lekcji poznano subskrypcje czasu rzeczywistego:

Subskrypcje przesyłają dane przez WebSockety za pośrednictwem GraphQLWsLink (graphql-ws).
Funkcji split() należy używać do przesyłania subskrypcji przez WS, a zapytań i mutacji przez HTTP.
useSubscription zwraca reaktywny result z funkcją onResult wywoływaną dla każdego przesłanego zdarzenia.
Przesłane zdarzenia można dodawać do reaktywnej tablicy, aby utworzyć aktualną listę.

Bezpłatny start

Ucz się HTML dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 42
Lekcje: 156

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Subskrypcje czasu rzeczywistego z useSubscription” jest bezpłatna?

Tak — pełny tekst „Subskrypcje czasu rzeczywistego z useSubscription” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Subskrypcje czasu rzeczywistego z useSubscription”?

Konfiguracja połączenia WebSocket, useSubscription() oraz scalanie danych subskrypcji ze stanem reaktywnym. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Subskrypcje czasu rzeczywistego z useSubscription”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Konfiguracja Apollo Client w Vue 3
useQuery do pobierania danych
useMutation do zmiany danych
Subskrypcje czasu rzeczywistego z useSubscription

← Powrót do Vue Academy