자바스크립트를 이용한 GraphQL Subscriptions를 활용한 실시간 알림 시스템
GraphQL은 API를 구축하기 위한 강력한 쿼리 언어입니다. 그리고 GraphQL Subscriptions는 실시간 데이터 업데이트를 가능하게 해주는 기능입니다. 이 기능은 실시간 알림 시스템을 구축하기 위해 매우 유용합니다. 이번 글에서는 자바스크립트를 이용하여 GraphQL Subscriptions를 활용한 실시간 알림 시스템을 구축하는 방법에 대해 알아보겠습니다.
GraphQL Subscriptions란?
GraphQL Subscriptions는 GraphQL 스펙에 추가된 기능으로, 서버와 클라이언트 간의 실시간 통신을 가능하게 해줍니다. 이를 통해 실시간으로 데이터를 업데이트하거나 알림을 받을 수 있습니다.
실시간 알림 시스템 구축하기
- GraphQL Subscriptions를 지원하는 서버를 구축합니다. 대표적으로 Apollo Server나 GraphQL Yoga를 사용할 수 있습니다.
예시 코드:
const { ApolloServer } = require('apollo-server');
const { PubSub } = require('graphql-subscriptions');
// Pubsub 인스턴스 생성
const pubsub = new PubSub();
// Subscription 타입 정의
const typeDefs = `
type Subscription {
newNotification: String!
}
`;
// Subscription 리졸버 구현
const resolvers = {
Subscription: {
newNotification: {
subscribe: () => pubsub.asyncIterator(['NEW_NOTIFICATION']),
},
},
};
// 서버 구동
const server = new ApolloServer({
typeDefs,
resolvers,
});
server.listen().then(({ url }) => {
console.log(`Server ready at ${url}`);
});
- 클라이언트에서 GraphQL Subscriptions를 구독(subscribe)합니다. 이때 서버에서는
pubsub인스턴스를 사용하여 실시간으로 업데이트할 데이터를 발행(publish)합니다.
예시 코드:
import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
import { WebSocketLink } from '@apollo/client/link/ws';
const wsLink = new WebSocketLink({
uri: 'ws://localhost:4000/graphql',
options: {
reconnect: true,
},
});
const client = new ApolloClient({
link: wsLink,
cache: new InMemoryCache(),
});
// 실시간 업데이트를 받을 Subscription 쿼리
const subscriptionQuery = gql`
subscription {
newNotification
}
`;
// Subscription 구독
client.subscribe({
query: subscriptionQuery,
}).subscribe({
next: (data) => {
console.log(data);
// 메시지를 받아 처리하는 코드 추가
},
});
결론
GraphQL Subscriptions를 이용하여 자바스크립트로 실시간 알림 시스템을 구축할 수 있습니다. 이를 통해 사용자에게 실시간으로 데이터를 제공하거나 알림을 전달하는 등 다양한 기능을 구현할 수 있습니다. GraphQL Subscriptions를 활용하면 기존의 REST API보다 효율적이고 유연한 실시간 통신이 가능하므로, 웹 애플리케이션의 사용자 경험을 향상시킬 수 있습니다.
자바스크립트, GraphQL, 실시간 알림, 웹 개발, Apollo Server, GraphQL Yoga
참고자료