OpenVidu가 뭘까?

우리의 웹 프로젝트 동작 흐름은 다음과 같다.

• 웹 페이지 접속
• vue로 구현한 프론트엔드 클라이언트 페이지가 띄워진다.
• 프론트 단에서 클라이언트가 http 요청을 보낸다.
• spring으로 구현한 백엔드 서버가 http 요청을 받아 처리한다.
• 백엔드 단에서 서버가 http 응답을 보낸다.
• 프론트엔드 클라이언트 페이지는 서버로부터 받은 응답 결과를 출력한다.

즉 vue 클라이언트 + spring 서버 로 구성된 상태

여기에 클라이언트끼리 실시간으로 화상 데이터를 주고받기(WebRTC) 위해 미디어 서버를 추가한다.(사실 프론트 단(클라이언트)에서 P2P 통신이 가능하지만 부하가 많이 걸릴 경우 이를 감당하지 못하게 됨. 따라서 클라이언트 사이에 미디어 서버를 구축하여 각 클라이언트의 요청과 응답을 미디어 서버가 감당하도록 한다. 마치 happyhouse 프로젝트를 할 때 프론트에서 공공데이터 포털로 데이터를 요청해서 받을 수 있었지만 cors 문제가 발생했던 것처럼(부하와 관련된 문제는 아니지민) 클라이언트끼리 직접 통신하면 여러 문제가 발생할 수 있음)

WebRTC(Web Real-Time Communication) : 웹 브라우저(클라이언트) 간 통신을 위한 API. 화상, 음성 등의 데이터를 통신하여 사용자 간 통화, 파일 송수신을 가능하게 함

Kurento라는 미디어 서버를 사용할 것이고 이를 구현해둔 OpenVidu API를 사용한다. 이제 우리 프로젝트 구조는 다음과 같아진다.

vue 클라이언트 + 서버 2개(애플리케이션 용 서버(spring 서버), webRTC 용 서버(OpenVidu 서버))

우리 프로젝트에서는 AWS의 클라우드 Linux 서버 환경이다. 리눅스 서버에 도커를 활용하여 우리 애플리케이션 서버인 spring 백엔드 서버를 빌드하고 배포한다. 이제 우리 서버는 www에 공개되어 어디서든 접속할 수 있다. 마찬가지로 OpenVidu 서버도 빌드하고 배포한다.

동작 흐름에서 클라이언트와 애플리케이션 서버의 통신은 http 통신으로 이루어지겠지만, 애플리케이션 서버와 미디어 서버의 통신은 WebSocket으로 이루어진다.(아마?) 추가된 흐름만 확인하면 다음과 같아진다.

• 웹 페이지 접속
• vue로 구현한 프론트엔드 클라이언트 페이지가 띄워진다.
• 프론트 단에서 클라이언트가 http 요청을 보낸다.
• spring으로 구현한 백엔드 서버가 http 요청을 받는다.
• spring 백엔드 서버가 다시 OpenVidu 서버로 WebSocket 요청을 보낸다.
• OpenVidu 서버가 요청을 처리하고 spring 백엔드 서버로 WebSocket 응답을 보낸다.
• spring 백엔드 서버가 WebSocket 응답을 받아 나머지 비즈니스 로직을 처리한다.
• 백엔드 단에서 서버가 http 응답을 보낸다.
• 프론트엔드 클라이언트 페이지는 서버로부터 받은 응답 결과를 출력한다.

WebSocket : 실시간 통신에 적합함

내가 지금까지 이해한 내용은 이정도.