🏤 HTTP VS AJAX
HTTP는 사용자가 URL을 요청할 때에만 서버에서 해당 페이지를 꺼내주는 방식입니다. 그래서 사용자는 서버로부터 새로운 정보를 받아보기 위해서는 반드시 새로운 URL을 요청해야 합니다.
AJAX는 HTTP를 효과적으로 이용하는 기술로 효과적으로 서버와 소통하기 위한 기술입니다.
요청페이지에서 확인을 누르면, 확인을 눌렀다는 정보를 서버에 전달합니다. 웹 서버는 요청을 받고, 처리한 후에 HTML 페이지를 생성하고, 유저에게 해당 HTML페이지를 전송합니다.
이 방식을 선택한다면, HTML(즉 웹 페이지)을 하나 새롭게 브라우저에 뿌리게 되고, 결국 새로운 페이지로 이동하는 결과를 마주하게 됩니다.
AJAX를 쓰면, 유저는 새로운 HTML을 서버로부터 받는 것이 아닙니다.
즉, 유저는 새로운 웹페이지로 이동하는 것이 아닙니다. 대신, 동일한 웹페이지 내에서 DOM을 변경하게 됩니다.
사용자의 이벤트로부터 Javascript는 해당 이름과 내용이 쓰여진 DOM을 읽습니다. 그리고는 XMLHttpRequest 객체를 통해 웹서버에 해당 이름과 내용을 전송합니다.
웹서버는 요청을 처리하고 XML, Text 혹은 JSON을 XMLHttpRequest 객체에 전송합니다. 그러면, Javascript가 해당 응답 정보를 DOM에 씁니다.
그래서 AJAX는 HTML을 서버로부터 받지 않습니다. HTML 페이지 전체를 다 바꿔야 하는 것이 아니라 부분만 바꿀 수 있게 됩니다.
- 일부분만 갱신할수 있도록 XMLHttpRequest객체를 통해 서버에 request
- XMLHttpRequest는 서버와의 연결을 잡아둠
- Json이나 xml형태로 필요한 데이터만 주고 받으며 DOM을 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있음.
🏤 Web Socket
하지만 결국 AJAX도 여전히 HTTP로 서버와 통신합니다. 웹 소켓은 HTML5 표준 기술로, 사용자의 브라우저와 서버 사이의 동적인 양방향 연결 채널을 구성합니다. (양방향 메시지)
웹 소켓 API를 통해 서버로 메세지를 보내고, 요청 없이 응답을 받아오는 것이 가능합니다.
웹 소켓 프로토콜은 접속 확립에 HTTP를 사용하지만, 그 후의 통신은 웹 소켓 독자의 프로토콜로 이우러집니다. header가 상당히 작아 overhead가 적은 특징이 있습니다.
장시간 접속을 전제로 하기 때문에, 접속한 상태라면 클라이언트나 서버로부터 데이터 송신이 가능합니다.
통신 시 지정되는 URL은 ws://localhost:8080 과 같은 형식.
🎟️ 웹 소켓이 필요한 경우
1️⃣ 실시간 양방향 데이터 통신이 필요한 경우
2️⃣ 많은 수의 동시 접속자를 수용해야 하는 경우
3️⃣ 브라우저에서 TCP 기반의 통신으로 확장해야 하는 경우
4️⃣ 개발자에게 사용하기 쉬운 API가 필요할 경우
5️⃣ 클라우드 환경이나 웹을 넘어 SOA(Service Oriented Architecture) 로 확장해야 하는 경우
Socket.io는 자바스크립트를 이용하여 브라우저 종류에 상관없이 실시간 웹을 구현할 수 있도록 한 기술입니다.
Socket.io는 웹 브라우저와 웹 서버의 종류와 버전을 파악하여 가장 적합한 기술을 선택하여 사용합니다.
만약 브라우저에 FlashSocket이라는 기술을 지원하는 플러그인이 설치되어 있으면 그것을 사용하고 플러그인이 없으면 AJAX Long Polling 방식을 사용하도록 합니다.
웹 소켓의 경우는 웹 브라우저에서 호출해서 데이터를 가져가는 기능을 포함하여 반대로 서버에서 클라이언트를 호출할 수 있는 기능까지 있습니다.
AJAX로 만든 웹 페이지라면 서버 측에서 클라이언트가 보낼 수 없습니다. 웹 소켓은 서버에서도 클라이언트를 인지하는 상태이기에 양방향 통신이 가능합니다. -> 채팅을 서버로 보내기
🏤 웹 소켓 어려운 점
1️⃣ 복잡성 : Stateful Protocal이기 때문에 서버와 클라이언트 간의 연결을 항상 유지해야 하며 만약 비정상적으로 연결이 끊어진다면 적절하게 대응해야 합니다
2️⃣ 서버와 클라이언트 간의 소켓 연결을 유지한다는 것 자체가 비용이 듭니다. 트래픽이 많은 서버라면 CPU에 부담이 될 수 있습니다.
3️⃣ 오래된 버전의 웹 브라우저에서는 지원하지 않습니다. -> SockJS 라이브러리 같은 경우에는 Fallback option을 제공
4️⃣ 서버와 클라이언트 간의 연결이 끊어졌을 때 새엉되는 에러 메세지가 구체적이지 않아서 디버깅 하는데 어려움이 많습니다. -> 여러가지 다른 이유로 연결이 끊어졌는데 에러 메세지가 같은 경우
