프라이D
프라이Develog(❁´◡`❁)
프라이D
전체 방문자
오늘
어제
  • ALL (378)
    • TDD, Cleancode with JavaScr.. (5)
    • 프로젝트 (32)
      • work (3)
      • 직접 만드는 기술 블로그 (2)
      • 데일리 옥션 (19)
      • 모락모락 (8)
    • Computer Science (1)
    • Algorithm & 자료구조 (94)
      • 알고리즘 w.JavaScript (53)
      • 자료구조 (5)
      • (인프런) 자바스크립트 알고리즘 문제풀이 (34)
    • JavaScript (45)
      • JavaScript (41)
      • 모던 자바스크립트 Deep Dive (4)
    • WEB (13)
    • 회고 (12)
    • TIL (109)
    • WIL (7)
    • Stacks (20)
      • React.js (6)
      • Next.js (1)
      • Redux (3)
      • Node.js (2)
      • GIT (2)
      • SAP (1)
    • 15일 메이킹 프로젝트 (15)
    • 이전 기록 (14)
    • ETC. (5)
    • ---------------2021 (6)
      • 내일배움단-웹개발 5주 (2)
      • 정보처리기사 (4)

블로그 메뉴

  • 홈
  • 태그
  • 미디어로그
  • 위치로그
  • 방명록

공지사항

인기 글

태그

  • nomadcoder
  • 코드스테이츠
  • 자바스크립트
  • 비트마스크
  • Til
  • 스파르타코딩클럽
  • 자바스크립트알고리즘
  • JavaScript
  • 내일배움카드
  • 2023 인프콘 후기
  • 알고리즘
  • 내일배움단
  • 투포인터알고리즘
  • vanilaJS
  • 자바스크립트비트마스크
  • nomadcoders
  • MySQL
  • 국비지원
  • 모던자바스크립트딥다이브
  • 코딩프로젝트

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
프라이D

프라이Develog(❁´◡`❁)

# 작업일지 16 / SSE를 연결해보자! Event source polyfill 라이브러리 사용해보기. 연결은 왜 끊어지지 않는가.
프로젝트/데일리 옥션

# 작업일지 16 / SSE를 연결해보자! Event source polyfill 라이브러리 사용해보기. 연결은 왜 끊어지지 않는가.

2023. 2. 27. 19:05

알림 데이터 수신을 위해 아래와 같이 SSE 연결 코드를 작성했다.

로그인시에 그전 알림이 한꺼번에 수신되는건 안되어서, 이벤트를 발생시켜 보았다. 일단 알림을 수신할 대상에게 제대로 알림이 오는 것을 확인! 

EventSourcePolyfill 을 사용했더니 45000밀리세컨드마다 리커넥팅을 시도한다. 

서버가 계속 다운되는 이유는 SSE로 확인되었다. SSE 연결 전 2개에 불과했던 스레드 풀이 연결 후 12개 18개 그리고 맥시멈으로 지정했던 20개를 넘어서면서 에러가 발생하는 것으로 확인되었다.

 

조금 찾아보니 SSE 연결이 되어있는 상태에서 제대로 연결을 종료하지 않고 새로운 연결을 시도했을 때 이런 문제가 발생할 수 있다고 하고, 45000밀리초마다 새로 연결을 시도하는게 연관이 있는 것 같아 이를 토대로 문제를 해결해보고자 한다. 

 

이 문제를 해결하려면

1. EventSource 객체가 꼭 필요한 순간에 생성되어야 하고 2. 사용하지 않게 되면 적절하게 해제시켜 줘야 한다. 특히 45000밀리세컨드마다 리커넥팅을 하는데 이 때 연결이 제대로 끊어지지 않는 것 같아서 끊어지도록 코드를 수정했다.

 

위 코드는 EventSource 객체를 만들어서 연결하는 코드

아래 useEffect에서 컴포넌트 마운트시에 fetchSSE 코드가 실행되도록 한다. 

언마운트시에는 close 되도록 했는데, 이 메서드가 잘못된 것인지? 연결이 제대로 끊어지지 않는 현상 발생.

이에 대해 백엔드 분들과 여러 해결 방안을 생각해 보았는데,

1. SSE 연결을 종료하는 API를 만들자 -> 창이 종료되는 이벤트도 감지해서 연결을 끊어줘야한다.

2. 서버에서 SSE 연결을 끊는 시간과 리커넥트를 확인하는 heartBeatTimeout을 30초로 통일하자. 그러면 서버에서 끊어지자마자 다시 재연결 되지 않을까? -> 테스트 안해봐서 잘 모르겠음.

 

어쨌든 지금 급선무는 사실 SSE 가 45밀리세크마다 리커넥트가 되지 않도록 하는게 제일 좋은 것 같다. Event source polyfill 라이브러리의 기본 설정인 것 같은데 아주 엄청나게 긴 시간동안 재요청을 하지 않도록 늘리는 것 이외에 다른 방법이 떠오르지 않는다. 

 

어째서 onclose는 정상 동작하지 않는가? 아마 내일도 이 문제를 해결하려고 노력할 것 같다...! 일정이 생각보다 지연되고 있다. 흠...

저작자표시 (새창열림)

'프로젝트 > 데일리 옥션' 카테고리의 다른 글

# 작업일지 18 / 조건에 따른 데이터 refetch, 검색 기능 로직 수정  (0) 2023.03.02
# 작업일지 17 / SSE 야! 이미 연결 되어있는데 왜 자꾸 끼어들어!  (2) 2023.03.02
# 작업일지 14,15 / 웹소켓 연결, 차트에 실시간 데이터 업데이트하기(Chart.js)  (0) 2023.02.24
# 작업일지 12,13 / STOMP publish 요청 성공! + 에러 처리는..?  (0) 2023.02.22
# 작업일지 11 / 카운터 함수 드디어 고침! 문제는 useEffect에 있었다.  (0) 2023.02.22
    '프로젝트/데일리 옥션' 카테고리의 다른 글
    • # 작업일지 18 / 조건에 따른 데이터 refetch, 검색 기능 로직 수정
    • # 작업일지 17 / SSE 야! 이미 연결 되어있는데 왜 자꾸 끼어들어!
    • # 작업일지 14,15 / 웹소켓 연결, 차트에 실시간 데이터 업데이트하기(Chart.js)
    • # 작업일지 12,13 / STOMP publish 요청 성공! + 에러 처리는..?
    프라이D
    프라이D
    틀린내용 정정 및 개선사항은 언제든지 댓글 달아주세요 :D

    티스토리툴바