Tag Archives: nodejs

[번역] node.js를 활용한 실시간 채팅 프로그램

이 글은 총 2개의 시리즈로 구성된다.

각 글은 michael mukhin님의 블로그 글을 바탕으로 번역에 옮겼다.

node.js와 socket.io를 활용한 단일 방 채팅 튜토리얼

역주) 최신 버전의 모듈을 사용하도록 소스 코드 일부를 약간 수정했습니다.
나는 얼마전 node.js 문서가 이제 충분히 사용가능하다는 사실을 알게 되었다. 그리고 node.js 전문가가 되어, node.js 커뮤니티에서 입문자를 도울 수 있기를 간절히 바래왔다. 이러한 열망이 있었기에, 더 빨리 node.js를 익힐 수 있었고, 또 필요한 기술을 공유할 수 있는 정도가 되었다.
나는 node.js, socket.io, express 모듈을 사용해서 한 개의 채팅방만이 있는 매우 간단한 채팅 클라이언트를 개발했다.
수정사항> 이제 node.js를 설치하기 위해 아래의 절차를 따를 필요는 없다. 지금은 단순히 .msi 파일 또는 .pkg 파일을 다운로드하여 간단히 설치할 수 있으며, NPM까지 모두 포함되어 있다.

http://nodejs.org/#download

역주> 소스코드로부터 직접 설치하시려는 분은  “node.js 맥에 설치하기“을 참조해도 된다.

먼저 node.js와 npm, 그리고 의존성이 있는 모듈을 설치해야 한다.

역주> npm 설치하는 마지막 명령문은 루트 권한이 필요할 수도 있다. sudo를 이용하라

끝! node, npm이 모두 설치되었으니, 이제 얼마드지 코딩을 시작할 수 있다. 좀더 쉽게 개발하려면, npm을 이용해서 express와 socket.io 모듈을 설치하자. 이 예제 프로젝트를 위한 디렉토리를 하나 생성한 후, package.json이라는 이름의 파일을 금방 만든 디렉토리에 만들자.

아래는 single-chat/package.json 파일 내용이다.

이제 필요한 모듈을 설치하자.

이제 서버 파일을 만들자. 이름은 app.js라고 짓자.

 

클라이언트 파일은 index.html 이라는 이름으로 아래와 같이 만든다.

서버를 실행하자

브라우저에서 http://localhost:8080으로 접속한다.

node.js와 socket.io를 활용한 멀티 방 채팅 튜토리얼

이제 앞서 만든 채팅 프로그램을 다수의 방을 생성할 수 있도록 수정하고자 한다.
이전 예제에서는 socket.io를 이용하여 메시지/브로드캐스트 정보를 어떻게 전송하는지에 대한 설명을 빠뜨렸다. 아래 코드는 해당 모듈을 정의했다고 가정한다.

서버는 socket 콜백을 사용하여 클라이언트 소켓으로만 전송할 수 있다.

서버는 해당 클라이언트 소켓만 제외한 모두에게 전송한다(즉 메시지를 브로드캐스팅한다).

서버는 전역으로 전송한다.

io는 socket.io 모듈을 통해 초기에 정의했고, 모든 소켓으로 전송할 수 있다.
역주) socket.broadcast.emit()과 io.sockets.emit()은 언뜻 보기에는 같아 보일 수 있지만 약간의 차이가 있다. 예를 들어 앞선 단일 룸 예제의 경우, 서버 프로그램인 app.js 파일의 adduser 리스너를 보자.

사용자가 채팅 방에 입장할 때 adduser 리스너 함수가 실행된다. 이때 기존에 입장했던 클라이언트의 경우 ‘[신규 사용자] has connected’라고 메시지 창에 알려주어야 한다. 반면 이번에 새로 입장하는 클라이언트에게는 이 메시지를 전달할 필요가 없다. 그래서 이 경우에는 socket.broadcast.emit()을 사용했다. 반면, 사용자 목록을 업데이트 처리는 모든 클라이언트가 실행해야 하므로, io.sockets.emit()을 사용했다.

최신 버전의 socket.io에서는 여러개의 룸(room)/그룹(group)을 허용한다. 예를 들어 클라이언트는 룸에 입장하거나 떠날 수 있다.

특정 룸에 접속한 클라이언트에게만(물론 지금 접속한 클라이언트를 제외한) 정보를 브로드캐스팅하려면,

특정 룸에 접속한 모든 클라이언트에게 정보를 전역으로 전송하려면

와 같이 사용한다.

이번 예제에서는 사용자가 접속하여 username을 입력하면 기본적으로 room1에 입장하도록하며, 클라이언트가 접속한 룸(room1)에만 브로드캐스팅하도록 새로운 app.js를 만들려고 한다. 또한 입장 가능한 룸 목록(room1, room2, room3)을 추가하고, 사용자의 현재 룸을 보여줄 수 있도록 룸 목록을 갱신하는 함수를 추가하려고 한다.
사용자가 룸을 변경학자 한다면, 클라이언트측에서는 switchRoom 함수를 호출한다. 서버에서는 이 함수가 호출되면, 사용자의 현재 소켓에 대해 현재 룸을 떠나고, 새로운 룸에 입장하도록 알린다. 그리고 사용자의 현재 위치를 브로드캐스팅하고, 룸 목록을 업데이트 한다.
아래는 변경된 app.js다.

 

 

아래는 변경된 index.html 파일이다.

 

 

node.js 맥에 설치하기

node.js 다운로드 사이트에서 최신버전의 소스코드를 다운로드 한다.

압축을 푼 후,

빌드를 한다.

 

제대로 설치가 되었는지 확인하자.

 

이제 npm(node package manager)를 설치하자. 반드시 sudo로 설치를 해야 한다.

References

NPM no longer working