Vue에서 SSE 적용시 문제

[진심공부중]

안녕하세요
Node.js SSE 부분 강의를 보고 Vue에서 적용하려고 할 때 문제가 생겨서 질문 남깁니다
해당 코드부터 보여드리겠습니다

<Vue.js>



<Node.js Server>


채팅방을 클릭했을 때 DB에서 해당 부모 요소의 글을 전부 가져와서 console.log(response)로 확인까지 잘 했습니다
하지만 이후 그 데이터를 Vue에서 받지를 못 하고 있습니다. 따로 에러도 안 뜨고 무응답 상태입니다
제 생각으로는 eventSource 변수 선언할 때의 문제인 거 같은데 ref로 감싸보고 해도 잘 안되네요
ejs로 구현했을 당시는 잘 되어서 최대한 비슷한 구조로 짜보았는데 어느 부분이 문제일까요?

[codingapple]

eventSource관련 코드들을 전부 onMounted 안으로 옮겨봅시다

[진심공부중]

선생님 덕분에 eventSource 자체는 잘 받았고 확인도 했습니다
하지만 이후 addEventListener 부분에서 e.data를 확인하려 하면 아무것도 안 뜹니다..
event 이름도 서버랑 맞추었는데 왜 e.data 부분만 안 나올까요..

[codingapple]

서버에서 요청.params 는 잘 나오나 출력해봅시다

[진심공부중]

요청.params는 잘 나오고 있습니다

[codingapple]

서버에서 setInterval 써서 계속 응답.write 해봅시다 
아니면 서버에 비슷한 이름의 API가 하나 더있을수도요

[진심공부중]

setInterval로 해보고, api 이름도 바꿔봤는데도 변화가 없네요...
네트워크 탭 확인하면 정상적으로 수신하고 있는데 응답. write 부분에서 반응이 없네요..
우선 Socket.io로 구현해 볼까 하는데 안되는 걸 넘어가기엔 너무 찝찝하네요..

[codingapple]

addEventlistener 대신에
eventSource.onmessage = function(e) { 
console.log(e)
} 
써서 테스트해봅시다 
아니면 url적을때 http부터 시작하는 풀 URL로 바꿔봅시다

[진심공부중]

onmessage와 풀 URL 방식이 안돼서
강의 코드를 기반으로
응답.write('event: test\n'); 이 부분 없애고 클라이언트에서 test 대신에 message로 넣어보았습니다
그리고 setInterval로 요청을 계속해 보았습니다
이렇게 하니 진전이 되었습니다

여기서 문제가 setInterval로 요청 시 1초 단위로 설정했는데 약 40초 뒤에 e.data가 한 번에 쭉 나오고
다시 멈춥니다. 속도를 더 늦춰도 같은 현상이 나옵니다.

setInterval을 없애고 기존의 방식으로 하면 다시 아무것도 안 나옵니다.


추가로 처음에 안될 때 console.log를 서버와 클라이언트에 넣어서 어느 쪽이 문제인지 확인하니까
클라이언트에서 데이터를 받을 때 addEventListener 쪽이 문제였습니다.

[codingapple]

그럼 뷰에 적은 코드가 이상해서
ref변경때문에 무한 재렌더링이 된다거나 mounted가 실행이 안된다거나 그럴수도 있겠군요

[글쓴이]

글