인터넷을 열심히 찾아보고 GPT에게 물어보면서 구현하였다
결론적으로 불안정하다 서버에서 클라로 알림메시지를 전송했는데 전송을 못 받는 경우가 많다. 원인을 찾기가 어렵다.
https://tecoble.techcourse.co.kr/post/2022-10-11-server-sent-events/
여기서 정보를 많이 얻었다. 백엔드는 거의 비슷하게 구현하였다. 오히려 백엔드보다 테스트 목적으로 만든 프론트엔드 때문에 많은 시간이 걸렸다. 처음에는 html 파일에서 자바스크립트로 구현해보려고 했는데 어려움이 많아서 react-app? 를 처음으로 사용해서 타입스크립트로 프론트엔드 서버(?)를 구축하였다.
자바스크립트 소스에서
eventSource = new EventSource(sseURL, { headers: { 'Authorization': accessToken } }); 이코드 때문에 디버깅 시간을 3~4시간을 날렸다. 생성할때도 url 접근 시도를 한다는 사실을 몰라서 엉뚱하게도 백엔드 서버 소스코드만 엄청헤멨다. url접근을 이미 했는데 위의 코드 때문에 또 접근 시도를 하게 되었고 거기다가 토큰도 실제로 전달하지 않아서 인증이 없다는 에러메시지가 자꾸 떠서 어리둥절했었다.
EventSource 는 jwt 토큰을 헤더에 담아서 보낼수 있는 기능이 없다.
그래서 대안이 EventSourcePolyfill 이다.
const newEventSource = new EventSourcePolyfill(sseURL, { headers: { 'Authorization': token } });그래서 타입스크립트로 갈아타게 되었고 react 를 사용해서 프론트서버를 구축하게 되었다. 어찌보면 GTP 가 만들어준 코드 덕분에 엄청나게 헤매게 되었고 또 타입스크립트 코드로 갈아탄 후에는 엄청 도움을 받았고 쓰기 나름인거 같다.
로그인 버튼 클릭하면 로그인 요청을 하고 로그인ok 응답을 jwt토큰과 함께 받은뒤에 서버로 sse연결 요청을 날린다. 그리고 결과를 브라우저에 출력한다.
Message 버튼을 누르면 백엔드에서 SSEmitter를 사용해서 클라에 현재시간을 담은 메시지를 보낸다.
disconnect 버튼을 누르면 서버에 연결을 닫는 요청을 날린다.
서버에서 클라로 실시간으로 알림 메시지를 날리기 위한 미니프로젝트 덕분에 많이 배웠다.
프론트엔드 소스코드 https://github.com/zidanemook/sse-app
