0Pricing
Vue Academy · Ders

useSubscription ile Gerçek Zamanlı Abonelikler

WebSocket bağlantısı kurulumu, useSubscription() ve abonelik verilerini reaktif duruma birleştirme.

useSubscription ile Gerçek Zamanlı Abonelikler, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Aboneliklerle Gerçek Zamanlı Çalışma

GraphQL abonelikleri, kalıcı bir bağlantı üzerinden verileri sunucudan istemciye iter. Sorgular veriyi bir kez çekerken abonelikler güncellemeleri akış hâlinde iletir — sohbet, canlı akışlar ve bildirimler için idealdir.

WebSocket Aktarımı

Aboneliklerin uzun ömürlü bir bağlantıya ihtiyacı vardır; bu nedenle HTTP yerine WebSockets kullanırlar. graphql-ws kitaplığı, modern iletişim kuralını GraphQLWsLink aracılığıyla sağlar.

npm install graphql-ws

WebSocket Bağlantısını Oluşturma

Bir graphql-ws istemcisini, wss:// abonelik uç noktasını gösteren bir GraphQLWsLink içine sarın.

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

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

Aktarım Sorunu

Sorgular ve mutasyonlar yine HTTP üzerinden, abonelikler ise WebSocket üzerinden gönderilmelidir. Her şey için tek bir bağlantı kullanamazsınız — trafiği işlem türüne göre bölmeniz gerekir.

Bağlantıları Bölme

split işlevi her işlemi yönlendirir: abonelikleri WebSocket bağlantısına, diğer her şeyi ise ayrıştırılmış işlem tanımına göre HTTP bağlantısına gönderir.

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
)

Bölünmüş Bağlantıyı İstemciye Bağlama

Basit bir uri yerine birleşik link bağlantısını Apollo istemcisine geçirin. Artık istemci her işlemi nasıl yönlendireceğini bilir.

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

useSubscription Temelleri

useSubscription bileşik işlevi akışı açar ve reaktif durum döndürür. useQuery gibi result, loading ve error değerlerini sağlar.

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

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

Her İletimi Ele Alma

Gelen her iletilmiş olaya tepki vermek için onResult kancasını kullanın — akış hâlindeki verileri ele almak için en uygun yer burasıdır.

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

Reaktif Diziye Ekleme

Yaygın bir yaklaşım şudur: yerel bir reaktif dizi tutun ve şablonun canlı, büyüyen bir liste oluşturması için her yeni olayı bu diziye ekleyin.

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

Abonelik Değişkenleri

Abonelikler de sorgular gibi değişken kabul eder — örneğin tek bir sohbet odasındaki mesajlara abone olabilirsiniz.

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

Abonelikler ve Yoklama

Yoklama, belirli aralıklarla bir sorguyu yeniden çalıştırır; abonelikler ise yalnızca bir şey değiştiğinde veri iter. Gerçek zamanlı veriler için abonelikler daha verimlidir; gerçeğe yakın zamanlı güncellemeler yeterliyse yoklama daha basittir.

Hızlı Kontrol

Abonelikler hakkındaki bilginizi sınayın.

Özet

Gerçek zamanlı abonelikleri öğrendiniz:

  • Abonelikler, GraphQLWsLink (graphql-ws) aracılığıyla WebSockets üzerinden veri iter.
  • Abonelikleri WS üzerinden, sorguları ve mutasyonları HTTP üzerinden göndermek için split() kullanın.
  • useSubscription, her iletim için onResult içeren reaktif bir result döndürür.
  • Canlı bir liste oluşturmak için iletilen olayları reaktif bir diziye ekleyin.

Sıkça Sorulan Sorular

“useSubscription ile Gerçek Zamanlı Abonelikler” dersi ücretsiz mi?

Evet — “useSubscription ile Gerçek Zamanlı Abonelikler” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“useSubscription ile Gerçek Zamanlı Abonelikler” dersinde ne öğreneceğim?

WebSocket bağlantısı kurulumu, useSubscription() ve abonelik verilerini reaktif duruma birleştirme. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“useSubscription ile Gerçek Zamanlı Abonelikler” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Vue 3'te Apollo Client Kurulumu
  2. Veri Çekme için useQuery
  3. Veri Değişiklikleri için useMutation
  4. useSubscription ile Gerçek Zamanlı Abonelikler
← Vue Academy Sayfasına Dön