[Express.js] Node.js, socket.io 채팅 예제

2016. 1. 5. 13:11

- Node socket 채팅 예제
- Node socket chat example

[Express.js] Node.js, socket.io 채팅 예제

socket.io 채팅 구현

(http://socket.io/get-started/chat/ 을 요약 번역)

Node.js 서버 구현

*Node.js가 설치 되어있지 않다면 먼저 설치가 필요하다. (http://nodejs.org/)

1. 작업할 빈 폴더 생성, 아래 내용의 package.json 파일 생성

{
  "name": "socket-chat-example",
  "version": "0.0.1",
  "description": "my first socket.io app",
  "dependencies": {}
}

2. express 설치

- '--save' 옵션을 사용하면 설치시 package.json 파일 dependencies에도 추가해준다

$ npm install --save express

3. 아래 내용으로 index.js 파일을 생성해서 서버 구동을 확인한다.

var app = require('express')();
var http = require('http').Server(app);

app.get('/', function(req, res){
  res.send('<h1>Hello world</h1>');
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

- 서버 구동

$ node index.js

- 접속 확인

http://localhost:3000/

Serving HTML

1. index.js 파일 수정

..
app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});
..

2. index.html 파일 생성

<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
    </style>
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
  </body>
</html>

3. 서버 재시동 후 확인

- Control+C로 서버 종료 후 node index.js로 재구동 후 접속 확인

nodemon 설치

- 소스 수정시마다 재구동이 번거롭다면 nodemon을 설치하면 매우 편리하게 쓸 수 있다.

(http://nodemon.io/)

- '-g' 옵션으로 글로벌 설치

$ npm install -g nodemon

- 이후 서버 구동은 nodemon으로 한다. 파일 수정시 자동으로 서버를 재시작해준다.

$ nodemon

Integrating Socket.IO

1. socket.io 설치

$ npm install --save socket.io

*Windows 환경의 경우 python이 설치 되어있지 않으면 node-gyp 관련된 socket.io의 dependency중 bufferutil, utf-8-validate 빌드 오류가 발생될 수 있다.

*이번 예제 진행에는 영향을 미치지 않으니 일단 무시하고 진행한다.

2. 서버 소스 수정

- index.js 파일 수정

- io에 'connection' 이벤트가 발생하면 콜백 함수를 실행하는 형태이다.

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
  res.sendfile('index.html');
});

io.on('connection', function(socket){
  console.log('a user connected');
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

3. 클라이언트 소스 수정

- index.html 파일 수정. body 맨 아래에 추가한다.

- socket.io.js를 로드해서 io() 라는 함수를 실행해서 연결한다.

...
  <script src="/socket.io/socket.io.js"></script>
  <script>
    var socket = io();
  </script>

  </body>
...

- nodemon을 사용했다면 자동으로 서버가 재시작 되었을테니 브라우저만 새로고침하면 확인 가능하다.
- 클라이언트는 직접적인 변화가 없으며, 접속시 서버 콘솔에 'a user connected'가 출력된다.

4. disconnect 이벤트 구현
- connection 콜백에서 disconnect 이벤트 리스너를 추가했다.
- 접속시, 해제시 서버측에 콘솔이 출력된다.

...
io.on('connection', function(socket){
  console.log('a user connected');
  socket.on('disconnect', function(){
    console.log('user disconnected');
  });
});
...

Emitting events

*Socket.IO를 이용해서 원하는 데이터를 원하는 이름의 이벤트로 전송이 가능하다.

1. index.html 수정

- 폼데이터 전송을 편하게 하기 위해 jquery를 추가했다.

- send 버튼을 누르면 input에 사용자가 입력한 값을 'chat message'라는 이름의 이벤트로 전송하는 내용이다.

...
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
  var socket = io();
  $('form').submit(function(){
    socket.emit('chat message', $('#m').val());
    $('#m').val('');
    return false;
  });
</script>
...

2. index.js 수정
- 'chat message'라는 이벤트가 발생하면 메시지를 콘솔로 출력하는 내용이다.

...
io.on('connection', function(socket){
  socket.on('chat message', function(msg){
    console.log('message: ' + msg);
  });
});
...

3. 메시지 전송 확인
- 클라이언트 소스 수정이 있었으니 브라우저 새로고침 후 메시지 전송시 서버 콘솔에 출력되는지 확인한다.

Broadcasting

이제 다른 모든 유저에게 메시지를 전달해보자.

1. index.js 수정
- 'client message' 이벤트가 발생하면 메시지를 서버 콘솔에 출력하고,
emit 함수를 이용해 'server message' 라는 이벤트를 모든 클라이언트에게 전달하는 내용이다.
- chat message 라는 이름을 공통으로 사용해도 되지만, 구분하기 쉽게 client message / server message 라는 이름으로 구분해서 사용한다.

...
io.on('connection', function(socket){
  socket.on('client message', function(msg){
   console.log('message: ' + msg);
    io.emit('server message', msg);
  });
});
...

2. index.html 수정

- 'chat message' 이벤트 이름을 'client message' 로 변경했다.

- 'server message' 라는 이벤트가 발생하면 브라우저에 수신된 메시지를 출력하는 내용을 추가했다.

...
<script>
  var socket = io();
  $('form').submit(function(){
    socket.emit('client message', $('#m').val());
    $('#m').val('');
    return false;
  });
  
  socket.on('server message', function(msg){
    $('#messages').append($('<li>').text(msg));
  });
</script>
...

3. 메시지 전송확인
- 브라우저 탭이나 창을 여러개 띄워서 메시지 전송을 확인한다.
- 메시지 전송시 서버와 접속중인 모든 클라이언트에 해당 메시지가 출력되는것을 확인할 수 있다.

------------------------

블로거에 썼던 글을 데려옴

http://hangaebal.blogspot.kr/2015/12/expressjs-nodejs-socketio-chat.html

------------------------

'개발' 카테고리의 다른 글

[Homebrew] Mac OS brew install, brew 설치 (0)	2016.01.06
[Express.js] Node.js, socket.io 채팅 예제 (2) (0)	2016.01.05
[Express.js] 게시판 만들기 예제 (0)	2016.01.05
[Express.js] Express application generator (0)	2016.01.05
[Express.js] Node.js, Express.js 설치 (0)	2016.01.05

개발