inflearn logo
강의

講義

知識共有

Slackクローンコーディング[Reactによるリアルタイムチャット]

チャットを送る

렌더링 될 때마다 socket.io connect 오류

602

Hyebin Lee

投稿した質問数 1

0

렌더링 될 때마다 socket.io가  connect이 되어 소켓상태에서 connect상태로 로그가 찍힙니다.

혹시 렌더링이 될때마다 socket .io connect를 시키지 않는 방법이 있을까요 ? 

socket 클론코딩 렌더링문제 babel typescript 웹팩 react Socket.io

回答 1

0

zerocho

렌더링될 때 커넥트하지 않으면 언제 커넥트하려고 하시는 건가요??

0

Hyebin Lee

안녕하세요 슬랙 코딩을 바탕으로 응용하여 줌을 만들어보자 하고있습니다. 줌에는 레이아웃에 여러가지 버튼이 존재하는데 해당 버튼을 누르면 state 값이 변경되면서 랜더링이 발생하며 socket 메시지를 주고 받는데 이때 기존에 연결되었던 connection 말고 다른 connection이 연결됩니다.

해당 부분을 해소하기 위하여 지금 슬랙에 나와있는 use소켓 훅함수의 디스커넥트를 사용하여 해결하고자 하였으나 소켓 통신에는 문제가 없으나 소켓서버에는 룸에 접속하지 않은 채 커텍트되어있는 상태로 남아있는 것을 확인했습니다. 

즉 한번 소켓이 커넥트되고 나서 랜더링이 있을 때 마다 해당 부분 소켓 커넥트 함수가 랜더링이 되면서 소켓 서버에 로그를 찍어보면 커넥션 상태로 대기하게 되는 현상입니다

만약 이상태로 소켓을 진행하면 소켓 메시지가 한번이  아니라 여러차례가 전송됩니다.. 해결할 수 있는 방법이 있을까요

0

zerocho

기존에 소켓이 있으면 새로운 소켓을 생성하지 않고 기존 소켓을 리턴하면 됩니다.

https://github.com/ZeroCho/sleact/blob/master/front/hooks/useSocket.ts#L6

그래서 제 코드에도 이렇게 소켓을 캐싱해놓은 부분이 있었습니다. 그래서 useSocket을 호출할 때마다 소켓이 생성되지 않습니다.

기본 셋팅과 관련하여

0

91

1

초기 셋팅 back과 front만 남겨두고 다 지운 후 진행 방법

0

96

2

focus 시에만 화면 업데이트 되는 이유 + 해결방법

0

148

2

useEffect 개수 관리

0

109

2

라이브러리 서치 방법

0

103

2

함수 정의 패턴

0

77

1

npm run dev 에러

0

152

3

npx webpack 후 에러

0

178

2

'void' 형식 식의 truthiness를 테스트할 수 없습니다.ts(1345)

0

142

2

사용자 가입시 에러발생 (TypeError: Cannot read properties of null (reading 'addMembers')

1

177

2

초기세팅중 packge.json 에러떠요

0

154

2

CORS - Access-Control-Allow-Origin 누락 문제

0

430

3

로그인 페이지 무한 새로고침 현상

0

598

2

Module not found: Error: Can't resolve './App' 에러

0

952

1

배포 방법

0

296

2

npm run dev 시 빌드가 매우 느려졌습니다

0

988

2

alias 경로 설정 오류

0

448

2

fetcher 함수의 data 값이 두번 찍히는 이유

0

275

1

제네릭 질문

0

217

2

ts-node 대신 tsx 사용여부

0

373

1

배포 관련 질문

0

247

1

[nginx + https] 서비스를 실행하면 niginx가 아닌 서비스 화면을 보여주게 하고 싶습니다.

0

385

2

[배포하기] webpack에 aws 퍼블릭 IPv4 주소 와 포트 주소를 작성하고 나서 빌드후 실행하면 오류가 발생합니다.

0

336

1

users 호출 시 쿠키가 담기지 않는 이슈 질문드립니다.

0

247

2