p2p 화상채팅 구현 (2) feat. WebRTC, AWS

// 아래 세줄을 한번에 붙여넣는다.
const ws = new WebSocket("wss://{apiId}.execute-api.{region}.amazonaws.com/{stage}"); // 생성된 WebSocket URL
ws.onopen = () => console.log("connected.");
ws.onmessage = e => console.log(e.data);
// connected.

ws.send('') //대충 아무 내용이나 보내보자.
// {"message": "Internal server error", "connectionId":"UP98SdpMIE0CJPw=", "requestId":"UP9_GH07oE0Ft9w="}

exports.handler = async (event) => {
  return {
    statusCode: 200,
    body: JSON.stringify({ connectionId : event.requestContext.connectionId }), // connectionId를 되돌려준다.
  };
};

// WebSocket API
const WEB_SOCKET_API_URL = 'wss://{apiId}.execute-api.{region}.amazonaws.com/{stage}';
const socket = new WebSocket(WEB_SOCKET_API_URL); 

// 기존 함수들 인터페이스 유지
export const sendMessage = (type, payload) => {/* 나중에 구현예정 */};
export const onMessage = (type, callback) => socket.addEventListener('message', e => {/* 나중에 구현예정 */});

export const waitForConnected = new Promise(resolve => socket.addEventListener('open', resolve));

export const getConnectionId = async () => {
  await waitForConnected;
  socket.send('');
  return new Promise(resolve => {
    socket.addEventListener('message', e => resolve(JSON.parse(e.data).connectionId), {once: true});
  });
};

import {onMessage, sendMessage, getConnectionId} from "./message.js"; // getConnectionId import 추가
getConnectionId().then(connectionId => document.getElementById('localConnectionId').value = connectionId);

event => {
    const AWS = require('aws-sdk');
    new AWS
      .ApiGatewayManagementApi({ endpoint: `${event.requestContext.domainName}/${event.requestContext.stage}` })
      .postToConnection({ ConnectionId: connectionId, Data: '...'})
    }

const AWS = require('aws-sdk');

exports.handler = async (event) => {
  const from = event.requestContext.connectionId;
  const endpoint = `${event.requestContext.domainName}/${event.requestContext.stage}`;

  // 요청 body JSON에 connectionId가 있으면 메시지 전달
  if(event.body){
    const {connectionId, message} = JSON.parse(event.body);
    if(connectionId){
      await new AWS
        .ApiGatewayManagementApi({ endpoint })
        .postToConnection({
          ConnectionId: connectionId,
          Data: JSON.stringify({ message, from }),
        })
        .promise(); 
    }
  }

  // 요청 connectionId를 되돌려줌
  return {
    statusCode: 200,
    body: JSON.stringify({ ConnectionId : from }),
  };
};

/*...*/

// 메시지를 보낼 상태의 connectionId를 추가로 받는다.
export const sendMessage = async (connectionId, type, payload) => {
  await waitForConnected;
  socket.send(JSON.stringify({
    connectionId,
    message: {
      type,
      payload
    }
  }));
};

export const onMessage = (type, callback) => socket.addEventListener('message', e => {
  const {message, from} = JSON.parse(e.data);
  if(message == null) return;
  if(message.type === type) callback(message.payload, from); // 메시지를 보내온 상대의 connectionId도 넘겨준다.
});

/*...*/

// 파일 상단 어딘가에
const remoteConnectionId = document.getElementById('remoteConnectionId');

/*...*/

// SDP offer메시지 보내는 부분
const sendSdpOffer = async () => {
  const rtcSessionDescriptionInit = await rtcPeerConnection.createOffer();
  await rtcPeerConnection.setLocalDescription(rtcSessionDescriptionInit);
  // sendMessage 호출의 첫번째 인자로 사용자로부터 input에 입력받은 remoteConnectionId를 추가
  sendMessage(remoteConnectionId.value, 'SDP', rtcSessionDescriptionInit)
};

/* ...(중요!) 여기에 적혀있지 않아도, sendMessage 호출에 remoteConnectionId.value를 추가해야 한다... */

// SDP offer 메시지 받는 부분
onMessage('SDP', async (descriptionInit, from) => { // callback 실행 인자에 상대방의 connectionId 정보가 추가되었다.
  const rtcSessionDescription = new RTCSessionDescription(descriptionInit);
  await rtcPeerConnection.setRemoteDescription(rtcSessionDescription);
  if (descriptionInit.type === 'offer') {
    // offer를 받는 입장에서는 remoteId를 입력할 input이 비어 있다.
    // offer를 보내온 상대방의 id가 remoteId 이므로 이것으로 input 및 변수를 채우고 이후 통신에 사용한다.
    remoteConnectionId.value = from;
    callButton.disabled = true
    await sendSdpAnswer();
  }
})

const AWS = require('aws-sdk');

exports.handler = async (event) => {
  const from = event.requestContext.connectionId;
  const endpoint = `${event.requestContext.domainName}/${event.requestContext.stage}`;
  
  // 요청 body JSON에 connectionId가 있으면 메시지 전달
  if(event.body){    
    const {connectionId, message} = JSON.parse(event.body);
    await new AWS
      .ApiGatewayManagementApi({ endpoint })
      .postToConnection({
        ConnectionId: connectionId,
        Data: JSON.stringify({ message, from }),
      })
      .promise();
  }

  // 요청 connectionId를 되돌려줌
  return {
    statusCode: 200,
    body: JSON.stringify({ connectionId : from }),
  };
};

// AWS API Gateway 대시보드에 표시된 URL
const WEB_SOCKET_API_URL = `wss://${API_ID}.execute-api.${REGION}.amazonaws.com/${STAGE}/`;
const socket = new WebSocket(WEB_SOCKET_API_URL);

export const waitForConnected = new Promise(resolve => socket.addEventListener('open', resolve));

export const sendMessage = async (connectionId, type, payload) => {
  await waitForConnected;
  socket.send(JSON.stringify({
    connectionId,
    message: {
      type,
      payload
    }
  }));
};

export const onMessage = (type, callback) => socket.addEventListener('message', e => {
  const {message, from} = JSON.parse(e.data);
  if(message == null) return;
  if(message.type === type) callback(message.payload, from); // 메시지, 상대방의 connectionId를 callback으로 넘겨준다.
});

export const getConnectionId = async () => {
  await waitForConnected;
  
  //아무 메시지나 보내서 응답에 있는 connectionId를 promise로 넘겨준다.
  socket.send('');
  return new Promise(resolve => {
    socket.addEventListener('message', e => resolve(JSON.parse(e.data).connectionId), {once: true});
  });
};

import {getConnectionId, onMessage, sendMessage} from "./message.js";

const localConnectionId = document.getElementById('localConnectionId');
const callButton = document.getElementById('call');
const localVideo = document.getElementById('localVideo');
const remoteVideo = document.getElementById('remoteVideo');
const remoteConnectionId = document.getElementById('remoteConnectionId');
const rtcPeerConnection = new RTCPeerConnection();

// 아래 세 메소드는 WebSocket을 통해서 통신하므로 
// remoteConnectionId input에 상대방의 connectionID가 입력되어 있어야 한다.  
const sendSdpOffer = async () => {
  const rtcSessionDescriptionInit = await rtcPeerConnection.createOffer();
  await rtcPeerConnection.setLocalDescription(rtcSessionDescriptionInit);
  sendMessage(remoteConnectionId.value, 'SDP', rtcSessionDescriptionInit)
};

const sendSdpAnswer = async () => {
  const rtcSessionDescriptionInit = await rtcPeerConnection.createAnswer();
  await rtcPeerConnection.setLocalDescription(rtcSessionDescriptionInit);
  sendMessage(remoteConnectionId.value, 'SDP', rtcSessionDescriptionInit);
};

const sendIceCandidate = candidate => {
  sendMessage(remoteConnectionId.value, 'ICE', candidate);
};

// 자신의 connectionId를 받아서 화면에 표시
getConnectionId().then(connectionId => localConnectionId.value = connectionId);

// 웹캠 화면 가져와 화면에 표시
navigator.mediaDevices
  .getUserMedia({video: true, audio: false})
  .then(mediaStream => {
    localVideo.srcObject = mediaStream;
    mediaStream.getTracks().forEach(track => rtcPeerConnection.addTrack(track));
  });

// SDP offer/answer 교환
rtcPeerConnection.addEventListener('negotiationneeded', () => callButton.disabled = false)
callButton.addEventListener('click', sendSdpOffer)
onMessage('SDP', async (descriptionInit, from) => {
  const rtcSessionDescription = new RTCSessionDescription(descriptionInit);
  await rtcPeerConnection.setRemoteDescription(rtcSessionDescription);
  if (descriptionInit.type === 'offer') {
    remoteConnectionId.value = from;
    callButton.disabled = true
    await sendSdpAnswer();
  }
})


// ICE 후보 교환
rtcPeerConnection.addEventListener('icecandidate', e => e.candidate == null || sendIceCandidate(e.candidate));
onMessage('ICE', candidateInit => rtcPeerConnection.addIceCandidate(new RTCIceCandidate(candidateInit)))

// 상대방 화면 표시
rtcPeerConnection.addEventListener('track', e => remoteVideo.srcObject = new MediaStream([e.track]));