-
SSE 통신을 위한 EventSource 대체할것React.js 2024. 4. 12. 13:48728x90
클라이언트에서 사용하는 EventSource의 아쉬운점은 header를 넣지 못한다는 점이다.
http 통신을 그대로 이용할 수 있다는점에서 단방향 통신으로 SSE통신방식이 굉장히 매력적으로 다가왔으나 hader에 Bearer 토큰을 넣어서 인증하는 방식을 사용 할 수 없다면 backend에서 다른방식으로 처리하는 코드가 늘어나게 되면서 authorization 하는 하나의 gaurd로 처리하는게 아니라 다른 guard를 만들거나 검증하는 다른 방법을 모색 해야한다. 굉장히 불편하다.
https://eightify.app/dev/http-authorization-header-in-eventsource-server-sent-events
해당 좋은글을 발견했다. 확장성 있는 http-authorization에 대한 server-sent-event관련 글이다
여기서 추천하는 서드파티 라이브러리는 2가지다
1. event-source-polyfill
https://www.npmjs.com/package/event-source-polyfill
event-source-polyfill
A polyfill for http://www.w3.org/TR/eventsource/ . Latest version: 1.0.31, last published: 2 years ago. Start using event-source-polyfill in your project by running `npm i event-source-polyfill`. There are 223 other projects in the npm registry using event
www.npmjs.com
https://www.npmjs.com/package/@types/event-source-polyfill
@types/event-source-polyfill
TypeScript definitions for event-source-polyfill. Latest version: 1.0.5, last published: 5 months ago. Start using @types/event-source-polyfill in your project by running `npm i @types/event-source-polyfill`. There are 4 other projects in the npm registry
www.npmjs.com
2. @microsoft/fetch-event-source
https://www.npmjs.com/package/@microsoft/fetch-event-source
@microsoft/fetch-event-source
A better API for making Event Source requests, with all the features of fetch(). Latest version: 2.0.1, last published: 3 years ago. Start using @microsoft/fetch-event-source in your project by running `npm i @microsoft/fetch-event-source`. There are 102 o
www.npmjs.com
Fetch Event Source는 Page Visibility API도 지원합니다 . 즉, 브라우저 창이 최소화되면 서버에서 보낸 이벤트가 중지되고 뷰포트로 돌아오면 자동으로 다시 시작됩니다.
728x90'React.js' 카테고리의 다른 글
vite+ typescript + react+ emotion + storybook (0) 2024.04.17 react mention 기능 구현 (0) 2024.04.13 늘렸다 줄였다하는 panel 라이브러리 (0) 2024.03.26 리액트 FSD (0) 2024.03.05 React에서 react-datepicker 사용 typescript (1) 2023.12.07