자바스크립트를 이용한 GraphQL Subscriptions를 활용한 채팅 애플리케이션 개발

10 Nov 2023

graphql

최근에는 실시간으로 데이터를 주고받는 기능을 필요로 하는 웹 애플리케이션의 수요가 많아지고 있습니다. GraphQL Subscriptions는 실시간 데이터를 구독하고 업데이트하는 기능을 제공하여 채팅 애플리케이션과 같은 실시간 기능을 구현하는 데 효과적으로 사용될 수 있습니다. 이번 블로그에서는 자바스크립트를 이용해 GraphQL Subscriptions를 활용하여 채팅 애플리케이션을 개발하는 방법에 대해 소개하겠습니다.

GraphQL Subscriptions란?

GraphQL Subscriptions는 GraphQL의 기능 중 하나로, 서버와 클라이언트 간에 실시간으로 데이터를 주고받을 수 있도록 해줍니다. 이를 통해 클라이언트는 서버에 데이터를 구독하고, 데이터의 변경이 일어나면 실시간으로 업데이트를 받을 수 있습니다. 이러한 기능은 웹 채팅 애플리케이션, 실시간 주식 시세 업데이트 등 실시간으로 데이터를 갱신해야 하는 애플리케이션에 유용하게 사용될 수 있습니다.

채팅 애플리케이션 개발 과정

GraphQL 서버 설정하기

GraphQL 서버를 설정하기 위해 graphql-yoga와 같은 라이브러리를 사용할 수 있습니다. 이를 통해 GraphQL 스키마와 리졸버를 정의하고, GraphQL Subscriptions를 활성화할 수 있습니다.

const { GraphQLServer, PubSub } = require('graphql-yoga');

const typeDefs = `
  type Query {
    ...
  }

  type Mutation {
    ...
  }

  type Subscription {
    ...
  }
`;

const resolvers = {
  Query: {
    ...
  },
  Mutation: {
    ...
  },
  Subscription: {
    ...
  },
};

const pubsub = new PubSub();

const server = new GraphQLServer({
  typeDefs,
  resolvers,
  context: { pubsub },
});

server.start(() => console.log('GraphQL Server is running'));

채팅 메시지 전송 기능 구현하기

클라이언트에서는 채팅 메시지를 보내는 동작을 수행할 수 있는 뮤테이션을 정의해야 합니다. 이때, 해당 메시지를 받아 다른 클라이언트들에게 실시간으로 전송하는 업데이트를 수행하는 코드를 작성해야 합니다.

const resolvers = {
  Mutation: {
    sendMessage: async (_, { message }, { pubsub }) => {
      // 메시지를 수신한 후 처리하는 로직
      // pubsub.publish를 통해 해당 메시지를 다른 클라이언트들에게 실시간으로 전송
      await pubsub.publish('NEW_MESSAGE', { newMessage: message });

      return true;
    },
  },
};

const NEW_MESSAGE_TOPIC = 'NEW_MESSAGE';

const resolvers = {
  Subscription: {
    newMessage: {
      subscribe: (_, __, { pubsub }) => pubsub.asyncIterator(NEW_MESSAGE_TOPIC),
    },
  },
};

클라이언트에서 실시간 업데이트 받기

클라이언트에서는 서버로부터 받은 채팅 메시지를 실시간으로 업데이트 받아 화면에 표시할 수 있어야 합니다. 이를 위해 Apollo Client와 같은 GraphQL 클라이언트를 사용하여 실시간 데이터를 구독하고 업데이트 받는 기능을 구현할 수 있습니다.

import { ApolloClient, InMemoryCache, gql } from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://localhost:4000',
  cache: new InMemoryCache(),
});

const NEW_MESSAGE_SUBSCRIPTION = gql`
  subscription {
    newMessage {
      message
      timestamp
      sender
    }
  }
`;

const subscription = client.subscribe({ query: NEW_MESSAGE_SUBSCRIPTION });

subscription.subscribe(({ data }) => {
  const newMessage = data.newMessage;
  // 메시지를 받아 처리하는 로직
});

위의 과정을 통해 자바스크립트를 이용하여 GraphQL Subscriptions를 활용한 채팅 애플리케이션을 개발할 수 있습니다. GraphQL Subscriptions는 실시간 데이터 업데이트를 간편하게 구현할 수 있어 개발자들에게 효율적인 방법을 제공합니다.

#GraphQL #JavaScript