HTTP -> Ajax -> Websocket

websocket에서 알아보다가 과정별로 알려주는 블로그를 읽고 깨달았던 점이 많아서 다시 정리하려고 한다.

1.HTTP(hyper text transfer protocol)

문서를 주고 받을 수 있는 약속이다. 단, 사용자가 URL을 요청할때만! 서버에서 해당 페이지를 준다는 식이다.

즉, 사용자는 서버로부터 새로운 정보를 받기 위해서는 반드시 URL을 요청해야한다는 소리다.

=> 예전에는 브라우저가 웹 서버에 어떤 요청을 하게 되면 새로운 페이지가 나타났다. (팝업창 같은)

ex) 비밀번호 확인 버튼을 누르면 팝업창이 떠서 확인이 가능하다던가 그런식

이렇게 되면 사용자 경험이 떨어지고 그래서 나오게 된것이 Ajax다.

2.Ajax

HTTP를 효과적으로 이용하는 기술, 효과적으로 서버와 소통하기 위한 기술이다. 약속이 아니다.

이 기술을 통해서 비밀번호 확인등을 페이지 필요없이 바로 바로 검사할 수 있다.(실시간 유효성검사)

비교)

아까위에서 말한 HTTP를 예시로 들자면, 요청 페이지에서 확인을 누르면 그 정보를 서버에 전달하고 서버는 그 요청을 받아 HTML로 작성하여 유저에게 전송 => 새로운 페이지를 다시 뿌리게 된다는거
Ajax는 새로운 HTML을 서버로부터 받는 것이 아닌 동일한 페이지 내에서 DOM을 변경하게 된다. 이렇게 할 수 있는 이유는 XMLHttpRequest객체 덕분이다. 서버는 요청을 처리하여 XML,Text,JSON 과 같은 형태로 XMLHttpRequest객체에 전송을 하게 된다. 그러면 javascript가 해당 응답정보를 DOM에 쓴다.
덕분에, 동일한 페이지의 일부를 수정할 수도 있는 가능성이 새익며 결과적으로 동일한 페이지에서 내부변화만 일어나게 된다.

그럼 여기까지 정리하자면,

1.HTTP는 부분갱신이 안된다. Ajax는 가능하다.

2.HTTP는 브라우저에서 서버에 요청한다. Ajax는 XMLHttpRequest객체가 서버에 요청한다.

3.HTTP는 항상 페이지 변경이 필요, Ajax는 불필요

그럼에도 Ajax에도 한계점은 있었다.

왜냐 HTTP로 서버와 통신을 하기 때문에 클라이언트의 요청이 있어야 서버에서 응답을 내려준다.

그래서 나온것이 바로 Websocket이다.

3.Websocket

HTTP의 문제를 해결해주는 약속, "클라이언트의 요청이 없었는데도 불구하고 서버로부터 응답을 받는 상황"

서버와 브라우저사이에서 양방향 소통이 가능하다. 브라우저는 서버가 직접 보내는 데이터를 받아드릴 수 있고, 사용자가 새로고침 또는 새로운 페이지로 가지 않아도 최신 데이터를 받아볼 수 있다.

=> 실시간 소통, 실시간 주식 차트 등에서 사용이 가능하다. 위치기반 APP, 동시에 접속하여 동시 수정이 가능한 Tool등이 있다.

그럼 단점은?

1.프로그램 구현이 복잡해진다. 만약 클라이언트와 서버간의 연결이 끊겼을 상황에 대해서 적절히 대응이 필요하다.

2.비용이 크다.

참고 블로그)

알아볼 내용)

TPC/IP, XMLHttpRequest객체

codedive01