웹 소켓을 사용하여 채팅앱 만들기 (1) (Node.js, MongoDB)

김진형·2024년 8월 12일

chat mongodb node.js web socket 웹소켓 채팅 채팅앱 토이 프로젝트

채팅앱 구현하기

목록 보기

1/3

강의를 보면서 백엔드 코드와 주석을 자세하게 남겼습니다. 프론트 코드는 '코딩알려주는 누나'님의 코드를 clone 했습니다. 참고하실 분들은 참고해주세요.
백엔드: https://github.com/Muokok/chat-study
프론트: https://github.com/legobitna/chatapp-client

혹시 몰라서 제가 실습 때 작성한 프론트 코드도 함께 첨부하겠습니다!
https://github.com/Muokok/chat-study-client

1. Why?

현재 진행 중인 프로젝트(UniveUS)에 채팅 기능을 추가할 예정이라 강의를 통해 학습한 내용을 정리하고자 작성한다.(참고 강의: 코딩알려주는 누나)

참고로 강의 진행 순서는 다음과 같다.

백엔드 세팅: DB 세팅, 웹 소켓 세팅 >> (1)
프론트 세팅: 웹 소켓 세팅 >> (1)
백엔드, 프론트 연결 테스트 >> (1)
유저 로그인 >> (2)
메세지 주고 받기

2. HTTP와 웹 소켓 프로토콜의 차이점

2-1. HTTP 프로토콜

HTTP는 단방향 통신이고 연결에 지속성이 없다.

http 프로토콜을 사용할 경우 클라이언트와 서버는 어떻게 소통을 하냐면 클라이언트가 요청할 때만 서버가 응답을 한다. 클라이언트만 대화를 시작할 수 있다. 그래서 단방향 통신이라는 것이다. 이때 클라이언트가 요청 후 서버가 응답을 했다면 둘의 연결은 끊긴다.

2-2. 웹소켓 프로토콜

웹 소켓은 양방향 통신이고 연결에 지속성이 있다.

클라이언트, 서버 모두 원할 때 요청을 할 수 있다. 실시간 채팅 기능을 구현하려면 실시간으로 정보를 주고 받아야 하므로 웹 소켓을 사용한다.

3. 백엔드 세팅

3-1. 라이브러리 설치

npm init -y
npm i express, mongoose, cors dotenv http
npm i socket.io 

npm i nodemon // 파일에 변화가 생기면 자동 리로딩을 해줌

~~여기서 생긴 궁금증~~

~~왜 http가 필요할까????????????~~

3-2. 데이터베이스 세팅

데이터베이스를 세팅한 후 파일 구조는 아래와 같다.
(더 상세한 코드는 깃허브를 참고해주세요.)

app.js

데이터베이스 세팅 후 node app.js 로 실행을 시키니 에러가 났다. MongoDB를 설치하지 않아서 생긴건가 싶어 설치 후 다시 해봤더니

여전히 에러가 발생한다.

MongooseServerSelectionError: connect ECONNREFUSED ::1:27017 이라는 검색어로 구글링을 해봤더니

.env 파일의 localhost를 127.0.0.1로 바꿔주면 된다더라.

정말 해결이 됐다...

왜 localhost가 아닌 127.0.0.1로 바꿔줘야 하는 걸까?

댓글을 읽어보니

::1:27017 부분을 보면
::1은 localhost를 IPv6 방식으로 표현한 것이라고 하네요. 아마 윈도우에서는 localhost가 IPv4 방식인 127.0.0.1이 되어야 하는대 IPv6 방식인 (0:0:0:0:0:0:0:1)가 되어서 오류가 났던거라고 추측해봅니다 !

라고 한다. 뭔가 맞는 말 같다..!