1. 웹 소켓(WebSocket)
웹 소켓이란 웹 페이지의 한계에서 벗어나 실시간 상호작용이 가능한 웹 서비스를 만드는 표준 기술 프로토콜 입니다.
실시간 웹을 구현하기 위해서는 양방향 통신이 가능해야 합니다. WebSocket 이전에는 Polling, Streaming 방식의 AJAX(Asynchronous JavaScript And XML) 코드를 이용하여 구현하였습니다. AJAX란 비동기 JS와 XML을 말합니다. 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것입니다.
하지만, 이런 방법들을 이용하면 각 브라우저마다 구현 방법이 달라 개발이 어렵다는 문제점이 있습니다. 따라서 HTML5 표준 기술의 일부로 WebSocket이 만들어지게 되었습니다.
[웹 소켓의 특징]
- 소켓을 이용하여 자유롭게 데이터를 주고 받을 수 있다.
- 기존의 요청/응답 관계 방식보다 더 쉽게 데이터 교환이 가능하다.
- HTTP Request와 동일하게 80번 포트를 통해 웹 서버에 연결한다. (HTTPS는 443 포트)
- http:// 대신 ws:// 로 시작하며 Streaming과 유사한 방식으로 푸쉬를 지원한다.
- 클라이언트인 브라우저 중 Chrome, Safari, Firefox, Opera에서 WebSocket을 사용할 수 있으며, 각종 모바일 브라우저에서도 WebSocket을 사용할 수 있다.
- WebSocket 프로토콜은 확정된 상태가 아니기 때문에 브라우저별로 지원하는 WebSocket 버전이 다르다. (예전 브라우저는 지원 X)
[웹 소켓의 장점]
- HTTP Request를 그대로 사용하여 기존의 80, 443포트로 접속 하므로 추가적인 방화벽을 열지 않고도 양방향 통신이 가능하다.
- HTTP 규격인 CORS 적용이나 인증 등의 과정을 기존과 종일하게 사용 가능하다.
2. Socket.io
WebSocket의 프레임워크로서, 다양한 방식의 실시간 웹 기술을 쉽게 사용할 수 있는 모듈입니다. JavaScript를 이용하여 브라우저 종류에 상관없이 실시간 웹을 구현할 수 있습니다.
3.
CORS란?
브라우저에서는 보안적인 이유로 Cross-origin HTTP 요청들을 제한합니다. 그래서 Cross-origin 요청을 하려면 서버의 동의가 필요합니다.
만약 서버가 동의한다면 브라우저에서는 Cross-origin 요청을 허락하고, 동의하지 않는다면 브라우저에서 거절합니다.
이러한 허락을 구하고 거절하는 메커니즘은 HTTP-Header 를 이용합니다. 이를 CORS(Cross-Origin Resource Sharing) 이라고 부릅니다.
cross-origin이란?
cross-origin 이란 다음 중 한가지라도 다른 경우를 말한다.
- 프로토콜 - http와 https는 다른 프로토콜이 다르다.
- 도메인 - domain.com 과 ohter-domain.com 은 다르다.
- 포트번호 - 8080포트와 3000포트는 다르다.
Polling이란?
폴링이란 하나의 장치(또는 프로그램)이 충돌 회피 또는 동기화 처리 등을 목적으로 다른 장치(또는 프로그램)의 상태를 주기적으로 검사하여 일정한 조건을 만족할 때 송수신 등의 자료를 처리하는 방식입니다. - 양방향 통신
[참고문헌]
https://medium.com/@hyun.sang/network-%EC%86%8C%EC%BC%93%EA%B3%BC-%EC%9B%B9%EC%86%8C%EC%BC%93%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90-b1b745fcdcc2
https://github.com/WeareSoft/tech-interview/blob/master/contents/network.md
https://hannut91.github.io/blogs/infra/cors
