Vue Academy · บทเรียน

การสมัครรับข้อมูลแบบเรียลไทม์ด้วย useSubscription

การตั้งค่าลิงก์ WebSocket, useSubscription() และการรวมข้อมูลการสมัครรับเข้ากับสถานะรีแอกทีฟ

การสมัครรับข้อมูลแบบเรียลไทม์ด้วย useSubscription เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

การสมัครรับข้อมูลแบบเรียลไทม์

การสมัครรับข้อมูลของ GraphQL จะส่งข้อมูลจากเซิร์ฟเวอร์ไปยังไคลเอนต์ผ่านการเชื่อมต่อที่คงอยู่ ต่างจากคำค้นที่ดึงข้อมูลเพียงครั้งเดียว การสมัครรับข้อมูลจะส่งการอัปเดตอย่างต่อเนื่อง — เหมาะอย่างยิ่งสำหรับแชต ฟีดสด และการแจ้งเตือน

การส่งข้อมูลผ่าน WebSocket

การสมัครรับข้อมูลต้องใช้การเชื่อมต่อที่มีอายุยาวนาน จึงใช้ WebSockets แทน HTTP ไลบรารี graphql-ws มีโพรโทคอลสมัยใหม่ให้ใช้งานผ่าน GraphQLWsLink

npm install graphql-ws

การสร้างลิงก์ WebSocket

ห่อไคลเอนต์ graphql-ws ไว้ใน GraphQLWsLink โดยชี้ไปยังจุดปลายทางการสมัครรับข้อมูล wss://

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

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

ปัญหาของการส่งข้อมูล

คำค้นและมิวเทชันควรยังคงส่งผ่าน HTTP ส่วนการสมัครรับข้อมูลควรส่งผ่าน WebSocket คุณไม่สามารถใช้ลิงก์เดียวกับทุกอย่างได้ — ต้อง แยกการรับส่งข้อมูลตามประเภทการดำเนินการ

การแยกลิงก์

ฟังก์ชัน split จะกำหนดเส้นทางให้แต่ละการดำเนินการ โดยส่งการสมัครรับข้อมูลไปยังลิงก์ WebSocket และส่งอย่างอื่นไปยังลิงก์ HTTP ตามคำจำกัดความของการดำเนินการที่ผ่านการแยกวิเคราะห์

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
)

การเชื่อมลิงก์ที่แยกแล้วเข้ากับไคลเอนต์

ส่ง link ที่รวมกันแล้วให้ไคลเอนต์ Apollo แทนการใช้ uri แบบธรรมดา จากนั้นไคลเอนต์จะรู้วิธีกำหนดเส้นทางให้แต่ละการดำเนินการ

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

พื้นฐานของ useSubscription

ฟังก์ชันแบบคอมโพสิเบิล useSubscription จะเปิดกระแสข้อมูลและคืนค่าสถานะที่ตอบสนอง เช่นเดียวกับ useQuery ฟังก์ชันนี้ให้ค่า result loading และ error

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

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

การจัดการข้อมูลที่ส่งมาแต่ละครั้ง

ใช้ฮุก onResult เพื่อตอบสนองต่อเหตุการณ์ที่ส่งมาแต่ละครั้งเมื่อมาถึง — นี่คือจุดที่เหมาะสำหรับจัดการข้อมูลแบบกระแส

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

การเพิ่มข้อมูลลงในอาร์เรย์ที่ตอบสนอง

รูปแบบที่ใช้กันทั่วไปคือ เก็บอาร์เรย์ท้องถิ่นที่ตอบสนองไว้ แล้วเพิ่มเหตุการณ์ใหม่แต่ละรายการเข้าไป เพื่อให้เทมเพลตแสดงรายการสดที่ขยายขึ้นเรื่อย ๆ

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

ตัวแปรของการสมัครรับข้อมูล

การสมัครรับข้อมูลรับตัวแปรได้เช่นเดียวกับคำค้น — ตัวอย่างเช่น สมัครรับข้อความของห้องแชตห้องเดียว

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

การสมัครรับข้อมูลเทียบกับการสำรวจเป็นช่วง

การสำรวจเป็นช่วงจะดึงคำค้นใหม่ตามตัวจับเวลา ส่วนการสมัครรับข้อมูลจะส่งข้อมูลเฉพาะเมื่อมีบางอย่างเปลี่ยนแปลง การสมัครรับข้อมูลมีประสิทธิภาพกว่าสำหรับข้อมูลแบบเรียลไทม์จริง ขณะที่การสำรวจเป็นช่วงเรียบง่ายกว่าเมื่อการอัปเดตเกือบเรียลไทม์ก็เพียงพอ

ตรวจสอบความเข้าใจ

ทดสอบความรู้ของคุณเกี่ยวกับการสมัครรับข้อมูล

สรุปทบทวน

คุณได้เรียนรู้เกี่ยวกับการสมัครรับข้อมูลแบบเรียลไทม์:

การสมัครรับข้อมูลส่งข้อมูลผ่าน WebSockets โดยใช้ GraphQLWsLink (graphql-ws)
ใช้ฟังก์ชันแยกเพื่อส่งการสมัครรับข้อมูลผ่าน WS และส่งคำค้นหรือมิวเทชันผ่าน HTTP
useSubscription คืนค่าผลลัพธ์ที่ตอบสนอง พร้อม onResult สำหรับข้อมูลที่ส่งมาแต่ละครั้ง
เพิ่มเหตุการณ์ที่ส่งมาแต่ละครั้งลงในอาร์เรย์ที่ตอบสนองเพื่อสร้างรายการสด

คำถามที่พบบ่อย

บทเรียน “การสมัครรับข้อมูลแบบเรียลไทม์ด้วย useSubscription” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การสมัครรับข้อมูลแบบเรียลไทม์ด้วย useSubscription” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การสมัครรับข้อมูลแบบเรียลไทม์ด้วย useSubscription”

การตั้งค่าลิงก์ WebSocket, useSubscription() และการรวมข้อมูลการสมัครรับเข้ากับสถานะรีแอกทีฟ คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “การสมัครรับข้อมูลแบบเรียลไทม์ด้วย useSubscription” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

การตั้งค่า Apollo Client ใน Vue 3
การใช้ useQuery เพื่อดึงข้อมูล
การใช้ useMutation เพื่อเปลี่ยนแปลงข้อมูล
การสมัครรับข้อมูลแบบเรียลไทม์ด้วย useSubscription

← กลับไปที่ Vue Academy