근둥이의 블로그

안녕하세요

이번 시간에는 지난 강좌에 이어 본격적으로 채팅 기능을 구현해보도록 하겠습니다!

이전 강좌의 응용이므로 크게 어렵지않습니다!

[목차]

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

index.js

index.css

서버코드는 동일하게 사용하시면 됩니다!

여러분들이 더 심플하게 꾸미시거나 새로운 방법으로 채팅창을 꾸미시면 됩니다!

채팅 기능에 관련된 모든 강좌가 끝났습니다!

2명이 아닌 여러명이 접속해도 모두 다함께 채팅이 가능합니다!

또한 그룹 채팅도 가능합니다!

그룹 채팅에 대해서는 나중에 한번 올려보도록 하겠습니다!

오늘까지 진행한 내용 모두 제 Github에 업로드 되어있습니다!

오늘 진행한 내용은 아래 링크에 업로드 되어있습니다.

https://github.com/leegeunhyeok/node-chat/tree/chapter_5

감사합니다.