[javascript] Axios를 사용하여 서버와의 SSE 통신하기

21 Nov 2023

javascript

이번 글에서는 JavaScript의 라이브러리인 Axios를 사용하여 서버와의 Server-Sent Events (SSE) 통신을 어떻게 구현하는지 알아보겠습니다. SSE는 서버에서 클라이언트로 데이터를 전달하기 위한 통신 방식으로, 실시간으로 업데이트된 데이터를 받아올 수 있습니다.

기본 설정

Axios를 사용하기 위해서는 먼저 프로젝트에 Axios를 설치해야 합니다. 다음 명령어로 Axios를 설치할 수 있습니다.

$ npm install axios

Axios를 설치한 후, 다음과 같이 import 문을 사용하여 Axios를 프로젝트에 추가합니다.

import axios from 'axios';

SSE 요청 보내기

SSE 통신을 시작하기 위해서는 서버로부터 SSE 데이터를 받아올 URL을 지정해야 합니다. 이때 Axios를 사용하여 GET 요청을 보냅니다. 다음은 Axios를 사용하여 SSE 요청을 보내는 예제입니다.

const eventSource = new EventSource('/sse'); // SSE를 받아올 URL 설정

eventSource.onmessage = function (event) {
  // SSE 데이터 처리
  console.log(event.data);
};

eventSource.onerror = function (error) {
  // 에러 처리
  console.error(error);
};

위 코드는 /sse URL에서 SSE 데이터를 받아오는 예제입니다. onmessage 이벤트 핸들러를 사용하여 데이터를 처리하고, onerror 이벤트 핸들러를 사용하여 에러를 처리합니다.

SSE 응답 받기

서버에서 SSE 형식으로 응답을 보내려면, 다음과 같이 헤더를 설정해야 합니다.

response.writeHead(200, {
  'Content-Type': 'text/event-stream',
  'Cache-Control': 'no-cache',
  'Connection': 'keep-alive',
  'X-Accel-Buffering': 'no'
});

그리고 다음과 같이 SSE 데이터를 보낼 수 있습니다.

response.write(`data: ${data}\n\n`); // SSE 데이터 전송

위 코드에서 data는 SSE로 보낼 데이터를 나타내며, \n\n은 데이터의 끝을 나타냅니다.

결론

Axios를 사용하여 서버와의 SSE 통신을 구현하는 방법에 대해 알아보았습니다. Axios는 간편한 사용법과 다양한 기능을 제공하여 SSE 통신을 보다 효율적으로 처리할 수 있도록 도와줍니다. Axios를 사용하여 서버와의 실시간 데이터 통신을 구현해보세요!

기본 설정

SSE 요청 보내기

SSE 응답 받기

결론

참고 자료