노마드코더 줌 클론코딩 직접 해 본 후기(2) - 공정, 이론, HTTP, WebSockets, 프로토콜, Socket IO, Events, Rooms, WebRTC의 정의

개발 환경

• 개발 언어: JavaScript(NodeJS), WebSockets, Socket IO, WebRTC
• 개발 환경: Microsoft Windows [Version 10.0.19041.153]
• 개발 툴: Visual Studio Code (VScode)

 

이론적 배경

1) HTTP VS WebSockets / HTTP와 WebSockets의 차이

출처: https://kbj96.tistory.com/46

 

HTTP	WebSockets
*프로토콜
Stateless =*백엔드가 유저를 기억하지 못 함 =백엔드와 유저 사이에 연결이 되어있지 않음 =request와 response 과정 뒤에 백엔드는 유저를 잊어버림 -> real–time(실시간)으로 일어나지 않음		bi-directional (양방향의) request -> 서버가 ‘수락’하거나 ‘거절 (이 과정이 성립되면 establish라고 함) 브라우저와 서버가 서로 커뮤니케이션을 함 -> 서버는 유저를 기억함 request와 response 과정이 필요X like 휴대폰과 wifi (한 번 연결되고 나면 나중에도 끊임없이 연결)

*프로토콜: 어떻게 모든 것이 돌아가야 할지에 대한 규칙을 만듦, 서로 다른 컴퓨터끼리 소통하기 위한 약속임
*프론트엔드: 사용자들이 화면을 통해서 보고, 사용하는 웹 브라우저 구현
*백엔드: 프론트엔드와 달리 사용자에게 보이지 않는, 화면에서 요청하는 일을 처리하는 로직 프로그램 코드 입력

이 프로젝트에서는 WebSockets을 사용한다.
->why? 실시간 채팅과 알림과 같은 real-time(실시간)을 만들 수 있기 때문이다.

 

2) Socket IO

Socket IO는 실시간과 양방향, event 기반의 통신을 가능하게 한다. 이는 JavaScript를 이용하여 브라우저 종류에 상관없이 실시간 웹을 구현할 수 있도록 한 기술이다. WebSocket과 비슷하다고 생각할 수 있지만 둘은 다른 개념이며

웹소켓은 양방향 소통을 위한 프로토콜이고 반면에 Socket IO는 양방향 통신을 하기 위해 웹소켓 기술을 활용하는 라이브러리이다. 즉, 프론트와 백엔드 간 실시간 통신을 가능하게 해주는 프레임워크(아주 쉽게 실시간 기능을 만들어주는 것) 또는 라이브러리인 것이다.

Socket IO	WebSocket
-표준 기술이 아니며 라이브러리임 -소켓 연결 실패 시 fallback을 통해 다른 방식으로 알아서 해당 클라이언트와 연결 시도 -> 탄력적 -방(rooms) 개념을 이용해 일부 클라이언트에게만 데이터를 전송하는 브로드캐스팅 가능	-HTML5 웹 표준 기술 -매우 빠르게 작동하며 통신할 때 아주 적은 데이터를 이용 -이벤트를 단순히 듣고, 보내는 것만 가능

 

3) Events

이벤트(event)란 웹 블라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미한다. 쉽게 말해 프로그램에 의해 감지되고 처리될 수 있는 동작이나 사건인 것이다. 웹 페이지에 사용된 자바스크립트는 이렇게 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다. 예를 들어 사용자가 키보드를 누르는 것이 이벤트 발생 중의 하나이며 타이머와 같은 하드웨어 장치가 이벤트를 발생시키기도 한다.

4) Rooms
private room: 서버와 브라우저 간의 연결 따라 personal ID로 구성
public room: 내가 생성한 이름이 앞에 들어가 있게 된다.

 

5) WebRTC

이는 웹 애플리케이션과 사이트가 중간자 없이 브라우저 간에 오디오나 영상 미디어를 포착하고 마음대로 스트림할 뿐만 아니라, 임이의 데이터도 교환할 수 있도록 하는 기술이다. 플러그인이나 제 3자 소프트웨어 설치 없이 종단 간 데이터 공유와 화상 회의를 가능하게 한다. 사용 사례는 카메라 또는 마이크를 사용하는 기본 웹 앱붕터 고급 영상 통화 애플리케이션 및 화면 공유에 이르기까지 다양하다.

 

WebRTC의 통신과정은 시그널링을 통해 통신할 peer(동료)간 정보를 교환한다. WebRTC는 P2P(peer to peer)을 통해 직접 통신하지만, 이를 중계해주는 과정이 필요하기 때문에 시그널링이 요구되는 것이다. 또한 WebRTC를 사용해 연결을 맺고, peer의 단말에서 미디어를 가져와 교환한다.