![[Node.js] 실시간 채팅 서비스 만들기(5) - 채팅 기능 구현](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F998D1C455B0F8C3621)
안녕하세요
이번 시간에는 지난 강좌에 이어 본격적으로 채팅 기능을 구현해보도록 하겠습니다!
이전 강좌의 응용이므로 크게 어렵지않습니다!
[목차]
1. 채팅 기능 설계
2. 서버 코드 작성
3. 클라이언트 코드 작성
4. 테스트
채팅 개발을 위해 간단히 정리하고 시작합시다!
우리가 개발할 채팅은 실시간 채팅입니다.
누가 새로 들어왔는지, 누가 나갔는지 알 수 있도록 기능을 구현할 예정이구요
기본적인 채팅 기능을 구현할 예정입니다.
이벤트 명은 미리 정의하고 시작하도록 하겠습니다!
message: 클라이언트가 서버로 메시지 전송
update: 서버에서 받은 메시지 다른 클라이언트에게 전송(메시지 또는 정보)
connectUser: 새로운 유저 접속을 서버에게 알림
접속 종료부분은 update로 통일하여 클라이언트에게 전달할 예정입니다!
클라이언트와 서버에서 주고받는 메시지(알림)의 형식은 아래의 형식으로 정의하도록 하겠습니다
type에는 message(기본 메시지), connect(접속 알림), disconnect(채팅 종료 알림) 3가지를 사용할 예정입니다!
서버코드를 작성해봅시다!
소켓 접속부분에 위 코드와 동일하게 작성해주세요!
(또는 아래 서버 소스코드 다운로드)
app.js서버에서 newUser, message, disconnect 이벤트를 수신합니다.
(disconnect 이벤트는 기본 이벤트입니다)
클라이언트가 접속을 성공하면 클라이언트에서 newUser 이벤트를 발생시킬겁니다.
이벤트 발생과 함께 닉네임도 같이 서버로 전송하도록 해서 서버의 socket 안에 이름을 따로 저장해둡니다.
socket.name = name
이 부분이 클라이언트로부터 받은 닉네임을 소켓에 저장시키는 코드입니다.
닉네임 정보를 받았으니 접속되어있는 다른 유저에게도 접속사실을 알려야합니다.
io.sockets.emit('update' 데이터)
를 통해 다른 유저들에게도 알립니다.
type은 connect로 지정하고 메시지를 보내줍니다.
message 이벤트는 클라이언트에서 메시지를 입력하고 발생시키는 이벤트입니다.
유저가 보내는 메시지는 모두 type이 message인 데이터로 위에서 정의했습니다.
타입과 메시지부분만 있으면 안되고 누가 보냈는지 알리기 위해 data.name = socket.name 으로
소켓에 저장해두었던 이름을 데이터에 추가해줍니다!
A, B, C 세 사람이 채팅을 하고 있다고 가정하고
A라는 사람이 메시지를 전송했으면 A 본인은 메시지를 받지 않고 B, C만 메시지를 수신하면 됩니다.
socket.broadcase.emit('이벤트명', 전달할데이터)
를 사용하면 본인을 제외한 나머지 유저에게 데이터를 전송할 수 있습니다!
io.sockets.emit() = 모든 유저(본인 포함)
socket.broadcast.emit() = 본인을 제외한 나머지 모두
상황에 맞는 방법을 사용하시면 됩니다!
이제 서버측 작업은 마무리되었습니다.
마지막으로 클라이언트 소스코드를 수정해봅시다!
클라이언트 소스코드는 지난 시간에 사용했던 HTML, CSS는 그대로 두고 JS 파일만 아래와 같이 수정합니다.
서버와 접속이 되어 connect 이벤트가 발생되면
닉네임을 입력받습니다.
만약 닉네임이 빈칸이면 이름을 '익명' 으로 지정하고 서버에게 닉네임과 함께 newUser 이벤트를 발생시킵니다.
클라이언트에는 메시지를 수신해야하기 때문에 socket.on('update' ...) 가 있습니다.
일단 임시로 데이터만 확인하기 위해 콘솔에 출력하도록 구현했습니다.
마지막으로 클라이언트는 메시지를 전송도 하기 때문에 전송 기능도 구현했습니다.
message 이벤트를 발생시키면서 동시에 입력된 메시지도 서버에게 전달합니다.
유저가 보내는 메시지는 기본 메시지이므로 타입은 message 입니다.
이제 저장시키고 테스트를 진행해봅시다.
웹 브라우저 창을 2개 띄우고 닉네임을 서로 다르게 입력해줍니다.
저는 A유저, B유저라고 정했습니다.
구글 크롬 기준 F12를 누르면 개발자 도구가 열립니다.
Console 탭을 눌러서 콘솔을 확인해봅시다!
서로 메시지를 입력하고 전송하면 정상적으로 주고받는 모습을 보실 수 있습니다.
본인이 보낸 메시지는 로그에 안남고 상대방이 보낸 메시지만 로그에 남습니다!
또한 누가 접속했는지 서버에서 알림으로 알려줍니다.
클라이언트말고 서버의 콘솔창도 확인해보세요
2명의 유저가 주고받는 메시지 기록이 모두 보입니다.
정상적으로 작동하네요 ㅎㅎ
마지막으로 유저 한명이 나갔다고 가정하고 브라우저 창 하나를 꺼줍니다.
그러면 유저가 나갔다고 남아있는 유저들에게 알림을 전송합니다.
기본적인 채팅 기능은 모두 구현이 되었습니다!
콘솔로 메시지를 확인하기 너무 불편하기 때문에 HTML, CSS, JS를 수정해서 뷰로 확인할 수 있도록 구현하시면 됩니다!
아래에 예제 파일도 올리도록 하겠습니다.
예제를 사용하시려면 기존의 index.html, index.js, index.css 세 파일을 지우고 아래 파일로 교체해주세요!
index.html서버코드는 동일하게 사용하시면 됩니다!
여러분들이 더 심플하게 꾸미시거나 새로운 방법으로 채팅창을 꾸미시면 됩니다!
채팅 기능에 관련된 모든 강좌가 끝났습니다!
2명이 아닌 여러명이 접속해도 모두 다함께 채팅이 가능합니다!
또한 그룹 채팅도 가능합니다!
그룹 채팅에 대해서는 나중에 한번 올려보도록 하겠습니다!
오늘까지 진행한 내용 모두 제 Github에 업로드 되어있습니다!
오늘 진행한 내용은 아래 링크에 업로드 되어있습니다.
https://github.com/leegeunhyeok/node-chat/tree/chapter_5
감사합니다.
채팅방의 최대 인원이 5명이면 5명 이후로는 disconnect될 수 있게요..!
이렇게 구현한 채팅서버에 관계형데이터베이스를 붙여서 채팅내용이랑 채팅자를 저장하고 싶은데 어떻게 해야되나요?
로그인 성공 시 데이터베이스나 기타 데이터에서 사용자 정보를 불러와 채팅 닉네임으로 사용할 수 있도록 구현하시면 됩니다
님의 강좌는 제가 본 강좌중에 별 다섯 개 최고 입니다.
아마도 교육이나 강의를 해 보신 분이 아닐까 싶습니다.
어려운 작업을 쉽게 단계별로 학습할 수 있도록 도와주는 체계적 개요와 구성,핵심과 응용의 대비 구별, 자세한 예제와 다양한 활용, 친절한 QNA 답변까지 완벽하네요.
큰 도움이 되었고 감사드립니다.
반갑습니다라고 팝업창 같은거 뜨면서
유저명 입력하는거요 ...
그건 localhost 접속하자마자 원래 뜨도록 되어야하는거죠??? 인터넷 익스프롤러로했을때 안되고 , 크롬 ,엣지는 뜨네요 ..익스프롤러 어떤부분을 수정해야 뜨게할수있나요?
개발자도구 콘솔에서 오류 내용을 확인해보시고 알려주시면 확인해보도록 하겠습니다.
이것은 어딜 참조하는것인가요?
하나 질문이 있는데
잘 만들어서 사용하고있는데 서버를 열어서 친구가 들어오면 잘되지만 간혈적으로 엄청 연결이 끊기더라구요
이부분은 충분히 수정보완하면 사용가능하지만 원래 이렇게 자주끊기는지 너무 궁금합니다
저는 nodejs는 아직 공부하지 않은 상태로 해당 소스 다운받아 어찌저찌 설치해서 실행해보니 제대로 돌아가긴 합니다.
nodejs를 먼저 공부해서 필요한 기능을 추가수정하는게 맞겠지만, 급한 마음에 무식한 질문좀 드리겠습니다.
1. 채팅기능을 홈페이지에 넣으려 하는데, 기존 홈페이지는 아파치 80번포트로 돌아가고 있는 상태면, 채팅화면자체를 페이지내 일부영역으로 보여줄수는 없죠? 즉, iframe 이나 새창으로 하지 않고 기존 페이지에 붙여서 사용할수 있는 방법이 있는지 궁금합니다.
2. 홈페이지회원의 아이디,이름을 자동으로 채팅방 이름으로 전달하고 싶은데, app.get 에서 request.qurey 로 인자값을 확인할수 있는건 알겠는데, /static/js/index.js 에서 사용하는 name 변수까지 어떻게 해당 정보를 전달해야하는지를 모르겠습니다.
fs.readFile 대신에 res.render 를 이용해서 뭔가 문자열을 대치해서 출력하는 방법이 있는것 같은데, 만약 res.render 로 정보를 전달하는방식이 맞다면 /static/index.html 파일에 /js/index.js 스크립트도 모두 포함해서 하나의 파일로 만들어 문자열을 대치하는 방식으로 해야하는건가요?