LostCatBox

HTTP,Ajax,Websocket

Word count: 329Reading time: 2 min
2020/08/01 Share

자세히

HTTP

http는 OSI layer에서의 데이터 통신 프로토콜이다.

웹브라우저가 URL에 접속한다면 HTTP규약에 따라 요청하게되고 이는 해당서버가 해당 요청에 응답하며, 그 결과인 html문서가 브라우저 창에 나타난다.

하지만 HTTP규약을 그대로 개발한다면 반드시 사용자의 요청이 선행되어야하며 또한 페이지 내용을 고친다면 모든 페이지를 새로고침해야한다.

이를 해결하기위한 것이 Ajax

스크린샷 2020-08-01 오후 3.18.56

Ajax(비동기적 JS And Xml)

HTTP 프로토콜안에서 ajax는 서버와 소통하기 위한 기술이다.

http 문서에서의 DOM과 이를 컨트롤할수있는 Javascript를 이용한다.

즉 유저는 새로운 HTML을 서버로부터 받는것이 아니라, 그 웹페이지 내에서 DOM을 변경하게된다.

사용자의 이벤트로부터 Javascript는 해당 이름과 내용이 쓰여진 DOM을 읽습니다. 그리고는 XMLHttpRequest 객체를 통해 웹서버에 해당 이름과 내용을 전송합니다. 웹서버는 요청을 처리하고 XML, Text 혹은 JSON을 XMLHttpRequest 객체에 전송합니다. 그러면, Javascript가 해당 응답 정보를 DOM에 씁니다. 그렇게 결과페이지가 만들어집니다.

AJAX를 쓰면 새로운 HTML을 서버로부터 받아야 하는 것이 아닙니다. 동일한 페이지의 일부를 수정할 수도 있는 가능성이 생깁니다. 결과적으로 사용자 입장에서는 페이지 이동이 발생되지 않고 페이지 내부 변화만 일어나게 됩니다. HTML 페이지 전체를 다 바꿔야 하는 것이 아니라 부분만 바꿀 수 있게 되는 것입니다.

  • 나이브한 HTTP는 웹브라우저가 서버에 요청합니다.
  • AJAX는 XMLHttpRequest 객체가 서버에 요청합니다.

스크린샷 2020-08-01 오후 3.19.19

하지만 이 또한 한계가 있다.클라이언트의 요청이 있고 그 다음 서버로부터 응답을 받아야하는 상황이므로, 서버가 push할수는 없다.(서버는 응답밖에하지못한다.)

예를 들면 채팅을 만든다고 하였을때는 사람들이 한명씩 같은 채팅방에 접속한다고 했을때, A씨가 처음에 들어올때는 요청, 응답이 이뤄져서 문제없지만 B씨가 채팅방에 접속하면 A씨의 웹에서는 B씨가 들어왔다는 것을 서버가 A에게 push 할수없으므로 한계가있다.

Websocket

자세히

웹소켓은 HTTP의 문제를 해결해주는 약속이다. HTTP에서 원리적으로 해결할 수 없었던 문제는 “클라이언트의 요청이 없음에도, 그 다음 서버로부터 응답을 받는 상황”이었는데요.웹소켓은 HTTP가 해결할 수 없었던 이 문제를 해결하는 새로운 약속(프로토콜)이었습니다. 즉, 브라우저가 서버에 데이터를 요청하고 서버가 브라우저에 데이터를 보내기 위해 별다른 제약이 없습니다.

웹소켓 약속 하에서는 실시간 소통이 편안해지게 됩니다. 웹에서도 채팅이나 게임, 실시간 주식 차트와 같은 실시간이 요구되는 응용프로그램의 개발을 한층 효과적으로 구현할 수 있게 되었습니다. 가상화폐의 분산화 기술의 핵심도 web socket으로 구현할 수 있다는 점 언급해두고 싶습니다.

CATALOG
  1. 1. HTTP
  2. 2. Ajax(비동기적 JS And Xml)
  3. 3. Websocket