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



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

채팅에 기능을 더 추가한다.

글을 작성하면서 개발한게 아니라 진행 과정은 추후에 정리해야겠다.



아래는 결과 소스



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

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

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



var userList = [];


io.on('connection', function(socket){
  var joinedUser = false;
  var nickname;

  // 유저 입장
  socket.on('join', function(data){
    if (joinedUser) { // 이미 입장 했다면 중단
      return false; 
    }

    nickname = data;
    userList.push(nickname);
    socket.broadcast.emit('join', { 
      nickname : nickname
      ,userList : userList
    });

    socket.emit('welcome', { 
      nickname : nickname
      ,userList : userList
    });

    joinedUser = true;
  });


  // 메시지 전달
  socket.on('msg', function(data){
    console.log('msg: ' + data);
    io.emit('msg', { 
      nickname : nickname
      ,msg : data
    });
  });


  // 접속 종료
  socket.on('disconnect', function () {
    // 입장하지 않았다면 중단
    if ( !joinedUser) { 
      console.log('--- not joinedUser left'); 
      return false;
    }

    // 접속자목록에서 제거
    var i = userList.indexOf(nickname);
    userList.splice(i,1);

    socket.broadcast.emit('left', { 
      nickname : nickname 
      ,userList : userList
    });    
  });
});




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; }

    #messages span.nickname { font-weight: bold; font-size: 120%; display: inline-block; width: 100px; }


    div.userList { text-align: center; width: 200px; min-height: 200px; border: 1px solid #999;}
    #userList { list-style-type: none; margin: 0; padding: 0; }
    #userList li { }

    #before { text-align: center; margin-top: 50%; }
    #after { display: none; }
    .noti { text-align: center; color: blue; }
  </style>
</head>
<body>

<section id="before">
  <p>닉네임을 입력하세요</p>
  <input id="nickname"><button id="joinBtn">들어가기</button>
</section>


<section id="after">
  <div class="userList">
    <h2>현재 접속자</h2>
    <ul id="userList"></ul>
  </div>

  <hr>
  <ul id="messages"></ul>
  <form>
    <input id="m" autocomplete="off" /><button>Send</button>
  </form>
</section>

<script src="/socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>

var nickname;
var socket = io();

// 이벤트: join 클릭 
$('#joinBtn').click(function(e){  
  fnNickname(e);
});

// 이벤트: nickname 엔터키 
$('#nickname').keypress(function(e) { 
  if (e.which == 13) {
    fnNickname(e);
  }
});

// 송신: 닉네임
function fnNickname(e) {
  if ($('#nickname').val().trim() == '') {
    alert('Input your nickname!');
    return false;
  }
  nickname = $('#nickname').val().trim();
  socket.emit('join', nickname);  // 접속 이벤트
}



// 수신: 환영인사
socket.on('welcome', function(data){
  // 유저리스트 업데이트
  fnUpdateUserList(data.userList);

  $('#before').hide();
  $('#after').show();
  $('#messages').append($('<li class="noti">').text(nickname + '님 환영합니다.'));  
});


// 유저리스트 업데이트
function fnUpdateUserList(userList) {
  $('#userList').text('');
  for (i = 0; i < userList.length; i++) {
    $('#userList').append($('<li>').text(userList[i]));
  };
}

// 수신: 신규자 접속
socket.on('join', function(data){
  // 입장 알림
  $('#messages').append($('<li class="noti">').text(data.nickname + '님이 입장하셨습니다'));
  
  // 유저리스트 업데이트
  fnUpdateUserList(data.userList);
});

// 수신: 퇴장
socket.on('left', function(data){
  // 종료 알림
  $('#messages').append($('<li class="noti">').text(data.nickname + '님이 퇴장하셨습니다'));
  
  // 유저리스트 업데이트
  fnUpdateUserList(data.userList);
});


// 송신: 메시지
$('form').submit(function(){
  socket.emit('msg', $('#m').val());
  $('#m').val('');
  return false;
});
  

// 수신: 메시지
socket.on('msg', function(data){
  var span = $('<span class="nickname">').text(data.nickname);
  var li = $('<li>').append(span).append(data.msg);
  $('#messages').append(li);
});

</script>

</body>
</html>








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

블로거에 썼던 글을 데려옴

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

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



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

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

+ Recent posts

티스토리툴바