Vue Academy · Pelajaran

Subscription Real-Time dengan useSubscription

Menyiapkan tautan WebSocket, useSubscription(), serta menggabungkan data subscription ke state reaktif.

Subscription Real-Time dengan useSubscription adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Waktu Nyata dengan Langganan

Langganan GraphQL mengirimkan data dari server ke klien melalui koneksi persisten. Jika kueri mengambil data satu kali, langganan mengalirkan pembaruan — sangat cocok untuk percakapan, umpan langsung, dan notifikasi.

Transportasi WebSocket

Langganan memerlukan koneksi yang berumur panjang, sehingga menggunakan WebSockets, bukan HTTP. Pustaka graphql-ws menyediakan protokol modern melalui GraphQLWsLink.

npm install graphql-ws

Membuat Link WebSocket

Bungkus klien graphql-ws dalam GraphQLWsLink yang mengarah ke titik akhir langganan wss://.

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

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

Masalah Transportasi

Kueri dan mutasi sebaiknya tetap dikirim melalui HTTP, sedangkan langganan dikirim melalui WebSocket. Anda tidak dapat menggunakan satu link untuk semuanya — Anda perlu memisahkan lalu lintas berdasarkan jenis operasi.

Memisahkan Link

Fungsi split mengarahkan setiap operasi: langganan ke link WebSocket, dan yang lainnya ke link HTTP, berdasarkan definisi operasi yang telah diuraikan.

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
)

Memasang Link Terpisah ke Klien

Teruskan link gabungan ke klien Apollo, bukan uri biasa. Kini klien mengetahui cara mengarahkan setiap operasi.

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

Dasar-Dasar useSubscription

Komposabel useSubscription membuka aliran dan mengembalikan keadaan reaktif. Seperti useQuery, komposabel ini menyediakan result, loading, dan error.

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

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

Menangani Setiap Kiriman

Gunakan pengait onResult untuk merespons setiap peristiwa yang dikirimkan saat tiba — inilah tempat yang tepat untuk menangani data yang dialirkan.

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

Menambahkan ke Larik Reaktif

Pola yang umum digunakan: simpan larik reaktif lokal dan tambahkan setiap peristiwa baru agar templat menampilkan daftar yang terus bertambah secara langsung.

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

Variabel Langganan

Langganan menerima variabel seperti kueri — misalnya, berlangganan pesan dari satu ruang percakapan.

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

Langganan vs Pengambilan Berkala

Pengambilan berkala mengambil ulang kueri berdasarkan pengatur waktu; langganan hanya mengirimkan data saat terjadi perubahan. Langganan lebih efisien untuk data waktu nyata, sedangkan pengambilan berkala lebih sederhana jika pembaruan yang mendekati waktu nyata sudah cukup.

Uji Singkat

Uji pengetahuan Anda tentang langganan.

Ringkasan

Anda telah mempelajari langganan waktu nyata:

Langganan mengirimkan data melalui WebSockets menggunakan GraphQLWsLink (graphql-ws).
Gunakan split() untuk mengirimkan langganan melalui WS dan kueri/mutasi melalui HTTP.
useSubscription mengembalikan result reaktif dengan onResult untuk setiap kiriman.
Tambahkan peristiwa yang dikirimkan ke larik reaktif untuk membuat daftar langsung.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Subscription Real-Time dengan useSubscription” gratis?

Ya — teks lengkap “Subscription Real-Time dengan useSubscription” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Subscription Real-Time dengan useSubscription”?

Menyiapkan tautan WebSocket, useSubscription(), serta menggabungkan data subscription ke state reaktif. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Subscription Real-Time dengan useSubscription” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Menyiapkan Apollo Client di Vue 3
useQuery untuk Pengambilan Data
useMutation untuk Perubahan Data
Subscription Real-Time dengan useSubscription

← Kembali ke Vue Academy