Vue Academy · Pelajaran

Langganan Masa Nyata dengan useSubscription

Persediaan pautan WebSocket, useSubscription(), menggabungkan data langganan ke dalam keadaan reaktif.

Pelajaran 4 daripada 413 langkah

Langganan Masa Nyata dengan useSubscription ialah pelajaran Vue Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Vue Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Masa Nyata dengan Langganan

Langganan GraphQL menghantar data daripada pelayan kepada klien melalui sambungan berterusan. Pertanyaan hanya mengambil data sekali, manakala langganan menstrim kemas kini — sesuai untuk sembang, suapan langsung dan pemberitahuan.

Pengangkutan WebSocket

Langganan memerlukan sambungan yang bertahan lama, jadi ia menggunakan WebSockets dan bukannya HTTP. Pustaka graphql-ws menyediakan protokol moden melalui GraphQLWsLink.

npm install graphql-ws

Mencipta Pautan WebSocket

Bungkus klien graphql-ws dalam GraphQLWsLink yang menunjuk kepada 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 Pengangkutan

Pertanyaan dan mutasi masih patut dihantar melalui HTTP, manakala langganan dihantar melalui WebSocket. Anda tidak boleh menggunakan satu pautan untuk segala-galanya — anda perlu memisahkan trafik berdasarkan jenis operasi.

Memisahkan Pautan

Fungsi split menghalakan setiap operasi: langganan ke pautan WebSocket dan operasi lain ke pautan HTTP, berdasarkan definisi operasi yang dihuraikan.

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
)

Menghubungkan Pautan Terpisah kepada Klien

Hantar link gabungan kepada klien Apollo dan bukannya uri biasa. Kini klien tahu cara menghalakan setiap operasi.

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

Asas useSubscription

Komposabel useSubscription membuka strim dan mengembalikan keadaan reaktif. Seperti useQuery, ia memberikan result, loading dan error.

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

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

Mengendalikan Setiap Hantaran

Gunakan cangkuk onResult untuk bertindak balas terhadap setiap peristiwa yang dihantar apabila peristiwa itu tiba — inilah tempat semula jadi untuk mengendalikan data yang distrim.

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

Menambah ke dalam Tatasusunan Reaktif

Pola yang biasa digunakan ialah mengekalkan tatasusunan reaktif setempat dan menambah setiap peristiwa baharu supaya templat memaparkan senarai yang terus berkembang secara langsung.

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

Pemboleh Ubah Langganan

Langganan menerima pemboleh ubah sama seperti pertanyaan — contohnya, melanggan mesej untuk satu bilik sembang tertentu.

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

Langganan berbanding Pengundian Berkala

Pengundian berkala mengambil semula pertanyaan mengikut pemasa, manakala langganan hanya menghantar data apabila sesuatu berubah. Langganan lebih cekap untuk data masa nyata sebenar, sementara pengundian berkala lebih mudah apabila data hampir masa nyata sudah memadai.

Semakan Ringkas

Uji pengetahuan anda tentang langganan.

Jawab dalam pelajaran interaktif

Ringkasan

Anda telah mempelajari langganan masa nyata:

Langganan menghantar data melalui WebSockets menggunakan GraphQLWsLink (graphql-ws).
Gunakan fungsi pemisah untuk menghantar langganan melalui WebSocket dan pertanyaan atau mutasi melalui HTTP.
useSubscription mengembalikan hasil reaktif dengan onResult untuk setiap hantaran.
Tambah peristiwa yang dihantar ke dalam tatasusunan reaktif untuk menghasilkan senarai langsung.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 42
Pelajaran: 156

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Langganan Masa Nyata dengan useSubscription” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Vue Academy, termasuk “Langganan Masa Nyata dengan useSubscription”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Langganan Masa Nyata dengan useSubscription”?

Persediaan pautan WebSocket, useSubscription(), menggabungkan data langganan ke dalam keadaan reaktif. Anda berlatih Vue Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Vue Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Vue Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “Langganan Masa Nyata dengan useSubscription” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Persediaan Apollo Client dalam Vue 3
useQuery untuk Pengambilan Data
useMutation untuk Perubahan Data
Langganan Masa Nyata dengan useSubscription

← Kembali ke Vue Academy