[javascript] 웹 소켓과 AJAX 비교하기

15 Dec 2023

javascript

이번 포스트에서는 웹 소켓과 AJAX의 차이를 살펴보겠습니다. 먼저 각각의 개념과 동작 방식에 대해 간단히 설명한 뒤, 이 둘의 주요 차이점에 대해 알아보겠습니다.

웹 솼켓이란

웹 소켓은 서버와 클라이언트 사이의 실시간 양방향 통신을 가능하게 하는 프로토콜입니다. HTTP 프로토콜과 달리 계속 연결을 유지하고 있어, 실시간으로 데이터를 주고받을 수 있습니다. 이는 채팅 애플리케이션, 온라인 게임 등과 같이 실시간 통신이 필요한 애플리케이션에 적합합니다.

// 웹 소켓 연결 코드 예시
const socket = new WebSocket('ws://서버주소');
socket.onopen = () => {
  console.log('웹 소켓 연결 성공');
};
socket.onmessage = (e) => {
  console.log('서버로부터 메시지 수신:', e.data);
};

AJAX란

AJAX는 비동기적으로 서버와 데이터를 교환하는 기술입니다. 일반적으로 웹 페이지를 새로고침하지 않고도 서버로부터 데이터를 가져와 화면을 업데이트할 수 있게 해줍니다. 주로 웹 페이지 내에서 보여지는 동적인 콘텐츠를 로드할 때 사용됩니다.

// AJAX 요청 코드 예시
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    console.log('서버로부터 응답 받음:', this.responseText);
  }
};
xhr.open('GET', '서버주소', true);
xhr.send();

웹 소켓과 AJAX 비교

주요 차이점은 다음과 같습니다:

통신 방식: 웹 소켓은 실시간 양방향 통신을 지원하고, 계속 연결을 유지합니다. 반면, AJAX는 단방향 통신으로, 요청에 대한 응답만 처리합니다.
사용 사례: 웹 소켓은 실시간 채팅, 주식 시세 업데이트와 같이 실시간 업데이트가 필요한 경우에 사용됩니다. 반면, AJAX는 페이지 내 일부를 업데이트할 때 사용됩니다.

그러나 두 기술은 서로 보완관계에 있으며, 애플리케이션의 요구사항에 따라 적절히 선택되어야 합니다.

목차

웹 솼켓이란

AJAX란

웹 소켓과 AJAX 비교