[AWS] API Gateway Websocket - 01

작성일: 21년 10월 10일

 

Index

1. API Gateway 웹소켓

2. Lambda 함수 생성하기

3. API-Gateway 생성하기

4. Client에 WebSocket API 주소 복사하기

 

 

1. API Gateway 웹소켓

 - 온도조절기 또는 알림시스템 같은 IOT 디바이스들이 클라우드 서버에 접속하여 실시간으로 데이터를 주고 받기 위해 웹소켓을 주로 이용한다

 - AWS에서 웹소켓을 사용하기 위해서는 EC2를 만들어서 포트와 스케일에 대해서 관리를 해야만 했다. 하지만 기존에 REST API만 제공했던 API Gateway 서비스에서 웹소켓 서비스도 제공하게 되면서 쉽고 빠르게 웹소켓 서비스를 이용할 수 있게 되었다.

 

 

2. Lambda 함수 생성하기

 - 먼저 웹소켓의 엔드포인트와 연결을 하기 위해 Lambda부터 만듬

 - 추후에 Lambda에서 웹소켓 API를 사용하기 위한 권한 설정을 하기로 함

 1) 함수 생성

- "aws_websocket_test" 라는 함수 이름으로 함

- 런타임은 예제에 있는 대로 Node.js 로 하였음. 작성 당시에는 14.x가 가장 최신이였음

 

2) 코드 추가하기

  - Lambda 함수가 생성되면 내부에 코드를 아래와 같이 작성함

- 아래와 같이 코드를 작성함. 추후 "endpoint" 주소를 변경 할 것임.

const AWS = require('aws-sdk')

const api = new AWS.ApiGatewayManagementApi({
  endpoint: '<Enter your API Endpoint here>'
})

const options = ['Yes', 'No', 'Maybe', 'Probably', 'Probably Not']

exports.handler = async (event) => {
    console.log(event)

    const route = event.requestContext.routeKey
    const connectionId = event.requestContext.connectionId

    switch (route) {
        case '$connect':
            console.log('Connection occurred')
            break
        case '$disconnect':
            console.log('Disconnection occurred')
            break
        case 'message':
            console.log('Received message:', event.requestContext.body)
            await replyToMessage(options[Math.floor(Math.random() * options.length)], connectionId)
            break
        default:
            console.log('Received unknown route:', route)
    }

    return {
      statusCode: 200
    }
}

async function replyToMessage(response, connectionId) {
    const data = { message: response }
    const params = {
      ConnectionId: connectionId,
      Data: Buffer.from(JSON.stringify(data))
    }

    return api.postToConnection(params).promise()
}

 

3) 코드 설명

Route: API Gateway가 특정 유형의 클라이언트 요청을 처리하는 방법을 설명하고 Route를 식별하기 위해 제공하는 값인 routeKey 매개 변수를 포함함. WebSocket API는 하나 이상의 Route로 구성됨.

특정 인바운드 요청에서 사용할 Route를 결정하려면 Route 선택 식을 제공함. 

 

$default: 경로 선택 식에서 API 경로의 다른 경로 키와 일치하지 않는 값을 생성할 때 사용됩니다. 예를 들어 일반적인 오류 처리 메커니즘을 구현하는 데 사용할 수 있습니다.
$connect: 클라이언트가 WebSocket API에 처음 연결할 때 관련 경로가 사용됩니다.
$disconnect: 클라이언트가 API에서 연결을 끊을 때 관련 경로가 사용됩니다. 

 

채팅방을 예로들어 설명하도록 함

 - 고객은 WebSocket API에 연결할 때 채팅 룸에 참여합니다.
 - 백엔드는 사용자가 WebSocket API에 연결된 후 제공되는 콜백 URL을 통해 특정 사용자에게 메시지를 보낼 수 있음
 - 사용자는 룸으로 메시지를 보낼 수 있음
 - 연결이 끊긴 클라이언트는 대화방에서 제거됨

https://aws.amazon.com/ko/blogs/compute/announcing-websocket-apis-in-amazon-api-gateway/

위의 웹소켓 구성에 대한 설명

(1) 애플리케이션은 클라이언트와 서버 간의 연결을 처리하는 API 게이트웨이의 WebSocket API로 구성됨

(2) 클라이언트가 API에서 를 연결하거나 연결을 끊으면 두 개의 AWS 람다 함수가 반응함

(3) sendMessage 함수는 클라이언트가 서버로 메시지를 보낼 때 호출됨

(4) 서버는 새 API 게이트웨이 관리 API를 사용하여 연결된 모든 클라이언트에 메시지를 보냄

(5) 연결된 각 클라이언트를 추적하려면 DynamoDB 테이블을 사용하여 연결 식별자를 유지함

 

 

3. API-Gateway

 1) 웹소켓 API 생성하기

 - WebSocket API를 생성

 - 이름과 라우팅 표현식을 입력함

 - 라우트 표현식을 이용하여 클라이언트의 요청을 구분 할 수 있음

 - 라우팅키 설정하기

 - Route가 $connect, $disconnect 등 들어왔을때 Lambda를 연결시켜줌

 - 해당 예제에서는 모두 동일한 Lambda를 입력하면 됨

 - 추후에 스테이지 단위로 API 호출이 얼마나 일어났는지 등에 대한 모니터링이 가능함

 - 설정한 내용들을 전체 확인함

 

2) 생성된 웹소켓 주소 복사하기

 - 생성한 API의 주소를 복사함

 - 위에서 구성한 Lambda에게 클라이언트에 데이터를 보낼 수 있도록 API 주소를 알려줌

 

 

4. Client에 WebSocket API 주소 복사하기

 - 예제에서 사용할 Client 코드에 WebSocket API 주소를 붙여넣기함

 - 위의 Github에서 다운로드 하여 수정함

// MDN WebSocket documentation
// https://developer.mozilla.org/en-US/docs/Web/API/WebSocket

const socket = new WebSocket('wss://ljzo2uud5i.execute-api.ap-northeast-2.amazonaws.com/production')

socket.addEventListener('open', e => {
  console.log('WebSocket is connected')
})

socket.addEventListener('close', e => console.log('WebSocket is closed'))

socket.addEventListener('error', e => console.error('WebSocket is in error', e))

socket.addEventListener('message', e => {
  // console.log('WebSocket received a message:', e)
  console.log('Your answer is:', JSON.parse(e.data).message)
})

window.ask = function (msg) {
  const payload = {
    action: 'message',
    msg
  }
  socket.send(JSON.stringify(payload))
}

 

 

Referece:

https://awsk.tistory.com/1

API Gateway에서 WebSocket API 사용

https://lacti.github.io/2019/07/07/websocket-api/

AWS WebSocket API 써보기

https://aws.amazon.com/ko/blogs/compute/announcing-websocket-apis-in-amazon-api-gateway/

Announcing WebSocket APIs in Amazon API Gateway | Amazon Web Services

https://www.youtube.com/watch?v=ZuoZpf3JnY8 

https://github.com/ryanmurakami/websockets-on-aws

GitHub - ryanmurakami/websockets-on-aws: Example of using WebSockets with API Gateway on AWS