Vue Academy · Oppitunti

Reaaliaikaiset subscriptionit useSubscription-funktiolla

WebSocket-linkin määritys, useSubscription() ja subscription-datan yhdistäminen reaktiiviseen tilaan

Oppitunti 4/413 vaihetta

Reaaliaikaiset subscriptionit useSubscription-funktiolla on ilmainen Vue Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Vue Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Vue Academy-kurssilla on yhteensä 4 oppituntia.

Reaaliaikaisuus tilausten avulla

GraphQL-tilaukset välittävät tietoja palvelimelta asiakkaalle pysyvän yhteyden kautta. Kyselyt hakevat tiedot kerran, kun taas tilaukset välittävät päivityksiä jatkuvana virtana — ne sopivat erinomaisesti chattiin, reaaliaikaisiin syötteisiin ja ilmoituksiin.

WebSocket-siirtotapa

Tilaukset tarvitsevat pitkäkestoisen yhteyden, joten ne käyttävät WebSocket-yhteyksiä HTTP:n sijaan. graphql-ws-kirjasto tarjoaa modernin protokollan GraphQLWsLink-linkin kautta.

npm install graphql-ws

WebSocket-linkin luominen

包ittakaa graphql-ws-asiakas GraphQLWsLink-linkkiin, joka osoittaa wss://-tilauspäätepisteeseen.

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

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

Siirtotapaongelma

Kyselyt ja mutaatiot kannattaa edelleen välittää HTTP:n kautta, kun taas tilaukset kulkevat WebSocket-yhteyden kautta. Ette voi käyttää yhtä linkkiä kaikkeen — liikenne on **split**-toiminnon avulla jaettava operaatiotyypin perusteella.

Linkkien jakaminen

split-funktio reitittää jokaisen operaation: tilaukset WebSocket-linkkiin ja kaiken muun HTTP-linkkiin jäsennetyn operaatiomäärittelyn perusteella.

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
)

Jaetun linkin liittäminen asiakkaaseen

Välittäkää yhdistetty link Apollo-asiakkaalle tavallisen uri-arvon sijaan. Nyt asiakas osaa reitittää jokaisen operaation oikein.

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

useSubscriptionin perusteet

useSubscription-composable avaa tietovirran ja palauttaa reaktiivisen tilan. Kuten useQuery, se tarjoaa arvot result, loading ja error.

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

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

Jokaiseen välitettyyn tapahtumaan reagoiminen

Käyttäkää onResult-hookia reagoidaksenne jokaiseen saapuvaan tapahtumaan — se on luonteva paikka käsitellä virtaavaa dataa.

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

Tietojen lisääminen reaktiiviseen taulukkoon

Yleinen toimintamalli on pitää paikallista reaktiivista taulukkoa ja lisätä jokainen uusi tapahtuma sen loppuun, jolloin templaatti näyttää kasvavan reaaliaikaisen luettelon.

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

Tilausten muuttujat

Tilaukset hyväksyvät muuttujia aivan kuten kyselytkin — voitte esimerkiksi tilata yhden chat-huoneen viestit.

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

Tilaukset ja polling

Polling hakee kyselyn uudelleen ajastetuin väliajoin, kun taas tilaukset välittävät tietoja vain jonkin muuttuessa. Tilaukset ovat tehokkaampia aidosti reaaliaikaiselle datalle, kun taas polling on yksinkertaisempi vaihtoehto, kun lähes reaaliaikainen päivitys riittää.

Pikatesti

Testatkaa tilauksia koskevat tietonne.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Opitte reaaliaikaiset tilaukset:

Tilaukset välittävät tietoja WebSocket-yhteyksien kautta käyttäen GraphQLWsLink-linkkiä (graphql-ws).
Käyttäkää split()-funktiota tilausten lähettämiseen WS:n kautta ja kyselyjen ja mutaatioiden lähettämiseen HTTP:n kautta.
useSubscription palauttaa reaktiivisen result-arvon ja kutsuu onResult-hookia jokaisen välitetyn tapahtuman yhteydessä.
Lisätkää välitetyt tapahtumat reaktiiviseen taulukkoon reaaliaikaista luetteloa varten.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 42
Oppitunnit: 156

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Reaaliaikaiset subscriptionit useSubscription-funktiolla” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “Reaaliaikaiset subscriptionit useSubscription-funktiolla”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Vue Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Reaaliaikaiset subscriptionit useSubscription-funktiolla”?

WebSocket-linkin määritys, useSubscription() ja subscription-datan yhdistäminen reaktiiviseen tilaan Harjoittelet Vue Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Vue Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Vue Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”Reaaliaikaiset subscriptionit useSubscription-funktiolla”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Vue Academy-oppitunnilla?

Kyllä. Jokainen Vue Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Apollo Clientin käyttöönotto Vue 3:ssa
useQuery datan hakemiseen
useMutation datan muuttamiseen
Reaaliaikaiset subscriptionit useSubscription-funktiolla

← Takaisin: Vue Academy