[Socket i.o] Socket i.o가 원치 않게 Disconnect될 때, 클라이언트 대응 설계하기

🔥 Socket i.o가 원치 않게 Disconnect 될 때는?

→ 현재 서비스 프로세스 상, 드라이버가 출근 프로세스(출근 및 재고 등록)를 끝내면 Socket i.o에 connect하며(enterRoom) 퇴근 프로세스를 할 경우에만 Socket i.o를 disconnect을 하게 된다.

하지만, 퇴근하기로 인해 Socket i.o가 disconnect되는 경우 외에도 원치 않게 Disconnect되는 상황이 있을 것이며 이에 대한 대응이 필요하다고 생각했다. ex)드라이버가 인터넷이 불안정한 곳에 있을 때, 실수로 앱을 종료한 경우 등등

이에 대해 클라이언트에서 어떻게 대응할 것인지 4가지 방법으로 설계 해보았다.

1. 재연결 시도

→ SocketIO는 자동으로 연결을 유지하려고 시도하므로, 연결이 끊어진 후에도 자동으로 재연결을 시도한다. 따라서 대부분의 경우에는 SocketIO가 자동으로 재연결을 시도하므로 별도의 조치가 필요하지 않을 수 있으나, reconnection 및 reconnectionAttempts와 같은 SocketIO 옵션을 확인하고 조정할 수 있다.

// SocketIO 옵션 설정 
const socket = io('https://your-server.com', {
  reconnection: true, // 재연결 시도 활성화
  reconnectionAttempts: 5, // 최대 재연결 시도 횟수
});

2. 타임 아웃 설정

→ SocketIO에는 연결 상태를 확인하기 위한 타임아웃 설정 옵션인 timeout이 있다. 이 옵션은 클라이언트가 서버로부터 응답을 받지 못한 경우, 일정 시간이 지나면 연결을 끊을 수 있도록 설정하는데, 기본적으로는 20초로 설정되어 있다고 한다. 클라이언트에서 SocketIO 연결 상태를 주기적으로 확인하여 연결이 끊어진 경우에 대응할 수 있다. 이를 위해 disconnect 이벤트를 감지하고, 연결이 끊어진 후 일정 시간이 지난 경우 추가 작업을 수행할 수 있는 것이다.

// SocketIO 타임아웃 설정 예시
const socket = io('https://your-server.com', {
  timeout: 30000, // 30초로 타임아웃 설정
});

// SocketIO 연결 상태 확인
let disconnectedTimeout;

socket.on('connect', () => {
  console.log('연결되었습니다.');
  clearTimeout(disconnectedTimeout); // 연결이 복원되면 타임아웃 제거
});

socket.on('disconnect', () => {
  console.log('연결이 끊어졌습니다.');
  disconnectedTimeout = setTimeout(handleDisconnect, 5 * 60 * 1000); // 5분 후에 대응 작업 수행
});

function handleDisconnect() {
  // 연결이 끊어진 후 5분이 지나면 수행할 작업
}

3. 연결 상태 확인

→ 클라이언트에서 SocketIO 연결 상태를 주기적으로 확인하여 연결이 끊어졌는지 여부를 알 수 있. 이를 통해 연결이 끊어진 경우에 대응하는 로직을 추가할 수 있다.

// SocketIO 연결 상태 확인
socket.on('connect', () => {
  console.log('연결되었습니다.');
});

socket.on('disconnect', () => {
  console.log('연결이 끊어졌습니다.');
  // 연결이 끊어진 경우 추가 작업 수행
});

4. 연결 끊김 처리

→ 연결이 끊어진 경우에 대응하여 사용자에게 알리거나 필요한 작업을 수행할 수 있다. 아래와 같이 알림 메시지를 표시하거나 인터페이스를 업데이트하는 등의 작업을 수행할 수 있다.

// 연결 끊김 처리 예시
socket.on('disconnect', () => {
  console.log('연결이 끊어졌습니다.');
  showDisconnectedMessage();
});

function showDisconnectedMessage() {
  // 연결 끊김 알림 메시지 표시 등의 작업 수행
}

// 에러 처리 예시
socket.on('error', (error) => {
  console.error('SocketIO 오류:', error);
  // 에러 처리 로직 추가
});