자바스크립트를 사용한 GraphQL Subscriptions를 위한 실시간 위치 추적 기능

10 Nov 2023

javascript

개요

GraphQL은 데이터 쿼리 및 조작을 위한 쿼리 언어입니다. GraphQL Subscriptions는 GraphQL에서 실시간 데이터 업데이트를 처리하는 데 사용되는 기능입니다. 이 기능은 실시간으로 변경된 데이터를 클라이언트에게 제공할 수 있도록 도와줍니다. 이번 기술 블로그 포스트에서는 자바스크립트를 사용한 GraphQL Subscriptions를 활용하여 실시간 위치 추적 기능을 구현하는 방법을 살펴보겠습니다.

GraphQL Subscriptions란?

GraphQL Subscriptions는 GraphQL 스키마를 기반으로하는 실시간 데이터 업데이트를 위한 기능입니다. 일반적으로 GraphQL 쿼리는 요청을 받아 적절한 데이터를 반환하는데 사용됩니다. 하지만 GraphQL Subscriptions를 사용하면 데이터의 변경 사항이 발생할 때마다 서버에서 클라이언트로 실시간으로 업데이트된 데이터를 전달할 수 있습니다.

실시간 위치 추적 기능

이번 예제에서는 실시간 위치 추적 기능을 구현해보겠습니다. 이 기능은 사용자의 위치 정보를 실시간으로 추적하여 클라이언트에게 보여주는 기능입니다. 사용자가 위치를 업데이트하면 해당 정보를 서버에게 전송하고, 서버는 업데이트된 위치를 GraphQL Subscriptions를 통해 클라이언트에게 보내줍니다.

서버 구현

먼저, 서버를 구현해야 합니다. Node.js와 GraphQL을 사용하여 간단한 서버를 구축할 수 있습니다. 서버에서는 위치 정보를 저장하고, 위치가 업데이트될 때마다 GraphQL Subscriptions를 사용하여 클라이언트에게 업데이트된 위치를 보내주는 기능을 구현해야 합니다.

const { ApolloServer, gql, PubSub } = require('apollo-server');

const pubsub = new PubSub();

const typeDefs = gql`
  type Location {
    latitude: Float
    longitude: Float
  }

  type Query {
    getLocation: Location
  }

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

  type Subscription {
    locationUpdated: Location
  }
`;

const resolvers = {
  Query: {
    getLocation: () => {
      // 로케이션 정보를 반환하는 로직
    },
  },
  Mutation: {
    updateLocation: (parent, { latitude, longitude }) => {
      // 로케이션 정보를 업데이트하는 로직
      const updatedLocation = { latitude, longitude };
      pubsub.publish('LOCATION_UPDATED', { locationUpdated: updatedLocation });
      return updatedLocation;
    },
  },
  Subscription: {
    locationUpdated: {
      subscribe: () => pubsub.asyncIterator('LOCATION_UPDATED'),
    },
  },
};

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

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

클라이언트 구현

클라이언트에서는 위치 정보를 업데이트하는 기능과 업데이트된 위치 정보를 실시간으로 받아와 화면에 표시하는 기능을 구현해야 합니다. 클라이언트는 Apollo Client와 GraphQL Subscriptions를 사용하여 구현할 수 있습니다.

import React, { useEffect, useState } from 'react';
import { ApolloClient, ApolloProvider, useMutation, useSubscription, gql } from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://localhost:4000', // 서버의 주소
});

const UPDATE_LOCATION = gql`
  mutation UpdateLocation($latitude: Float, $longitude: Float) {
    updateLocation(latitude: $latitude, longitude: $longitude) {
      latitude
      longitude
    }
  }
`;

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

const App = () => {
  const [location, setLocation] = useState(null);
  const [updateLocation] = useMutation(UPDATE_LOCATION);

  useEffect(() => {
    navigator.geolocation.watchPosition(async ({ coords }) => {
      const { latitude, longitude } = coords;
      await updateLocation({ variables: { latitude, longitude } });
    });

    const { data } = useSubscription(LOCATION_UPDATED);
    setLocation(data.locationUpdated);
  }, []);

  return (
    <div>
      {location ? (
        <p>
          Latitude: {location.latitude}, Longitude: {location.longitude}
        </p>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
};

const RootApp = () => (
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>
);

export default RootApp;

결론

이번 포스트에서는 자바스크립트를 사용한 GraphQL Subscriptions를 활용하여 실시간 위치 추적 기능을 구현하는 방법을 살펴보았습니다. GraphQL Subscriptions를 사용하면 실시간으로 변경된 데이터를 클라이언트에게 전달할 수 있으므로, 실시간 위치 추적, 실시간 채팅 등 다양한 실시간 기능을 구현하는 데 유용하게 활용할 수 있습니다.

개요

GraphQL Subscriptions란?

실시간 위치 추적 기능

서버 구현

클라이언트 구현

결론

참고 자료