Learning
GraphQL

Valós idejű frissítések (Subscriptions)

WebSocket-alapú subscriptionök, tipikus use case-ek, és mikor jobb a polling.

Valós idejű frissítések (Subscriptions)

A subscription a GraphQL harmadik alaptípusa. Segítségével a kliens valós idejű frissítéseket kaphat a szerverről – például chat üzeneteket, értesítéseket, élő adatfrissítéseket.

Hogyan működik?

A subscription WebSocket-kapcsolatot használ. A kliens feliratkozik egy eseményre, és a szerver minden alkalommal küld egy üzenetet, amikor az esemény bekövetkezik.

subscription OnNewMessage($conversationId: ID!) {
  messageAdded(conversationId: $conversationId) {
    id
    text
    sender {
      name
      avatar
    }
    createdAt
  }
}

Mit csinál? A kliens megnyit egy WebSocket-kapcsolatot, és minden alkalommal, amikor új üzenet érkezik a megadott beszélgetésbe, a szerver elküldi az üzenet adatait.


Értesítések

subscription OnNotification($userId: ID!) {
  notificationReceived(userId: $userId) {
    id
    type
    title
    message
    isRead
  }
}

Élő adat (pl. részvényárfolyam)

subscription StockPrice($symbol: String!) {
  stockUpdated(symbol: $symbol) {
    symbol
    price
    change
    changePercent
    updatedAt
  }
}

Subscription a backend oldalon (Apollo Server példa)

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

const resolvers = {
  Mutation: {
    sendMessage: async (_, { input }, context) => {
      const message = await context.db.messages.create(input);

      // Értesíti az összes feliratkozót
      pubsub.publish('MESSAGE_ADDED', {
        messageAdded: message,
        conversationId: input.conversationId,
      });

      return message;
    },
  },
  Subscription: {
    messageAdded: {
      subscribe: (_, { conversationId }) =>
        pubsub.asyncIterator([`MESSAGE_ADDED_${conversationId}`]),
    },
  },
};

Mikor NE használj subscriptiont?

A subscription valós idejű kapcsolatot tart fenn, ami szervererőforrást igényel. Ha csak időközönkénti frissítés kell, polling (rendszeres lekérdezés) egyszerűbb és olcsóbb megoldás lehet:

// Apollo Client polling példa
const { data } = useQuery(GET_NOTIFICATIONS, {
  pollInterval: 30000, // 30 másodpercenként lekérdez
});

Rövid összefoglaló

  • A subscription valós idejű, eseményvezérelt adatfrissítést biztosít.
  • WebSocket-kapcsolatot használ a szerver és a kliens között.
  • Tipikus használati esetek: chat, értesítések, élő adatfolyamok.
  • A szerveren PubSub mechanizmus publikálja az eseményeket a feliratkozóknak.
  • Ha csak időnkénti frissítés kell, a polling egyszerűbb alternatíva.

On this page