Node.js Backend Development Bootcamp · บทเรียน

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

เพิ่มความสามารถแบบเรียลไทม์ให้ API GraphQL ด้วยการสมัครรับข้อมูล เพื่อให้ไคลเอนต์ได้รับการอัปเดตสดผ่าน WebSockets ทันทีที่ข้อมูลเปลี่ยนแปลง

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

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

The Three GraphQL Operations

GraphQL defines three root operation types:

Query: read data
Mutation: change data
Subscription: receive a stream of live updates

Queries and mutations are request/response; subscriptions keep a connection open for ongoing events.

When to Use Subscriptions

Subscriptions shine when clients need real-time data:

Chat messages
Live notifications
Collaborative editing
Live dashboards and scores

For data that rarely changes, polling a query is simpler.

WebSockets Under the Hood

Queries and mutations travel over HTTP, but subscriptions need a persistent two-way channel — a WebSocket. The server pushes events to subscribed clients without them asking again.

Defining a Subscription in the Schema

Add a Subscription type to your schema with fields clients can subscribe to. Each field is an event stream returning some type.

type Subscription {
  messageAdded(channelId: ID!): Message!
}

The PubSub Engine

Subscriptions rely on a publish/subscribe system. A PubSub instance lets your resolvers publish events and your subscriptions listen for them.

const { PubSub } = require('graphql-subscriptions');
const pubsub = new PubSub();

Publishing an Event

Inside a mutation, after saving data, publish an event on a named topic. Anyone subscribed to that topic receives the payload.

const message = await Message.create(input);
pubsub.publish('MESSAGE_ADDED', { messageAdded: message });
return message;

The Subscription Resolver

A subscription resolver returns an async iterator via asyncIterator, telling the server which topic to forward to the client.

const resolvers = {
  Subscription: {
    messageAdded: {
      subscribe: () => pubsub.asyncIterator('MESSAGE_ADDED')
    }
  }
};

Filtering Events

Often a client only cares about events for one channel. withFilter wraps the iterator and forwards only events that match the subscription's arguments.

const { withFilter } = require('graphql-subscriptions');
subscribe: withFilter(
  () => pubsub.asyncIterator('MESSAGE_ADDED'),
  (payload, vars) => payload.messageAdded.channelId === vars.channelId
)

Client Subscription Query

The client writes a subscription operation just like a query, but with the subscription keyword. The server streams results as they happen.

subscription OnMessage($id: ID!) {
  messageAdded(channelId: $id) {
    id
    text
  }
}

Scaling Across Servers

The in-memory PubSub only works on a single instance. To broadcast across many servers, swap in a backend like graphql-redis-subscriptions so events reach all connected clients.

const { RedisPubSub } = require('graphql-redis-subscriptions');
const pubsub = new RedisPubSub();

Cleaning Up Connections

Open WebSockets consume resources. The server should detect disconnects and stop streaming. Apollo Server handles much of this, but watch for orphaned subscriptions and authenticate the connection on setup.

Quick Check

Test your GraphQL subscription knowledge.

Recap

You added real-time data with GraphQL subscriptions:

Subscriptions stream live events over WebSockets
Declare a Subscription type and resolve it with asyncIterator
Mutations publish events; withFilter targets the right clients
Scale across servers with a Redis-backed PubSub and clean up connections

Now your API can power chat, notifications, and live dashboards.

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

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

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

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

เพิ่มความสามารถแบบเรียลไทม์ให้ API GraphQL ด้วยการสมัครรับข้อมูล เพื่อให้ไคลเอนต์ได้รับการอัปเดตสดผ่าน WebSockets ทันทีที่ข้อมูลเปลี่ยนแปลง คุณปฏิบัติ Node.js Backend Development Bootcamp ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Node.js Backend Development Bootcamp หรือไม่

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

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

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

ฉันเขียนและรันโค้ดในบทเรียน Node.js Backend Development Bootcamp นี้ได้ไหม

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

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

← กลับไปที่ Node.js Backend Development Bootcamp