이번시간엔 채팅프로그램에 대해서 포스팅해보려고한다. 사실 채팅프로그램 만드는게 쉽지 않았다. 컴퓨터 환경맞춰야하지, 구글링 해봐야하지. 구글링에서 찾아도 또 리눅스 환경 설치해야하고 정말 어려움이 많았다. 하지만 이걸 만들어봄으로써 node.js에 대해서도 많이 배울 수 있었다. 본 포스팅은 맥북 기준 포스팅이다.
1. node.js의 설치
일단 node.js를 설치해줘야 한다. 맥북같은 경우는 브루로 금방 깔 수 있을 것이다.
2. express 프레임워크의 설치
npm install --save express를 리눅스에 입력해서 설치한다.
3. 서버 구동 확인
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');
});
이걸 그대로 Sublime Text에 입력해서 서버가 잘 동작하는지 테스트해본다. 만약에 ^327 에러가 나온다면 express 프레임워크에 var에 관련된 항목들이 설치가 안된것이다. 그땐 npm install http, npm install socket.io를 쳐서 설치해주고 실행해본다. 그러면 아마 서버가 잘 동작할 것이다. 만약 다 됐으면 localhost:3000을 인터넷 주소에다 쳐서 확인해본다.
이렇게 나오면 정상이다.
4. index.js 파일 만들기
Sublime Text에다 다음과 같은 코드를 입력하고 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(5000, function(){
console.log('listening on *:5000');
});
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
});
});
});
5. 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>
6. 서버를 구동시키고 닉네임 달아서 로그인하면 다음과 같이 나올 것이다.
출저: 개발::[Express.js] Node.js
간단해 보이지만 환경구축하고 설치하고 고생많이했다... 다음번에는 귓속말까지 가능한 채팅프로그램을 만들어볼 생각이다.
'javascript' 카테고리의 다른 글
| casper.js를 이용한 날씨프로그램 (0) | 2016.08.30 |
|---|
만년필석사