롤 데이터를 실시간으로 가져오는 방법

라이엇에서 제공하는 API는 크게 2가지가 있다.

 

1. Riot API
2. League Client Update API

Riot API는 소환사 데이터나 전적 데이터 같은 정적인 데이터를 불러올 때 사용된다. (그냥 일반적인 API와 같다.)

LCU API(League Client Update API 약자)는 롤 클라이언트와 상호작용할 수 있는 API다. 예시를 들면 게임매칭이 잡히고 챔피언 선택창에서 나와 내 팀원이 어떤 챔피언을 선택했는지 실시간으로 알 수 있다. 어떻게?

 

리그 클라이언트 아키텍쳐는 웹소켓 연결을 사용해서 LCU 자체의 변경사항을 UX프로세스(롤 앱이라고 보면 된다. 롤 앱을 LeagueClientUx라고 한다.)에 전달해서 사용자한테 표시하는데, 여기서 웹소켓을 연결하면 우리도 실시간으로 데이터를 받아올 수 있다. 물론 웹소켓 연결하는 것을 직접 구현하긴 어렵기 때문에, 이미 만들어진 여러 라이브러리 중 하나를 골라서 사용하면 된다. (물론 직접 구현할 순 있으니 관심있다면 이 포스팅을 찾아보자.)

 

라이브러리는 모던하게 사용할 수 있는 league-connect을 사용했다. 라이브러리로 구현하기 전에 간단하게 롤 클라이언트 데이터를 가져오는 흐름을 설명해보자면, 먼저 사용자 컴퓨터에 접근해서 LeagueClientUx파일(그냥 롤 앱)을 찾는다. 그리고 포트번호와 비밀번호를 가져온다. 이 정보들은 실행하는 클라이언트를 표시하는 역할이다. 이제 포트번호와 비밀번호를 가지고 원하는 정보를 반환하는 API 엔드포인트를 불러올 때 넣으면 실행중인 롤 클라이언트의 원하는 정보를 가져올 수 있다. 추가로 여기서 소켓으로 연결하면 실시간으로 받아올 수 있게 된다.

 

여기서 알 수 있는 점은 lcu api를 웹서비스로는 사용할 수 없다. 물론 로컬에서는 사용할 수 있지만 배포를 하게 되면 웹에서는 웹사이트에 접속한 사용자의 컴퓨터 내부에 접근할 수가 없기 때문이다. 그래서 서비스화 하려면 사용자의 컴퓨터 내부에 접근이 가능한 데스크탑 앱으로 만들어야 한다. 이제 league-connect모듈을 사용해서 챔피언 선택창에서 나와 내 팀원이 어떤 챔피언을 선택했는지 실시간으로 확인해보자.

 

먼저 league-connect 모듈을 설치한다.

npm i league-connect

 

그리고 다음과 같이 작성해보자.

import { createWebSocketConnection } from "league-connect";

const ws = await createWebSocketConnection({
  authenticationOptions: {
    awaitConnection: true,
  },
});

ws.subscribe("/lol-champ-select/v1/session", (data) => {
  console.log(data.actions);
});

 

createWebSocketConnection은 롤 클라이언트와 소켓으로 연결해서 이벤트 응답을 받을 수 있도록 해준다. awaitConnection은 LeagueClientUx를 찾기 전까지 대기하는 옵션이다. 즉 사용자가 롤 앱을 실행시키기 전까지 대기하다가 소켓 연결을 시작한다.

 

찾았다면, 구독이라는 기능을 통해서 특정 API 엔드포인트의 이벤트를 받을 수 있는데, API 엔드포인트 목록은 여기서 볼 수 있다. (대신 각각의 엔드포인트가 뭘 응답하는건지, 응답된 값은 뭘 의미하는건지 알 수 없어 하나하나 비교해봐야 한다.)

 

그럼 한번 롤을 킨 다음 사용자 설정으로 게임을 돌려보자. 그럼 아래와 같은 응답값이 콘솔에 찍히게 되는데, 챔피언을 선택할 때마다 배열에서 championId가 바뀌는 것을 볼 수 있다.

[
  [
    {
      actorCellId: 0,
      championId: 67,
      completed: false,
      id: 1,
      isAllyAction: true,
      isInProgress: true,
      pickTurn: 1,
      type: "pick",
    },
  ],
];

 

data.actions가 아닌 data로 하고 로그를 찍어도 myTeam data에 있는 championId도 챔피언을 선택할 때마다 바뀐다. (물론 actions값도 바뀐다.) 하지만 myTeam data에 있는 championId는 사용자 설정에서만 작동하고 실제 일반게임이나 칼바람을 돌리면 찍히지 않는다.

 

championId가 어떤 챔피언인지 확인하려면 여기를 확인하면 된다.