인터넷이 보급되면서 HTTP라는 개념을 통해 서버에서 데이터를 가져오려면 무조건 URL을 통해 요청을 주고 받았다. 그렇기 때문에 과거의 웹은 회원가입을 할 때 새로운 팝업을 띄워 아이디 중복검사 등을 하게 하였다.
꽤나 불편하다고 느끼면서 발전시킨 것이 우리가 익히 아는 Ajax 통신이며 이는 서버에 XMLHttpRequest 객체로 요청을 보내면 서버가 응답을 주는 방식이다.
위에서 언급한 아이디 중복검사 시 새로운 페이지를 요청하는 방식이 아닌 데이터만을 요청하는 방법이다. 사용자의 이벤트로부터 JavaScript는 사용자가 이벤트를 발생시킨 DOM을 읽으며 XMLHttpRequest 객체는 해당 DOM의 값을 읽어 서버에 넘겨주게 된다.
다시 서버는 문자열이나 JSON, XML 형식으로 XMLHttpRequest 객체에 요청 결과를 넘겨준다.
JavaScript는 넘겨받은 값을 해당 DOM에 입력해준다.
다시 말해서 Ajax를 사용함에 따라 DOM 일부의 값만 변경할 수 있다는 장점이 생겼는데, 이 방식도 결국은 HTTP를 사용하기 때문에 요청을 보내야 응답이 전달되고 변경된 데이터를 가져오기 위해서 일정시간마다 데이터를 갱신하게 한다든지 사용자로 하여금 DOM 요소에 이벤트를 발생시키도록 유도하는 것은 자원낭비라는 것이 결론일 수 있다.
이러한 문제를 해결하기 위해 웹소켓이 등장했다
이 프로젝트에서는 socket.io 라이브러리를 이용해 웹소캣을 사용했다. Socket.io란,Javascript에서 WebSocket을 더 쉽게 사용할 수 있게 개발된 라이브러리라고 보면 될 것 같다.
서버쪽과 클라이언트 쪽에서 필요한 이벤트를 emit/on 해주는데
emit은 이벤트를 발생시키는 것이고 on은 발생한 이벤트를 받는 거라고 생각하면 된다.
보통 채팅을 치면 나의 채팅과 다른 사람의 채팅이 다르게 보이는 경우가 많다. (예를 들면 카카오톡) broadcast를 활용하여 이를 구현한다.
근데 ㅏ