profile
개발을 합시다 :)

Next.js - 채팅 어플리케이션 구현 1편

Next.js로 사이드프로젝트 진행 중, socket.io를 활용한 채팅방 기능을 구현하고 있습니다. Server express를 활용한 서버는 아래와 같이 구성합니다. > 1. io변수의 path는 클라이언트측과 socekt을 연동시켜주는 주소라고 생각하면 됩니다. io.on 및 io.emit을 통해, 클라이언트측과의 이벤트를 구성해줍니다. io.on은 이벤트수신 , io.emit은 이벤트전송이라 생각하면 됩니다. Client 클라이언트는 Next.js로 구성했습니다. (CSS 미적용) > 1. useEffect를 통해 렌더링 후 서버측과 socket을 연결시켜줍니다. 위의 코드에서 onMessageSubmit함수를 호출하면 작성한 메세지를 서버로 전송합니다. 이후 서버측이 전송한 메세지를 다시 chatMessage에 추가하여 채팅을 보여줍니다. 간단하게 기능확인을 위해 적용한 코드이므로 CSS적용 및 컴포넌트분리등을 추가한 내용으

2023년 4월 4일
·
0개의 댓글
·