AWS API Gateway - WebSocket API와 HTTP API 연동하기 PART-1

이번 신규 프로젝트 개발은 소켓서버를 활용할 일이 많아질 거 같아 고민이 많았다.

(실시간 접속자 수 및 동시 로그인 여부 체크 등...)

 

내가 고민했던건 다음과 같았다.

   1. 대규모 접속시 서버가 감당이 될까?

   2. 소켓 서버 비용도 만만치 않을거 같은데..

   3. 도중에 소켓 연결이 끊어지거나 안되면 어떡하지?

 

세번째는 잘모르겠으나 비용이나 대규모 접속 및 소켓 통신이 이뤄질때 보완해줄 수 있을만한걸 찾다 보니 AWS

API Gateway에서 지원하는 WebSocket API가 눈에 보였다.

 

내가 이해한 개념도는 아래와 같다.

 

Web Socket API 흐름도

각 클라이언트들이 연결을 맺고 통신하는 소켓 서버는 AWS API Gateway에 맡겨버리고, WebSokcet API를 통해 특정 라우트 키를 통해 원하는 엔드포인트 방식으로 소켓 메세지를 받을 수 있고 그중에 고전적인 HTTP 방식으로 구현된 API에서도 별도 소켓 라이브러리 및 서버 구축없이 소켓 메세지를 받을 수 있으며 또한 원하는 메세지를 실시간으로 API 서버를 통해 각 소켓 세션ID에 보낼 수 있다는 점이 내가 구축해야 할 기능들의 조건에 충족한다는 생각이 들었다.

 

여러번 구글링을 해봤지만 활용도가 아직 없어서인지 많이 나오진 않았다... ㅠ 

 

간단한 커넥션 정도만이 존재해서 난감했는데 열심히 구글링을 한 내가 구축해서 쓸만한 수준정도 까진 해볼 수 있었다.

 

나는 구축 후 소켓 연결 부터 메세지를 전송하는거 까지에 대해서만 다룰것이다.

 

지금부터 구축 및 테스트까지의 순서를 적어본다.

 

PART1에서는 API 생성 및 connect 라우트키 설정 후 테스트까지만 다뤄본다.

 

구축환경

  - AWS Gateway (Websocket API)

  - Spring boot

  - wscat (nodejs 계열로 npm install -g wscat으로 설치한다.)

 

1. WebSocket API 생성 클릭

 

2. Step1-API 세부 정보 지정

 

3. Step2 ~ Step3는 그냥 넘어가도 됨

 

4. Step4-스테이지 추가

  (스테이지는 경로를 선택하는것인데 필자는 개발 기준으로 dev로 이름을 지었다.)

5. Step5-생성버튼 클릭

 

6. 기본 라우트 키 확인

기본으로 connect, disconnect, default가 생성된다.

기본적으로 websocket에 필요한 라우트 키가 같이 생성된다. 지울 수 없으며, 필수적인 키들이기 때문에 사용하게 된다.

  1. $connect - 기본적으로 클라이언트가 websocket API에 연결될때 발생하는 이벤트이다.

  2. $disconnect - 클라이언트가 websocket API와의 연결이 종료될때 발생하는 이벤트이다.

  3. $default - 특정 라우트키 값이나 매칭되는 값이 없을때 기본적으로 호출되는 이벤트이다.

 

* 공통 참고 사항 

Mock으로 한번 저장해야 아래에 요청 템플릿이라는 항목이 노출되니 주의하자.

 

7. $connect 정보 등록

- websocket session ID 취득하기

1. 위 캡처 처럼 http 통신으로 전송받을 엔드포인트 URL 및 경로를 작성하고 http 메서드를 지정한다.

2. 요청 탬플릿을 작성 후 각각 위아래에 저장버튼이 있으니 각각 저장을 누른다.

{
    "id" : "$context.connectionId",  // --> socket api 접속시 생성되는 session id (* 중요)
    "domain" : "$context.domainName", // --> 현재 호출되는 api gateway 도메인 주소
    "stage" : "$context.stage" // --> 호출되는 스테이지 정보
}

- 통합 응답 생성하기 

* 다른 액션 라우트 키들은 통합응답이 필요없지만 $connect의 경우 connection 후 자동적으로 200 응답코드에 대한 처

  리가 필요하다.

 

1. 최상단에 있는 통합 응답 추가 버튼을 클릭

2. 통합응답을 클릭

3. 아래 처럼 기본 탬플릿까지만 생성 후 저장

 

8. 배포하기 (구축해둔 스테이지에 배포한다.)

 

9. $connect 테스트 

 

 1. 배포하게 되면 스테이지 편집기에 url이 두개가 안내된다.

 2. websocket URL은 실제 클라이언트가 소켓 통신한 wss 경로이며, 아래 연결 URL은 HTTP 백엔드 API에서 연결중인

    클라이언트에게 메세지를 보낼 URL 경로이다. (필자는 백엔드에서 메세지를 보내는 방법에서 삽질을 많이 했다..)

 

3. wscat을 통한 웹소켓 접속 확인

wscat -c <wss경로>

default가 설정되어 있지 않아 Forbidden 에러가 발생한다.

4. 접속 후 엔드포인트 API 로그 확인 (필자는 Spring boot로 테스트 하여 Requestbody로 넘어오는 값을 찍어보았다.)

 

위 처럼 소켓 통신 connection 테스트와 connection 완료 후 소켓 session id까지 넘어 오는것 까지 확인했다.

 

다음장에는 간단히 $default 설정과 메세지를 보내고 백엔드 API에서 응답 메세지를 다시 보내는거까지 해보겠다.

 

 

* 참고 사이트

https://enlabsoftware.com/development/how-to-create-real-time-chat-applications-using-websocket-apis-in-api-gateway.html

Creating real-time chat applications using WebSocket APIs in API Gateway

https://medium.com/@kyeongyeonoh/aws-api-gateway-%EC%9D%B4%EC%9A%A9%ED%95%B4%EC%84%9Cwebsocket-%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98-%EA%B5%AC%EC%84%B1-1%EB%B6%80-77b8dba7006d

[AWS] API Gateway 이용해서Websocket 애플리케이션 구성 (1부)