Colin's Blog
자바스크립트를 활용한 GraphQL Subscriptions를 위한 실시간 위치 추적 기능 개발

이번 글에서는 자바스크립트를 사용하여 GraphQL Subscriptions를 구현하고, 실시간 위치 추적 기능을 개발하는 방법을 알아보겠습니다.

목차

GraphQL Subscriptions란 무엇인가요?

GraphQL Subscriptions은 실시간 데이터를 다루기 위한 GraphQL 스펙의 기능 중 하나입니다. 일반적인 GraphQL 쿼리와는 달리, 서버와 클라이언트 사이에 웹소켓 연결을 통해 실시간으로 데이터를 주고받을 수 있습니다. 이 기능을 활용하면 실시간 위치 추적과 같은 실시간 데이터 처리 기능을 구현할 수 있습니다.

Prisma를 활용한 GraphQL Subscriptions 설정

Prisma는 ORM(Object Relational Mapping) 라이브러리로, GraphQL Subscriptions를 구현하기 위해 사용할 수 있습니다. Prisma를 프로젝트에 추가하고, Prisma 데이터 모델에서 Subscription 타입을 정의하면 서버에서 실시간 데이터를 전송할 수 있습니다.

// prisma.schema
type Location {
  id: ID! @id
  latitude: Float
  longitude: Float
}

type Query {
  locations: [Location!]!
}

type Mutation {
  createLocation(latitude: Float, longitude: Float): Location!
}

type Subscription {
  locationUpdated: Location!
}

위 코드는 Prisma 데이터 모델에서 Location 객체를 정의하고, Query, Mutation, Subscription 타입을 정의한 예시입니다. locationUpdated Subscription은 위치가 업데이트될 때마다 해당 데이터를 클라이언트에게 전송합니다.

웹소켓을 통한 실시간 위치 데이터 전송

웹소켓을 사용하여 클라이언트와 서버 간의 실시간 통신을 구현할 수 있습니다. 클라이언트는 웹소켓 연결을 생성하고, 서버는 데이터의 업데이트가 발생할 때마다 해당 데이터를 클라이언트에게 전송합니다.

// server.js
const { ApolloServer, PubSub } = require('apollo-server');
const pubsub = new PubSub();

const typeDefs = `
  type Location {
    id: ID!
    latitude: Float
    longitude: Float
  }

  type Query {
    locations: [Location!]!
  }

  type Mutation {
    createLocation(latitude: Float, longitude: Float): Location!
  }

  type Subscription {
    locationUpdated: Location!
  }
`;

const resolvers = {
  Query: {
    locations: () => {
      // 위치 데이터를 가져오는 로직
    },
  },
  Mutation: {
    createLocation: (_, { latitude, longitude }) => {
      // 위치 데이터를 생성하는 로직
    },
  },
  Subscription: {
    locationUpdated: {
      subscribe: () => pubsub.asyncIterator('LOCATION_UPDATED'),
    },
  },
};

const server = new ApolloServer({
  typeDefs,
  resolvers,
});

server.listen().then(({ url }) => {
  console.log(`Server listening at ${url}`);
});

위 코드는 Apollo Server와 PubSub을 사용하여 GraphQL 서버를 구현한 예시입니다. locationUpdated Subscription에 대한 구독을 생성하면, 위치 데이터가 업데이트 될 때마다 해당 데이터를 클라이언트에게 전송합니다.

클라이언트에서 위치 데이터 수신

클라이언트에서는 GraphQL Subscriptions를 통해 서버로부터 위치 데이터를 실시간으로 수신할 수 있습니다. Apollo Client의 subscribe 함수를 사용하여 Subscription에 대한 클라이언트 측 구독을 생성합니다.

// client.js
import { ApolloClient, ApolloProvider, gql, InMemoryCache } from '@apollo/client';
import { WebSocketLink } from '@apollo/client/link/ws';

const cache = new InMemoryCache();

const webSocketLink = new WebSocketLink({
  uri: 'ws://localhost:4000', // GraphQL 서버의 웹소켓 엔드포인트 주소
  options: {
    reconnect: true,
  },
});

const client = new ApolloClient({
  link: webSocketLink,
  cache,
});

const LOCATION_UPDATED_SUBSCRIPTION = gql`
  subscription LocationUpdated {
    locationUpdated {
      id
      latitude
      longitude
    }
  }
`;

client.subscribe({ query: LOCATION_UPDATED_SUBSCRIPTION }).subscribe({
  next: (data) => {
    // 위치 데이터가 업데이트될 때마다 실행되는 로직
  },
  error: (error) => {
    console.error('Subscription error:', error);
  },
});

const App = () => (
  <ApolloProvider client={client}>
    {/* 앱 컴포넌트 내용 */}
  </ApolloProvider>
);

위 코드는 Apollo Client를 사용하여 GraphQL 서버에 연결하고, LOCATION_UPDATED_SUBSCRIPTION Subscription에 대한 클라이언트 측 구독을 생성하는 예시입니다. 위치 데이터가 업데이트될 때마다 next 콜백이 실행됩니다.

결론

이번 글에서는 자바스크립트를 활용하여 GraphQL Subscriptions를 이용한 실시간 위치 추적 기능을 개발하는 방법을 알아보았습니다. GraphQL Subscriptions를 통해 실시간으로 위치 데이터를 전송하고, 클라이언트에서 해당 데이터를 실시간으로 수신할 수 있습니다. 이를 활용하여 실시간 위치 추적과 같은 기능을 개발할 수 있습니다.

#GraphQL #JavaScript

© 2018 Colin. All rights reserved.