웹 소켓

서버와 클라이언트의 통신은 모두 HTTP 프로토콜만 이용해서 이루어진다고 생각할 수 있다.

하지만 웹 개발을 하면서 채팅, 게임, 주식 차트 등의 실시간 통신이 필요한 서비스를 구현하려면  HTTP 프로토콜이 아닌

웹소켓 프로토콜을 사용하는 것이 좋다. .  우리는 오목 웹 페이지를 만들어서 상대방과 통신을 하며 대결을 해야하니 웹 소켓 프로토콜을 사용해야 한다.

 

 

HTTP의 역사

1. HTTP/0.9 (1991년) : GET 메서드만 지원, HTTP 헤더 X 
2. HTTP/1.0 (1996년) : 메서드, 헤더, 상태코드 추가
3. HTTP/1.1 (1997년) : 현재 가장 많이 사용하며, 대부분의 기능이 추가
4. HTTP/2.0 (2015년) : HTTP 1.1 성능 개선 및 확장
5. HTTP/3.0 (2019년 ~ 진행중): TCP 대신에 UDP를 이용한 QUIC 프로토콜 사용

 

HTTP의 한계

HTTP는 사용자가 URL을 요청할 때에만! 서버에서 해당 페이지를 꺼내주는 식임.

거꾸로 말하자면, 사용자는 서버로부터 새로운 정보를 받아오기 위해서, 반드시 새로운 URL을 요청해야 한다는 말임.

 

 

 

웹 사이트 회원가입 과정에서 중복 검사를 할때마다 새로운 창을 띄워진다는 불편한 점이라는 거다.

 

 

 

 

AJAX 등장

이러한 불편한 점을 보완하기 위해 등장한 방안이 AJAX 이다. 

AJAX는 HTTP를 효과적으로 사용하는 기술이지 프로토콜처럼 약속 개념은 아니다

 

 

 

HTTP 통신 방식

1. 요청 페이지에서 확인을 누르면, 확인을 눌렀다는 정보를 서버에 전달함.

2. 웹 서버는 요청을 받고, 처리한 후에 HTML 페이지를 생성하고, 유저에게 해당 HTML페이지를 전송함

3. 이렇게 되면 HTML을 하나 새롭게 브라우저에 뿌리게 되고, 결국 새로운 페이지로 이동함

 

 

 

 

AJAX 통신 방식

AJAX를 쓰면, 유저는 새로운 HTML을 서버로부터 받는 것이 아니다. 

즉, 유조는 새로운 웹페이지로 이동하는 것이 아님. 대신, 동일한 웹페이지 내에서 DOM을 변경하게 됨.

 

요청 페이지에서 이름 칸에 '촉새'를 쓰고, 내용에 '안녕하세요. 촉새입니다' 라고 썻다고 해보자.

사용자의 이벤트로부터 Javascript는 해당 이름과 내용이 쓰여진 DOM을 읽는다. 그리고는  XMLHttpRequest 객체를 통해 웹서버에 해당 이름과 내용을 전송함.

 

웹서버는 요청을 처리하고 XML, Text 혹은 JSON을 XMLHttpRequest 객체에 전송. 그러면, Javascript가 해당 응답 정보를 DOM에 쓴다. 그렇게 결과페이지가 만들어짐

 

 

 

결과적으로 사용자 입장에서는 페이지 이동이 발생되지 않고 페이지 내부 변화만 일어나게 됨

$.ajax({
	type: "post",
	async: true,
	url: "http://localhost:8090/pro16/mem",
	dataType: "text",
	data: {id: _id},
	success: function (data, textStatus) {
		if(data == 'usable') {
			$('#message').text("사용할 수 있는 ID입니다.");
			$('#btn_duplicate').prop("disabled", true);
		} else {
			$('#message').text("사용할 수 없는 ID입니다.");
		}
	},
})

HTTP , AJAX 차이

- HTTP는 페이지 전체를 갱신

- AJAX는 DOM을 갱신하기 때문에 전체가 아닌 일부분만 갱신

 

- HTTP : 웹 브라우저가 서버에 요청

​- AJAX : XMLHttpRequest 객체가 서버에 요청

 

- HTTP : 항상 페이지를 이동

​- AJAX : 조그마한 변경이 필요할 때, 해당 페이지 내에서 변경 가능

 

 

 

 

하지만 AJAX도 결국 HTTP의 한계를 못벗어났고 

이와 같은 애로사항은 HTML5 개발 과정에 녹아들었다. 

HTML5는 순수 웹 환경에서 실시간 양방향 통신이 가능하게 만들어짐. 

그게 바로 웹 소켓이다

 

 

 

웹 소켓 이란?

웹 소켓은 HTML5 표준 기술로, 사용자의 브라우저와 서버 사이의 동적인 양방향 연결 채널을 구성함.

HTTP와는 다르게 서버에서 클라이언트로 정보를 먼저 보낼 수 있음.

실시간 양방향 데이터 통신이 필요할 경우(오목 대결 등), 많은 수의 동시 접속자를 수용해야 하는 경우일때 쓰인다.

 

통신시에 지정되는 URL은 http://www.sample.com/ 과 같은 형식이 아니라 ws://www.sample.com/ 과 같은 형식이 됨.

웹 소켓의 종류에는 아파치,php,자바,자바스크립트,루비,노드js  등이있음

 

 웹소켓은 HTML5의 기술이기 때문에 오래된 버전의 웹 브라우저는 웹소켓을 지원하지 않음.

따라서 이를 해결하기 위해 나온 여러 기술 중 하나가 Socket.io 

Socket.io는 자바스크립트를 이용하여 브라우저 종류에 상관없이 실시간 웹을 구현할 수 있도록 한 기술입니다.

 

 

http 통신은 클라이언트 측에서 데이터를 달라고 요청하면 서버는 답장으로 데이터를 보냄 

하지만 서버는 선톡하는 경우는 없음

 

이런 해결책으로는 

1. SSE(Server-Sent Event) : http통신을 종료안하고 계속 유지

하지만 서버에서 응답만 받을 수 있는 지속적인 데이터 수신만 가능함

이를 통해 서버에서 발생하는 업데이트나 알림 등을 실시간으로 클라이언트에 전달할 수 있음.

 

두번째 해결책이 등장함

2. 웹 소켓(양방향 통신가능)

 webSocekt("ws://localhost:8081"); >> 웹소켓 열어달라고 서버에게 부탁하는 코드웹소캣으로 작동하고 싶다면 ws로 시작을한다. 주로 양방향 통신이 필요한 실시간 채팅 등에 사용됨

 

ws 대신 socket.io 라이브러리 쓰면- 연결 끊기면 자동재접속 가능- 웹소켓 접속되자마자 자동 id 부여- 모든 웹소컷유저에게 전체 메세지 전송가능

- 웹 소켓방을 생성가능