Doit! - 채팅서버 만들기
노드에서 채팅 기능을 만들려면 **웹 소켓(Web Socket)**을 사용해야한다. 웹 소켓은 웹 서버로 소켓을 연결한 후 데이터를 주고받을 수 있도록 만든 HTML5표준이다. 이러한 웹 소켓은 HTTP 프로토콜로 소켓 연결을 하기 때문에 웹 브라우저가 이 기능을 지원하지 않으면 사용할 수 없다. socket.io모듈을 사용하면 웹 소켓을 지원하지 않는 웹 브라우저에서도 웹 소켓을 사용할 수 있다.
10-1 socket.io 사용하기
$ npm install socket.io --savesocket.io를 사용하려면 cors모듈도 설치되어 있어야한다. CORS(Corss-Origin Resource Sharing)를 사용하면 Ajax를 사용해 데이터를 가져올 때 현재 보고 있는 브라우저의 웹 문서를 제공한 웹 서버 이외에 다른 웹 서버에서는 접속할 수 없는 제약이 풀린다.
$ npm install cors --save프로젝트 구성
파일 or 폴더
설명
app.js
기본 코드가 들어 있는 메인 파일
/config/config.js
설정 정보가 들어 있는 파일 스키마 모듈이나 라우팅 모듈을 만들어 추가했다면 이 파일에 설정 정보를 추가
/database
데이터베이스의 스키마 모듈 파일들을 만들어 넣는 폴더
/routes
라우팅 함수들을 모듈 파일로 만들어 넣는 폴더
/views
뷰 템플릿 파일들을 만들어 넣는 폴더
//app.js
...
// socket.io 모듈 불러들이기
var socketio = require('socket.io');
// cors 사용 - 클라이언트에서 ajax로 요청하면 CORS 지원
var cors = require('cors');
...
//cors를 미들웨어로 사용하도록 등록
app.use(cors());
...
// socket.io 서버를 시작
var io = socketio.listen(server);
console.log("socket.io 요청을 받아들일 준비가 되었습니다.");http모듈로 실행한 익스프레스 서버는 server변수에 저장되어 있으므로 그 아랫부분에서 socket.io모듈 객체의 listen()메소드를 호출한다.
socket.io모듈로 웹 소켓 요청 처리 메소드
메소드 이름
설명
attach(httpServer,options)
웹 서버 인스턴스가 socket.io를 처리한다.
listen(httpServer,options)
웹 서버 인스턴스가 socket.io를 처리한다.
socket.io 서버를 웹 서버 위에서 동작하도록 설정하면 웹 소켓과 관련된 요청은 모두 socket.io에서 처리한다. socket.io객체는 io변수에 할당되었는데 이 객체에 들어 있는 sockets객체는 클라이언트가 접속하거나 데이터를 전송했을 때 이벤트를 발생시킨다.
...
//클라이언트가 연결했을 때의 이벤트 처리
io.sockets.on('connection',function(socket){
console.log('connection info : ',socket.request.connection._peername);
// 소켓 객체에 클라이언트 Host, Port 정보 속성으로 추가
socket.remoteAddress = socket.request.connection._peername.address;
socket.remotePort = socket.request.connection._peername.port;
});on() 메소드로 connection 이벤트를 처리하는 콜백함수를 등록하면 콜백 함수 쪽으로 소켓 객체가 전달된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>채팅 클라이언트 01</title>
<script src="jquery-3.1.1.min.js"></script>
<script src="socket.io.js"></script>
<script>
var host;
var port;
var socket;
// 문서 로딩 후 실행됨
$(function() {
$("#connectButton").bind('click', function(event) {
println('connectButton이 클릭되었습니다.');
host = $('#hostInput').val();
port = $('#portInput').val();
connectToServer();
});
});
// 서버에 연결하는 함수 정의
function connectToServer() {
var options = {'forceNew':true};
var url = 'http://' + host + ':' + port;
socket = io.connect(url, options);
socket.on('connect', function() {
println('웹소켓 서버에 연결되었습니다. : ' + url);
});
socket.on('disconnect', function() {
println('웹소켓 연결이 종료되었습니다.');
});
}
function println(data) {
console.log(data);
$('#result').append('<p>' + data + '</p>');
}
</script>
</head>
<body>
<h3>채팅 클라이언트 01</h3>
<br>
<div>
<input type="text" id="hostInput" value="localhost" />
<input type="text" id="portInput" value="3000" />
<input type="button" id="connectButton" value="연결하기" />
</div>
<hr/>
<p>결과 : </p>
<div id="result"></div>
</body>
</html>socket.io는 메시지를 주고받을 때 이벤트 처리 방식을 사용한다.
송수신 이벤트 처리 메소드
메소드
설명
on(event,callback)
이벤트 수신 형태로 메시지를 수신했을 때 처리할 콜백 함수를 등록한다. 콜백 함수의 파라미터로 수신한 객체가 전달된다.
emit(event,object)
이벤트 송신 형태로 메시지를 송신한다.
이벤트의 이름은 마음대로 정할 수 있다. 즉, 사용자 정의 이벤트와 같다. Echo기능은 서버에 보낸 데이터를 그대로 다시 돌려받는 기능이다.
socket.on('connect', function() {
println('웹소켓 서버에 연결되었습니다. : ' + url);
socket.on('message',function(message){
console.log(JSON.stringify(message));
println('<p>수신 메시지 : '+message.sender+','+message.recepient+','+ message.command+','+message.type+','+message.data+'</p>');
});
});sender : 보내는 사람의 아이디
recepient : 받는 사람의 아이디
command : 데이터의 종류
type : 전송될 데이터의 형태
data : 데이터
메세지 전송방법
메소드
설명
io.sockets.emit(event,object)
나를 포함한 모든 클라이언트에 전송
socket.broadcast.emit(event,object)
나를 제외한 모든 클라이언트에 전송
10-2 일대일 채팅하기
일대일 채팅은 상대방을 지정하여 메시지를 보내야 하므로 서버에 연결된 각 클라이언트마다 고유한 정보가 있어야한다. 클라이언트가 로그인할 때 사용하는 로그인 아이디를 사용해 클라이언트를 구별할 수 있도록 하는 것이 좋다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>채팅 클라이언트 03</title>
<script src="jquery-3.1.1.min.js"></script>
<script src="socket.io.js"></script>
<script>
var host;
var port;
var socket;
// 문서 로딩 후 실행됨
$(function() {
// 연결하기 버튼 클릭 처리
$("#connectButton").bind('click', function(event) {
println('connectButton이 클릭되었습니다.');
host = $('#hostInput').val();
port = $('#portInput').val();
connectToServer();
});
// 전송 버튼 클릭 시 처리
$("#sendButton").bind('click', function(event) {
var sender = $('#senderInput').val();
var recepient = $('#recepientInput').val();
var data = $('#dataInput').val();
var output = {sender:sender, recepient:recepient, command:'chat', type:'text', data:data};
console.log('서버로 보낼 데이터 : ' + JSON.stringify(output));
if (socket == undefined) {
alert('서버에 연결되어 있지 않습니다. 먼저 서버에 연결하세요.');
return;
}
socket.emit('message', output);
});
// 로그인 버튼 클릭 시 처리
$("#loginButton").bind('click', function(event) {
var id = $('#idInput').val();
var password = $('#passwordInput').val();
var alias = $('#aliasInput').val();
var today = $('#todayInput').val();
var output = {id:id, password:password, alias:alias, today:today};
console.log('서버로 보낼 데이터 : ' + JSON.stringify(output));
if (socket == undefined) {
alert('서버에 연결되어 있지 않습니다. 먼저 서버에 연결하세요.');
return;
}
socket.emit('login', output);
});
});
// 서버에 연결하는 함수 정의
function connectToServer() {
var options = {'forceNew':true};
var url = 'http://' + host + ':' + port;
socket = io.connect(url, options);
socket.on('connect', function() {
println('웹소켓 서버에 연결되었습니다. : ' + url);
socket.on('message', function(message) {
console.log(JSON.stringify(message));
println('<p>수신 메시지 : ' + message.sender + ', ' + message.recepient + ', ' + message.command + ', ' + message.data + '</p>');
});
socket.on('response', function(response) {
console.log(JSON.stringify(response));
println('응답 메시지를 받았습니다. : ' + response.command + ', ' + response.code + ', ' + response.message);
});
});
socket.on('disconnect', function() {
println('웹소켓 연결이 종료되었습니다.');
});
}
function println(data) {
console.log(data);
$('#result').append('<p>' + data + '</p>');
}
</script>
</head>
<body>
<h3>채팅 클라이언트 03 : 일대일 채팅하기</h3>
<br>
<div>
<input type="text" id="hostInput" value="localhost" />
<input type="text" id="portInput" value="3000" />
<input type="button" id="connectButton" value="연결하기" />
</div>
<br>
<div>
<input type="text" id="idInput" value="test01" />
<input type="password" id="passwordInput" value="123456" />
<input type="text" id="aliasInput" value="소녀시대" />
<input type="text" id="todayInput" value="좋은 날!" />
<input type="button" id="loginButton" value="로그인" />
<input type="button" id="logoutButton" value="로그아웃" />
</div>
<br>
<div>
<div><span>보내는사람 아이디 :</span> <input type="text" id="senderInput" value="test01" /></div>
<div><span>받는사람 아이디 :</span> <input type="text" id="recepientInput" value="ALL" /></div>
<div><span>메시지 데이터 :</span> <input type="text" id="dataInput" value="안녕!"/> </div>
<br>
<input type="button" id="sendButton" value="전송" />
</div>
<hr/>
<p>결과 : </p>
<div id="result"></div>
</body>
</html>// Express 기본 모듈 불러오기
var express = require('express')
, http = require('http')
, path = require('path');
// Express의 미들웨어 불러오기
var bodyParser = require('body-parser')
, cookieParser = require('cookie-parser')
, static = require('serve-static')
, errorHandler = require('errorhandler');
// 에러 핸들러 모듈 사용
var expressErrorHandler = require('express-error-handler');
// Session 미들웨어 불러오기
var expressSession = require('express-session');
//===== Passport 사용 =====//
var passport = require('passport');
var flash = require('connect-flash');
// 모듈로 분리한 설정 파일 불러오기
var config = require('./config/config');
// 모듈로 분리한 데이터베이스 파일 불러오기
var database = require('./database/database');
// 모듈로 분리한 라우팅 파일 불러오기
var route_loader = require('./routes/route_loader');
// Socket.IO 사용
var socketio = require('socket.io');
// cors 사용 - 클라이언트에서 ajax로 요청 시 CORS(다중 서버 접속) 지원
var cors = require('cors');
// 익스프레스 객체 생성
var app = express();
//===== 뷰 엔진 설정 =====//
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
console.log('뷰 엔진이 ejs로 설정되었습니다.');
//===== 서버 변수 설정 및 static으로 public 폴더 설정 =====//
console.log('config.server_port : %d', config.server_port);
app.set('port', process.env.PORT || 3000);
// body-parser를 이용해 application/x-www-form-urlencoded 파싱
app.use(bodyParser.urlencoded({ extended: false }))
// body-parser를 이용해 application/json 파싱
app.use(bodyParser.json())
// public 폴더를 static으로 오픈
app.use('/public', static(path.join(__dirname, 'public')));
// cookie-parser 설정
app.use(cookieParser());
// 세션 설정
app.use(expressSession({
secret:'my key',
resave:true,
saveUninitialized:true
}));
//===== Passport 사용 설정 =====//
// Passport의 세션을 사용할 때는 그 전에 Express의 세션을 사용하는 코드가 있어야 함
app.use(passport.initialize());
app.use(passport.session());
app.use(flash());
//클라이언트에서 ajax로 요청 시 CORS(다중 서버 접속) 지원
app.use(cors());
//라우팅 정보를 읽어들여 라우팅 설정
var router = express.Router();
route_loader.init(app, router);
// 패스포트 설정
var configPassport = require('./config/passport');
configPassport(app, passport);
// 패스포트 라우팅 설정
var userPassport = require('./routes/user_passport');
userPassport(router, passport);
//===== 404 에러 페이지 처리 =====//
var errorHandler = expressErrorHandler({
static: {
'404': './public/404.html'
}
});
app.use( expressErrorHandler.httpError(404) );
app.use( errorHandler );
//===== 서버 시작 =====//
//확인되지 않은 예외 처리 - 서버 프로세스 종료하지 않고 유지함
process.on('uncaughtException', function (err) {
console.log('uncaughtException 발생함 : ' + err);
console.log('서버 프로세스 종료하지 않고 유지함.');
console.log(err.stack);
});
// 프로세스 종료 시에 데이터베이스 연결 해제
process.on('SIGTERM', function () {
console.log("프로세스가 종료됩니다.");
app.close();
});
app.on('close', function () {
console.log("Express 서버 객체가 종료됩니다.");
if (database.db) {
database.db.close();
}
});
// 시작된 서버 객체를 리턴받도록 합니다.
var server = http.createServer(app).listen(app.get('port'), function(){
console.log('서버가 시작되었습니다. 포트 : ' + app.get('port'));
// 데이터베이스 초기화
database.init(app, config);
});
//===== Socket.IO를 이용한 채팅 테스트 부분 =====//
// 로그인 아이디 매핑 (로그인 ID -> 소켓 ID)
var login_ids = {};
// socket.io 서버를 시작합니다.
var io = socketio.listen(server);
console.log('socket.io 요청을 받아들일 준비가 되었습니다.');
// 클라이언트가 연결했을 때의 이벤트 처리
io.sockets.on('connection', function(socket) {
console.log('connection info :', socket.request.connection._peername);
// 소켓 객체에 클라이언트 Host, Port 정보 속성으로 추가
socket.remoteAddress = socket.request.connection._peername.address;
socket.remotePort = socket.request.connection._peername.port;
// 'login' 이벤트를 받았을 때의 처리
socket.on('login', function(login) {
console.log('login 이벤트를 받았습니다.');
console.dir(login);
// 기존 클라이언트 ID가 없으면 클라이언트 ID를 맵에 추가
console.log('접속한 소켓의 ID : ' + socket.id);
login_ids[login.id] = socket.id;
socket.login_id = login.id;
console.log('접속한 클라이언트 ID 갯수 : %d', Object.keys(login_ids).length);
// 응답 메시지 전송
sendResponse(socket, 'login', '200', '로그인되었습니다.');
});
// 'message' 이벤트를 받았을 때의 처리
socket.on('message', function(message) {
console.log('message 이벤트를 받았습니다.');
console.dir(message);
if (message.recepient =='ALL') {
// 나를 포함한 모든 클라이언트에게 메시지 전달
console.dir('나를 포함한 모든 클라이언트에게 message 이벤트를 전송합니다.')
io.sockets.emit('message', message);
} else {
// 일대일 채팅 대상에게 메시지 전달
if (login_ids[message.recepient]) {
io.sockets.connected[login_ids[message.recepient]].emit('message', message);
// 응답 메시지 전송
sendResponse(socket, 'message', '200', '메시지를 전송했습니다.');
} else {
// 응답 메시지 전송
sendResponse(socket, 'login', '404', '상대방의 로그인 ID를 찾을 수 없습니다.');
}
}
});
});
// 응답 메시지 전송 메소드
function sendResponse(socket, command, code, message) {
var statusObj = {command: command, code: code, message: message};
socket.emit('response', statusObj);
}대상 소켓을 찾기위해서는 io.sockets.connected[login_ids[messagae.recepient]]를 사용해야한다.
배열의 요소는 delete키워드나 배열의 splice()메소드등을 이용해 여러가지 방법을 사용할 수 있다.
10-3 그룹 채팅하기
그룹 채팅은 방을 만들고 그 방에 초대된 사람끼리 동시에 메시지를 주고받는다.
방만들기
socket.io모듈은 몇 명의 사용자를 하나으 ㅣ방에 모아 두고 방에 들어온 특정 클라이언트에만 메시지를 전송할 수 있는 기능을 제공한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>채팅 클라이언트 04</title>
<script src="jquery-3.1.1.min.js"></script>
<script src="socket.io.js"></script>
<script>
var host;
var port;
var socket;
// 문서 로딩 후 실행됨
$(function() {
// 연결하기 버튼 클릭 처리
$("#connectButton").bind('click', function(event) {
println('connectButton이 클릭되었습니다.');
host = $('#hostInput').val();
port = $('#portInput').val();
connectToServer();
});
// 전송 버튼 클릭 시 처리
$("#sendButton").bind('click', function(event) {
var sender = $('#senderInput').val();
var recepient = $('#recepientInput').val();
var data = $('#dataInput').val();
var output = {sender:sender, recepient:recepient, command:'chat', type:'text', data:data};
console.log('서버로 보낼 데이터 : ' + JSON.stringify(output));
if (socket == undefined) {
alert('서버에 연결되어 있지 않습니다. 먼저 서버에 연결하세요.');
return;
}
socket.emit('message', output);
});
// 로그인 버튼 클릭 시 처리
$("#loginButton").bind('click', function(event) {
var id = $('#idInput').val();
var password = $('#passwordInput').val();
var alias = $('#aliasInput').val();
var today = $('#todayInput').val();
var output = {id:id, password:password, alias:alias, today:today};
console.log('서버로 보낼 데이터 : ' + JSON.stringify(output));
if (socket == undefined) {
alert('서버에 연결되어 있지 않습니다. 먼저 서버에 연결하세요.');
return;
}
socket.emit('login', output);
});
// 방만들기 버튼 클릭 시 처리
$("#createRoomButton").bind('click', function(event) {
var roomId = $('#roomIdInput').val();
var roomName = $('#roomNameInput').val();
var id = $('#idInput').val();
var output = {command:'create', roomId:roomId, roomName:roomName, roomOwner:id};
console.log('서버로 보낼 데이터 : ' + JSON.stringify(output));
if (socket == undefined) {
alert('서버에 연결되어 있지 않습니다. 먼저 서버에 연결하세요.');
return;
}
socket.emit('room', output);
});
// 방이름바꾸기 버튼 클릭 시 처리
$("#updateRoomButton").bind('click', function(event) {
var roomId = $('#roomIdInput').val();
var roomName = $('#roomNameInput').val();
var id = $('#idInput').val();
var output = {command:'update', roomId:roomId, roomName:roomName, roomOwner:id};
console.log('서버로 보낼 데이터 : ' + JSON.stringify(output));
if (socket == undefined) {
alert('서버에 연결되어 있지 않습니다. 먼저 서버에 연결하세요.');
return;
}
socket.emit('room', output);
});
// 방없애기 버튼 클릭 시 처리
$("#deleteRoomButton").bind('click', function(event) {
var roomId = $('#roomIdInput').val();
var output = {command:'delete', roomId:roomId};
console.log('서버로 보낼 데이터 : ' + JSON.stringify(output));
if (socket == undefined) {
alert('서버에 연결되어 있지 않습니다. 먼저 서버에 연결하세요.');
return;
}
socket.emit('room', output);
});
});
// 서버에 연결하는 함수 정의
function connectToServer() {
var options = {'forceNew':true};
var url = 'http://' + host + ':' + port;
socket = io.connect(url, options);
socket.on('connect', function() {
println('웹소켓 서버에 연결되었습니다. : ' + url);
socket.on('message', function(message) {
console.log(JSON.stringify(message));
println('<p>수신 메시지 : ' + message.sender + ', ' + message.recepient + ', ' + message.command + ', ' + message.data + '</p>');
});
socket.on('response', function(response) {
console.log(JSON.stringify(response));
println('응답 메시지를 받았습니다. : ' + response.command + ', ' + response.code + ', ' + response.message);
});
// 그룹 채팅에서 방과 관련된 이벤트 처리
socket.on('room', function(data) {
console.log(JSON.stringify(data));
println('<p>방 이벤트 : ' + data.command + '</p>');
println('<p>방 리스트를 받았습니다.</p>');
if (data.command == 'list') { // 방 리스트
var roomCount = data.rooms.length;
$("#roomList").html('<p>방 리스트 ' + roomCount + '개</p>');
for (var i = 0; i < roomCount; i++) {
$("#roomList").append('<p>방 #' + i + ' : ' + data.rooms[i].id + ', ' + data.rooms[i].name + ', ' + data.rooms[i].owner + '</p>');
}
}
});
});
socket.on('disconnect', function() {
println('웹소켓 연결이 종료되었습니다.');
});
}
function println(data) {
console.log(data);
$('#result').append('<p>' + data + '</p>');
}
</script>
</head>
<body>
<h3>채팅 클라이언트 04 : 그룹 채팅하기</h3>
<br>
<div>
<input type="text" id="hostInput" value="localhost" />
<input type="text" id="portInput" value="3000" />
<input type="button" id="connectButton" value="연결하기" />
</div>
<br>
<div>
<input type="text" id="idInput" value="test01" />
<input type="password" id="passwordInput" value="123456" />
<input type="text" id="aliasInput" value="소녀시대" />
<input type="text" id="todayInput" value="좋은 날!" />
<input type="button" id="loginButton" value="로그인" />
<input type="button" id="logoutButton" value="로그아웃" />
</div>
<br>
<div>
<input type="text" id="roomIdInput" value="meeting01" />
<input type="text" id="roomNameInput" value="청춘들의대화" />
<input type="button" id="createRoomButton" value="방만들기" />
<input type="button" id="updateRoomButton" value="방이름바꾸기" />
<input type="button" id="deleteRoomButton" value="방없애기" />
</div>
<br>
<div id="roomList">
</div>
<br>
<div>
<div><span>보내는사람 아이디 :</span> <input type="text" id="senderInput" value="test01" /></div>
<div><span>받는사람 아이디 :</span> <input type="text" id="recepientInput" value="ALL" /></div>
<!-- command 선택 <select> 채팅, 그룹채팅 -->
<div><span>메시지 데이터 :</span> <input type="text" id="dataInput" value="안녕!"/> </div>
<br>
<input type="button" id="sendButton" value="전송" />
</div>
<hr/>
<p>결과 : </p>
<div id="result"></div>
</body>
</html>클라이언트에서는 만든 방의 리스트만 전달받는다.
// Express 기본 모듈 불러오기
var express = require('express')
, http = require('http')
, path = require('path');
// Express의 미들웨어 불러오기
var bodyParser = require('body-parser')
, cookieParser = require('cookie-parser')
, static = require('serve-static')
, errorHandler = require('errorhandler');
// 에러 핸들러 모듈 사용
var expressErrorHandler = require('express-error-handler');
// Session 미들웨어 불러오기
var expressSession = require('express-session');
//===== Passport 사용 =====//
var passport = require('passport');
var flash = require('connect-flash');
// 모듈로 분리한 설정 파일 불러오기
var config = require('./config/config');
// 모듈로 분리한 데이터베이스 파일 불러오기
var database = require('./database/database');
// 모듈로 분리한 라우팅 파일 불러오기
var route_loader = require('./routes/route_loader');
// Socket.IO 사용
var socketio = require('socket.io');
// cors 사용 - 클라이언트에서 ajax로 요청 시 CORS(다중 서버 접속) 지원
var cors = require('cors');
// 익스프레스 객체 생성
var app = express();
//===== 뷰 엔진 설정 =====//
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
console.log('뷰 엔진이 ejs로 설정되었습니다.');
//===== 서버 변수 설정 및 static으로 public 폴더 설정 =====//
console.log('config.server_port : %d', config.server_port);
app.set('port', process.env.PORT || 3000);
// body-parser를 이용해 application/x-www-form-urlencoded 파싱
app.use(bodyParser.urlencoded({ extended: false }))
// body-parser를 이용해 application/json 파싱
app.use(bodyParser.json())
// public 폴더를 static으로 오픈
app.use('/public', static(path.join(__dirname, 'public')));
// cookie-parser 설정
app.use(cookieParser());
// 세션 설정
app.use(expressSession({
secret:'my key',
resave:true,
saveUninitialized:true
}));
//===== Passport 사용 설정 =====//
// Passport의 세션을 사용할 때는 그 전에 Express의 세션을 사용하는 코드가 있어야 함
app.use(passport.initialize());
app.use(passport.session());
app.use(flash());
//클라이언트에서 ajax로 요청 시 CORS(다중 서버 접속) 지원
app.use(cors());
//라우팅 정보를 읽어들여 라우팅 설정
var router = express.Router();
route_loader.init(app, router);
// 패스포트 설정
var configPassport = require('./config/passport');
configPassport(app, passport);
// 패스포트 라우팅 설정
var userPassport = require('./routes/user_passport');
userPassport(router, passport);
//===== 404 에러 페이지 처리 =====//
var errorHandler = expressErrorHandler({
static: {
'404': './public/404.html'
}
});
app.use( expressErrorHandler.httpError(404) );
app.use( errorHandler );
//===== 서버 시작 =====//
//확인되지 않은 예외 처리 - 서버 프로세스 종료하지 않고 유지함
process.on('uncaughtException', function (err) {
console.log('uncaughtException 발생함 : ' + err);
console.log('서버 프로세스 종료하지 않고 유지함.');
console.log(err.stack);
});
// 프로세스 종료 시에 데이터베이스 연결 해제
process.on('SIGTERM', function () {
console.log("프로세스가 종료됩니다.");
app.close();
});
app.on('close', function () {
console.log("Express 서버 객체가 종료됩니다.");
if (database.db) {
database.db.close();
}
});
// 시작된 서버 객체를 리턴받도록 합니다.
var server = http.createServer(app).listen(app.get('port'), function(){
console.log('서버가 시작되었습니다. 포트 : ' + app.get('port'));
// 데이터베이스 초기화
database.init(app, config);
});
//===== Socket.IO를 이용한 채팅 테스트 부분 =====//
// 로그인 아이디 매핑 (로그인 ID -> 소켓 ID)
var login_ids = {};
// socket.io 서버를 시작합니다.
var io = socketio.listen(server);
console.log('socket.io 요청을 받아들일 준비가 되었습니다.');
// 클라이언트가 연결했을 때의 이벤트 처리
io.sockets.on('connection', function(socket) {
console.log('connection info :', socket.request.connection._peername);
// 소켓 객체에 클라이언트 Host, Port 정보 속성으로 추가
socket.remoteAddress = socket.request.connection._peername.address;
socket.remotePort = socket.request.connection._peername.port;
// 'login' 이벤트를 받았을 때의 처리
socket.on('login', function(login) {
console.log('login 이벤트를 받았습니다.');
console.dir(login);
// 기존 클라이언트 ID가 없으면 클라이언트 ID를 맵에 추가
console.log('접속한 소켓의 ID : ' + socket.id);
login_ids[login.id] = socket.id;
socket.login_id = login.id;
console.log('접속한 클라이언트 ID 갯수 : %d', Object.keys(login_ids).length);
// 응답 메시지 전송
sendResponse(socket, 'login', '200', '로그인되었습니다.');
});
// 'message' 이벤트를 받았을 때의 처리
socket.on('message', function(message) {
console.log('message 이벤트를 받았습니다.');
console.dir(message);
if (message.recepient =='ALL') {
// 나를 포함한 모든 클라이언트에게 메시지 전달
console.dir('나를 포함한 모든 클라이언트에게 message 이벤트를 전송합니다.')
io.sockets.emit('message', message);
} else {
// 일대일 채팅 대상에게 메시지 전달
if (login_ids[message.recepient]) {
io.sockets.connected[login_ids[message.recepient]].emit('message', message);
// 응답 메시지 전송
sendResponse(socket, 'message', '200', '메시지를 전송했습니다.');
} else {
// 응답 메시지 전송
sendResponse(socket, 'login', '404', '상대방의 로그인 ID를 찾을 수 없습니다.');
}
}
});
// room 이벤트를 받았을 때의 처리
socket.on('room',function(room){
console.log("room 이벤트를 받았습니다.");
console.dir(room);
if(room.command == 'create'){
if(io.sockets.adapter.rooms[room.roomId]){//방이 이미 만들어져 있는경우
console.log("방이 이미 만들어져 있습니다.");
}else{
console.log("방을 새로 만듭니다.");
socket.join(room.roomId);
var curRoom = io.sockets.adapter.rooms[room.roomId];
curRoom.id = room.roomId;
curRoom.name = room.roomName;
curRoom.owner = room.roomOwner;
}
}else if(room.command == 'update'){
var curRoom = io.sockets.adapter.rooms[room.roomId];
curRoom.id = room.roomId;
curRoom.name = room.roomName;
curRoom.owner = room.roomOwner;
}else if (room.command == 'delete') {
socket.leave(room.roomId);
if(io.sockets.adapter.rooms[room.roomId]){//방이 만들어져 있는 경우
delete io.sockets.adapter.rooms[room.roomId];
}else{
console.log("방이 만들어져 있지 않습니다.");
}
}
var roomList = getRoomList();
var output = {command : 'list',rooms: roomList};
console.log("클라이언트로 보낼 데이터 : "+JSON.stringify(output));
io.sockets.emit('room',output);
});
});
function getRoomList() {
console.dir(io.sockets.adapter.rooms);
var roomList = [];
Object.keys(io.sockets.adapter.rooms).forEach(function(roomId) { // for each room
console.log('current room id : ' + roomId);
var outRoom = io.sockets.adapter.rooms[roomId];
// find default room using all attributes
var foundDefault = false;
var index = 0;
Object.keys(outRoom.sockets).forEach(function(key) {
console.log('#' + index + ' : ' + key + ', ' + outRoom.sockets[key]);
if (roomId == key) { // default room
foundDefault = true;
console.log('this is default room.');
}
index++;
});
if (!foundDefault) {
roomList.push(outRoom);
}
});
console.log('[ROOM LIST]');
console.dir(roomList);
return roomList;
}
// 응답 메시지 전송 메소드
function sendResponse(socket, command, code, message) {
var statusObj = {command: command, code: code, message: message};
socket.emit('response', statusObj);
}방에 입장 / 퇴장 메소드
메소드
설명
join(roomName)
방에 입장한다. 방이 없으면 방을 새로 만든다.
leave(roomName)
방에서 나온다.
socket.io 모듈에서 방정보를 관리하고 있다. 방 객체에 속성을 추가하는 것도 가능하다. 방 정보는 io.sockets.adapter.rooms에 들어있다. getRoomList()는 처음부터 만들어져 있던 방이다.
그룹 채팅에서 메시지 보내기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>채팅 클라이언트 05</title>
<script src="jquery-3.1.1.min.js"></script>
<script src="socket.io.js"></script>
<script>
var host;
var port;
var socket;
// 문서 로딩 후 실행됨
$(function() {
// 연결하기 버튼 클릭 처리
$("#connectButton").bind('click', function(event) {
println('connectButton이 클릭되었습니다.');
host = $('#hostInput').val();
port = $('#portInput').val();
connectToServer();
});
// 전송 버튼 클릭 시 처리
$("#sendButton").bind('click', function(event) {
// chattype 구분
var chattype = $('#chattype option:selected').val();
var sender = $('#senderInput').val();
var recepient = $('#recepientInput').val();
var data = $('#dataInput').val();
var output = {sender:sender, recepient:recepient, command:chattype, type:'text', data:data};
console.log('서버로 보낼 데이터 : ' + JSON.stringify(output));
if (socket == undefined) {
alert('서버에 연결되어 있지 않습니다. 먼저 서버에 연결하세요.');
return;
}
socket.emit('message', output);
});
// 로그인 버튼 클릭 시 처리
$("#loginButton").bind('click', function(event) {
var id = $('#idInput').val();
var password = $('#passwordInput').val();
var alias = $('#aliasInput').val();
var today = $('#todayInput').val();
var output = {id:id, password:password, alias:alias, today:today};
console.log('서버로 보낼 데이터 : ' + JSON.stringify(output));
if (socket == undefined) {
alert('서버에 연결되어 있지 않습니다. 먼저 서버에 연결하세요.');
return;
}
socket.emit('login', output);
});
// 방만들기 버튼 클릭 시 처리
$("#createRoomButton").bind('click', function(event) {
var roomId = $('#roomIdInput').val();
var roomName = $('#roomNameInput').val();
var id = $('#idInput').val();
var output = {command:'create', roomId:roomId, roomName:roomName, roomOwner:id};
console.log('서버로 보낼 데이터 : ' + JSON.stringify(output));
if (socket == undefined) {
alert('서버에 연결되어 있지 않습니다. 먼저 서버에 연결하세요.');
return;
}
socket.emit('room', output);
});
// 방이름바꾸기 버튼 클릭 시 처리
$("#updateRoomButton").bind('click', function(event) {
var roomId = $('#roomIdInput').val();
var roomName = $('#roomNameInput').val();
var id = $('#idInput').val();
var output = {command:'update', roomId:roomId, roomName:roomName, roomOwner:id};
console.log('서버로 보낼 데이터 : ' + JSON.stringify(output));
if (socket == undefined) {
alert('서버에 연결되어 있지 않습니다. 먼저 서버에 연결하세요.');
return;
}
socket.emit('room', output);
});
// 방없애기 버튼 클릭 시 처리
$("#deleteRoomButton").bind('click', function(event) {
var roomId = $('#roomIdInput').val();
var output = {command:'delete', roomId:roomId};
console.log('서버로 보낼 데이터 : ' + JSON.stringify(output));
if (socket == undefined) {
alert('서버에 연결되어 있지 않습니다. 먼저 서버에 연결하세요.');
return;
}
socket.emit('room', output);
});
// 방입장하기 버튼 클릭 시 처리
$("#joinRoomButton").bind('click', function(event) {
var roomId = $('#roomIdInput').val();
var output = {command:'join', roomId:roomId};
console.log('서버로 보낼 데이터 : ' + JSON.stringify(output));
if (socket == undefined) {
alert('서버에 연결되어 있지 않습니다. 먼저 서버에 연결하세요.');
return;
}
socket.emit('room', output);
});
// 방나가기 버튼 클릭 시 처리
$("#leaveRoomButton").bind('click', function(event) {
var roomId = $('#roomIdInput').val();
var output = {command:'leave', roomId:roomId};
console.log('서버로 보낼 데이터 : ' + JSON.stringify(output));
if (socket == undefined) {
alert('서버에 연결되어 있지 않습니다. 먼저 서버에 연결하세요.');
return;
}
socket.emit('room', output);
});
});
// 서버에 연결하는 함수 정의
function connectToServer() {
var options = {'forceNew':true};
var url = 'http://' + host + ':' + port;
socket = io.connect(url, options);
socket.on('connect', function() {
println('웹소켓 서버에 연결되었습니다. : ' + url);
socket.on('message', function(message) {
console.log(JSON.stringify(message));
println('<p>수신 메시지 : ' + message.sender + ', ' + message.recepient + ', ' + message.command + ', ' + message.data + '</p>');
});
socket.on('response', function(response) {
console.log(JSON.stringify(response));
println('응답 메시지를 받았습니다. : ' + response.command + ', ' + response.code + ', ' + response.message);
});
// 그룹 채팅에서 방과 관련된 이벤트 처리
socket.on('room', function(data) {
console.log(JSON.stringify(data));
println('<p>방 이벤트 : ' + data.command + '</p>');
println('<p>방 리스트를 받았습니다.</p>');
if (data.command == 'list') { // 방 리스트
var roomCount = data.rooms.length;
$("#roomList").html('<p>방 리스트 ' + roomCount + '개</p>');
for (var i = 0; i < roomCount; i++) {
$("#roomList").append('<p>방 #' + i + ' : ' + data.rooms[i].id + ', ' + data.rooms[i].name + ', ' + data.rooms[i].owner + '</p>');
}
}
});
});
socket.on('disconnect', function() {
println('웹소켓 연결이 종료되었습니다.');
});
}
function println(data) {
console.log(data);
$('#result').append('<p>' + data + '</p>');
}
</script>
</head>
<body>
<h3>채팅 클라이언트 05 : 그룹 채팅하기</h3>
<br>
<div>
<input type="text" id="hostInput" value="localhost" />
<input type="text" id="portInput" value="3000" />
<input type="button" id="connectButton" value="연결하기" />
</div>
<br>
<div>
<input type="text" id="idInput" value="test01" />
<input type="password" id="passwordInput" value="123456" />
<input type="text" id="aliasInput" value="소녀시대" />
<input type="text" id="todayInput" value="좋은 날!" />
<input type="button" id="loginButton" value="로그인" />
<input type="button" id="logoutButton" value="로그아웃" />
</div>
<br>
<div>
<input type="text" id="roomIdInput" value="meeting01" />
<input type="text" id="roomNameInput" value="청춘들의대화" />
<input type="button" id="createRoomButton" value="방만들기" />
<input type="button" id="updateRoomButton" value="방이름바꾸기" />
<input type="button" id="deleteRoomButton" value="방없애기" />
</div>
<br>
<div id="roomList">
</div>
<br>
<div>
<input type="button" id="joinRoomButton" value="방입장하기" />
<input type="button" id="leaveRoomButton" value="방나가기" />
</div>
<br>
<div>
<div>
<span>보내는사람 아이디 :</span>
<input type="text" id="senderInput" value="test01" />
</div>
<div>
<span>받는사람 아이디 :</span>
<input type="text" id="recepientInput" value="ALL" />
</div>
<!-- command 선택 <select> 채팅, 그룹채팅 -->
<select name="chattype" id="chattype">
<option value="chat">채팅</option>
<option value="groupchat" selected>그룹채팅</option>
</select>
<div>
<span>메시지 데이터 :</span>
<input type="text" id="dataInput" value="안녕!"/>
</div>
<br>
<input type="button" id="sendButton" value="전송" />
</div>
<hr/>
<p>결과 : </p>
<div id="result"></div>
</body>
</html>일대일 채팅에서는 io.sockets.connected객체에 들어 있는 소켓 객체들 중에서 대상이 되는 소켓 객체를 소켓 ID로 찾은 후 emit()메소드를 호출하여 메시지를 전송했다. 이와 다르게 그룹 채팅에서는 io.sockets.in()메소드를 사용해 대상이 되는 방에 들어 있는 소켓 객체들을 찾은 후 메시지를 전송한다.
// Express 기본 모듈 불러오기
var express = require('express')
, http = require('http')
, path = require('path');
// Express의 미들웨어 불러오기
var bodyParser = require('body-parser')
, cookieParser = require('cookie-parser')
, static = require('serve-static')
, errorHandler = require('errorhandler');
// 에러 핸들러 모듈 사용
var expressErrorHandler = require('express-error-handler');
// Session 미들웨어 불러오기
var expressSession = require('express-session');
//===== Passport 사용 =====//
var passport = require('passport');
var flash = require('connect-flash');
// 모듈로 분리한 설정 파일 불러오기
var config = require('./config/config');
// 모듈로 분리한 데이터베이스 파일 불러오기
var database = require('./database/database');
// 모듈로 분리한 라우팅 파일 불러오기
var route_loader = require('./routes/route_loader');
// Socket.IO 사용
var socketio = require('socket.io');
// cors 사용 - 클라이언트에서 ajax로 요청 시 CORS(다중 서버 접속) 지원
var cors = require('cors');
// 익스프레스 객체 생성
var app = express();
//===== 뷰 엔진 설정 =====//
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
console.log('뷰 엔진이 ejs로 설정되었습니다.');
//===== 서버 변수 설정 및 static으로 public 폴더 설정 =====//
console.log('config.server_port : %d', config.server_port);
app.set('port', process.env.PORT || 3000);
// body-parser를 이용해 application/x-www-form-urlencoded 파싱
app.use(bodyParser.urlencoded({ extended: false }))
// body-parser를 이용해 application/json 파싱
app.use(bodyParser.json())
// public 폴더를 static으로 오픈
app.use('/public', static(path.join(__dirname, 'public')));
// cookie-parser 설정
app.use(cookieParser());
// 세션 설정
app.use(expressSession({
secret:'my key',
resave:true,
saveUninitialized:true
}));
//===== Passport 사용 설정 =====//
// Passport의 세션을 사용할 때는 그 전에 Express의 세션을 사용하는 코드가 있어야 함
app.use(passport.initialize());
app.use(passport.session());
app.use(flash());
//클라이언트에서 ajax로 요청 시 CORS(다중 서버 접속) 지원
app.use(cors());
//라우팅 정보를 읽어들여 라우팅 설정
var router = express.Router();
route_loader.init(app, router);
// 패스포트 설정
var configPassport = require('./config/passport');
configPassport(app, passport);
// 패스포트 라우팅 설정
var userPassport = require('./routes/user_passport');
userPassport(router, passport);
//===== 404 에러 페이지 처리 =====//
var errorHandler = expressErrorHandler({
static: {
'404': './public/404.html'
}
});
app.use( expressErrorHandler.httpError(404) );
app.use( errorHandler );
//===== 서버 시작 =====//
//확인되지 않은 예외 처리 - 서버 프로세스 종료하지 않고 유지함
process.on('uncaughtException', function (err) {
console.log('uncaughtException 발생함 : ' + err);
console.log('서버 프로세스 종료하지 않고 유지함.');
console.log(err.stack);
});
// 프로세스 종료 시에 데이터베이스 연결 해제
process.on('SIGTERM', function () {
console.log("프로세스가 종료됩니다.");
app.close();
});
app.on('close', function () {
console.log("Express 서버 객체가 종료됩니다.");
if (database.db) {
database.db.close();
}
});
// 시작된 서버 객체를 리턴받도록 합니다.
var server = http.createServer(app).listen(app.get('port'), function(){
console.log('서버가 시작되었습니다. 포트 : ' + app.get('port'));
// 데이터베이스 초기화
database.init(app, config);
});
//===== Socket.IO를 이용한 채팅 테스트 부분 =====//
// 로그인 아이디 매핑 (로그인 ID -> 소켓 ID)
var login_ids = {};
// socket.io 서버를 시작합니다.
var io = socketio.listen(server);
console.log('socket.io 요청을 받아들일 준비가 되었습니다.');
// 클라이언트가 연결했을 때의 이벤트 처리
io.sockets.on('connection', function(socket) {
console.log('connection info :', socket.request.connection._peername);
// 소켓 객체에 클라이언트 Host, Port 정보 속성으로 추가
socket.remoteAddress = socket.request.connection._peername.address;
socket.remotePort = socket.request.connection._peername.port;
// 'login' 이벤트를 받았을 때의 처리
socket.on('login', function(login) {
console.log('login 이벤트를 받았습니다.');
console.dir(login);
// 기존 클라이언트 ID가 없으면 클라이언트 ID를 맵에 추가
console.log('접속한 소켓의 ID : ' + socket.id);
login_ids[login.id] = socket.id;
socket.login_id = login.id;
console.log('접속한 클라이언트 ID 갯수 : %d', Object.keys(login_ids).length);
// 응답 메시지 전송
sendResponse(socket, 'login', '200', '로그인되었습니다.');
});
// 'message' 이벤트를 받았을 때의 처리
socket.on('message', function(message) {
console.log('message 이벤트를 받았습니다.');
console.dir(message);
if (message.recepient =='ALL') {
// 나를 포함한 모든 클라이언트에게 메시지 전달
console.dir('나를 포함한 모든 클라이언트에게 message 이벤트를 전송합니다.')
io.sockets.emit('message', message);
} else {
// command 속성으로 일대일 채팅과 그룹채팅 구분
if (message.command == 'chat') {
// 일대일 채팅 대상에게 메시지 전달
if (login_ids[message.recepient]) {
io.sockets.connected[login_ids[message.recepient]].emit('message', message);
// 응답 메시지 전송
sendResponse(socket, 'message', '200', '메시지를 전송했습니다.');
} else {
// 응답 메시지 전송
sendResponse(socket, 'login', '404', '상대방의 로그인 ID를 찾을 수 없습니다.');
}
} else if (message.command == 'groupchat') {
// 방에 들어있는 모든 사용자에게 메시지 전달
io.sockets.in(message.recepient).emit('message', message);
// 응답 메시지 전송
sendResponse(socket, 'message', '200', '방 [' + message.recepient + ']의 모든 사용자들에게 메시지를 전송했습니다.');
}
}
});
// room 이벤트를 받았을 때의 처리
socket.on('room',function(room){
console.log("room 이벤트를 받았습니다.");
console.dir(room);
if(room.command == 'create'){
if(io.sockets.adapter.rooms[room.roomId]){//방이 이미 만들어져 있는경우
console.log("방이 이미 만들어져 있습니다.");
}else{
console.log("방을 새로 만듭니다.");
socket.join(room.roomId);
var curRoom = io.sockets.adapter.rooms[room.roomId];
curRoom.id = room.roomId;
curRoom.name = room.roomName;
curRoom.owner = room.roomOwner;
}
}else if(room.command == 'update'){
var curRoom = io.sockets.adapter.rooms[room.roomId];
curRoom.id = room.roomId;
curRoom.name = room.roomName;
curRoom.owner = room.roomOwner;
}else if (room.command == 'delete') {
socket.leave(room.roomId);
if(io.sockets.adapter.rooms[room.roomId]){//방이 만들어져 있는 경우
delete io.sockets.adapter.rooms[room.roomId];
}else{
console.log("방이 만들어져 있지 않습니다.");
}
}else if(room.command == 'join'){
socket.join(room.roomId);
sendResponse(socket,'room','200','방에 입장했습니다.');
}else if(room.command == 'leave'){
socket.leave(room.roomId);
sendResponse(socket,'room','200','방에서 나갔습니다.');
}
var roomList = getRoomList();
var output = {command : 'list',rooms: roomList};
console.log("클라이언트로 보낼 데이터 : "+JSON.stringify(output));
io.sockets.emit('room',output);
});
});
function getRoomList() {
console.dir(io.sockets.adapter.rooms);
var roomList = [];
Object.keys(io.sockets.adapter.rooms).forEach(function(roomId) { // for each room
console.log('current room id : ' + roomId);
var outRoom = io.sockets.adapter.rooms[roomId];
// find default room using all attributes
var foundDefault = false;
var index = 0;
Object.keys(outRoom.sockets).forEach(function(key) {
console.log('#' + index + ' : ' + key + ', ' + outRoom.sockets[key]);
if (roomId == key) { // default room
foundDefault = true;
console.log('this is default room.');
}
index++;
});
if (!foundDefault) {
roomList.push(outRoom);
}
});
console.log('[ROOM LIST]');
console.dir(roomList);
return roomList;
}
// 응답 메시지 전송 메소드
function sendResponse(socket, command, code, message) {
var statusObj = {command: command, code: code, message: message};
socket.emit('response', statusObj);
}10-4 채팅 웹 문서 예쁘게 꾸미기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<title>일대일 채팅</title>
<link href="./semantic.min.css" rel="stylesheet" >
<style>
* {
padding:0;
margin:0;
box-sizing:border-box;
}
html {
width:100%;
height:100%;
}
body {
width:100%;
height:100%;
color: #000;
background-color: #fff;
}
.container {
width:100%;
height:100%;
display:flex;
flex-flow:column wrap;
align-items:center;
justify-content:center;
}
#cardbox {
width:94%;
height:94%;
padding-left:0.4em;
padding-right:0.4em;
}
#iconImage {
display:inline;
}
#titleText {
font-size:1.4em;
font-weight:bold;
color:#777;
}
#contentsText {
color:#999;
}
#result {
height:10em;
overflow:auto;
}
</style>
<script src="jquery-3.1.1.min.js"></script>
<script src="socket.io.js"></script>
<script src="semantic.min.js"></script>
<script>
var host;
var port;
var socket;
// 문서 로딩 후 실행됨
$(function() {
// 연결하기 버튼 클릭 처리
$("#connectButton").bind('click', function(event) {
println('connectButton이 클릭되었습니다.');
host = $('#hostInput').val();
port = $('#portInput').val();
connectToServer();
});
// 전송 버튼 클릭 시 처리
$("#sendButton").bind('click', function(event) {
var sender = $('#senderInput').val();
var recepient = $('#recepientInput').val();
var data = $('#dataInput').val();
var output = {sender:sender, recepient:recepient, command:'chat', type:'text', data:data};
console.log('서버로 보낼 데이터 : ' + JSON.stringify(output));
if (socket == undefined) {
alert('서버에 연결되어 있지 않습니다. 먼저 서버에 연결하세요.');
return;
}
socket.emit('message', output);
});
// 로그인 버튼 클릭 시 처리
$("#loginButton").bind('click', function(event) {
var id = $('#idInput').val();
var password = $('#passwordInput').val();
var alias = $('#aliasInput').val();
var today = $('#todayInput').val();
var output = {id:id, password:password, alias:alias, today:today};
console.log('서버로 보낼 데이터 : ' + JSON.stringify(output));
if (socket == undefined) {
alert('서버에 연결되어 있지 않습니다. 먼저 서버에 연결하세요.');
return;
}
socket.emit('login', output);
});
// 결과 지우기 버튼 클릭 시 처리
$("#clearButton").bind('click', function(event) {
$("#result").html('');
});
});
// 서버에 연결하는 함수 정의
function connectToServer() {
var options = {'forceNew':true};
var url = 'http://' + host + ':' + port;
socket = io.connect(url, options);
socket.on('connect', function() {
println('웹소켓 서버에 연결되었습니다. : ' + url);
socket.on('message', function(message) {
console.log(JSON.stringify(message));
println('<p>수신 메시지 : ' + message.sender + ', ' + message.recepient + ', ' + message.command + ', ' + message.data + '</p>');
});
socket.on('response', function(response) {
console.log(JSON.stringify(response));
println('응답 메시지를 받았습니다. : ' + response.command + ', ' + response.code + ', ' + response.message);
});
});
socket.on('disconnect', function() {
println('웹소켓 연결이 종료되었습니다.');
});
}
function println(data) {
console.log(data);
$('#result').append('<p>' + data + '</p>');
}
</script>
</head>
<body>
<div class="container">
<div id="cardbox" class="ui blue fluid card">
<div class="content">
<div class="left floated author">
<img id="iconImage" class="ui avatar image" src="./images/author.png">
</div>
<div>
<div id="titleText" class="header">일대일 채팅</div>
<div id="contentsText" class="description">
연결 및 로그인 후 메시지를 보내세요.
</div>
</div>
</div>
<br>
<!-- 연결하기 -->
<div>
<div class="ui input">
<input type="text" id="hostInput" value="localhost" />
</div>
<div class="ui input">
<input type="text" id="portInput" value="3000" />
</div>
<br><br>
<input class="ui primary button" type="button" id="connectButton" value="연결하기" />
</div>
<br>
<!-- 로그인/로그아웃 -->
<div>
<div class="ui input">
<input type="text" id="idInput" value="test01" />
</div>
<div class="ui input">
<input type="password" id="passwordInput" value="123456" />
</div>
<div class="ui input">
<input type="text" id="aliasInput" value="소녀시대" />
</div>
<div class="ui input">
<input type="text" id="todayInput" value="좋은 날!" />
</div>
<br><br>
<input class="ui primary button" type="button" id="loginButton" value="로그인" />
<input class="ui primary button" type="button" id="logoutButton" value="로그아웃" />
</div>
<br>
<!-- 전송하기 -->
<div>
<div class="description">
<span>보내는사람 아이디 :</span>
<div class="ui input">
<input type="text" id="senderInput" value="test01" />
</div>
</div>
<div class="description">
<span>받는사람 아이디 :</span>
<div class="ui input">
<input type="text" id="recepientInput" value="ALL" />
</div>
</div>
<div class="description">
<span>메시지 데이터 :</span>
<div class="ui input">
<input type="text" id="dataInput" value="안녕!"/>
</div>
</div>
<br>
<input class="ui primary button" type="button" id="sendButton" value="전송" />
<input class="ui primary button" type="button" id="clearButton" value="결과 지우기" />
</div>
<br>
<!-- 결과 표시 -->
<h4 class="ui horizontal divider header">메시지</h4>
<div class="ui segment" id="result">
</div>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<title>일대일 채팅</title>
<link href="./semantic.min.css" rel="stylesheet" >
<style>
* {
padding:0;
margin:0;
box-sizing:border-box;
}
html {
width:100%;
height:100%;
}
body {
width:100%;
height:100%;
color: #000;
background-color: #fff;
}
.container {
width:100%;
height:100%;
display:flex;
flex-flow:column wrap;
align-items:center;
justify-content:center;
}
#cardbox {
width:94%;
height:94%;
padding-left:0.4em;
padding-right:0.4em;
}
#iconImage {
display:inline;
}
#titleText {
font-size:1.4em;
font-weight:bold;
color:#777;
}
#contentsText {
color:#999;
}
#result {
height:14em;
overflow:auto;
}
.discussion {
list-style: none;
background: #ededed;
margin: 0;
padding: 0 0 50px 0;
}
.discussion li {
padding: 0.5em;
overflow: hidden;
display: flex;
}
.discussion .avatar {
width: 40px;
position: relative;
}
.discussion .avatar img {
display: block;
width: 100%;
}
.other .avatar:after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border: 5px solid white;
border-left-color: transparent;
border-bottom-color: transparent;
}
.self {
justify-content: flex-end;
align-items: flex-end;
}
.self .messages {
order: 1;
border-bottom-right-radius: 0;
}
.self .avatar {
order: 2;
}
.self .avatar:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 0;
border: 5px solid white;
border-right-color: transparent;
border-top-color: transparent;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.messages {
background: white;
padding: 10px;
border-radius: 2px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.messages p {
font-size: 0.8em;
margin: 0 0 0.2em 0;
}
.messages time {
font-size: 0.7em;
color: #ccc;
}
</style>
<script src="jquery-3.1.1.min.js"></script>
<script src="socket.io.js"></script>
<script src="semantic.min.js"></script>
<script>
var host;
var port;
var socket;
// 문서 로딩 후 실행됨
$(function() {
// 연결하기 버튼 클릭 처리
$("#connectButton").bind('click', function(event) {
println('connectButton이 클릭되었습니다.');
host = $('#hostInput').val();
port = $('#portInput').val();
connectToServer();
});
// 전송 버튼 클릭 시 처리
$("#sendButton").bind('click', function(event) {
var sender = $('#senderInput').val();
var recepient = $('#recepientInput').val();
var data = $('#dataInput').val();
var output = {sender:sender, recepient:recepient, command:'chat', type:'text', data:data};
console.log('서버로 보낼 데이터 : ' + JSON.stringify(output));
if (socket == undefined) {
alert('서버에 연결되어 있지 않습니다. 먼저 서버에 연결하세요.');
return;
}
socket.emit('message', output);
addToDiscussion('self', data);
});
// 로그인 버튼 클릭 시 처리
$("#loginButton").bind('click', function(event) {
var id = $('#idInput').val();
var password = $('#passwordInput').val();
var alias = $('#aliasInput').val();
var today = $('#todayInput').val();
var output = {id:id, password:password, alias:alias, today:today};
console.log('서버로 보낼 데이터 : ' + JSON.stringify(output));
if (socket == undefined) {
alert('서버에 연결되어 있지 않습니다. 먼저 서버에 연결하세요.');
return;
}
socket.emit('login', output);
});
// 결과 지우기 버튼 클릭 시 처리
$("#clearButton").bind('click', function(event) {
$("#result").html('');
});
});
// 서버에 연결하는 함수 정의
function connectToServer() {
var options = {'forceNew':true};
var url = 'http://' + host + ':' + port;
socket = io.connect(url, options);
socket.on('connect', function() {
println('웹소켓 서버에 연결되었습니다. : ' + url);
socket.on('message', function(message) {
console.log(JSON.stringify(message));
println('<p>수신 메시지 : ' + message.sender + ', ' + message.recepient + ', ' + message.command + ', ' + message.data + '</p>');
addToDiscussion('other', message.data);
});
socket.on('response', function(response) {
console.log(JSON.stringify(response));
println('응답 메시지를 받았습니다. : ' + response.command + ', ' + response.code + ', ' + response.message);
});
});
socket.on('disconnect', function() {
println('웹소켓 연결이 종료되었습니다.');
});
}
function println(data) {
console.log(data);
//$('#result').append('<p>' + data + '</p>');
}
function addToDiscussion(writer, msg) {
println("addToDiscussion 호출됨 : " + writer + ", " + msg);
var img = '/public/images/user1.png';
if (writer == 'other') {
img = '/public/images/user2.png';
}
var contents = "<li class='" + writer + "'>"
+ " <div class='avatar'>"
+ " <img src='" + img + "' />"
+ " </div>"
+ " <div class='messages'>"
+ " <p>" + msg + "</p>"
+ " <time datetime='2016-02-10 18:30'>18시 30분</time>"
+ " </div>"
+ "</li>";
println("추가할 HTML : " + contents);
$(".discussion").prepend(contents);
}
</script>
</head>
<body>
<div class="container">
<div id="cardbox" class="ui blue fluid card">
<div class="content">
<div class="left floated author">
<img id="iconImage" class="ui avatar image" src="./images/author.png">
</div>
<div>
<div id="titleText" class="header">일대일 채팅</div>
<div id="contentsText" class="description">
연결 및 로그인 후 메시지를 보내세요.
</div>
</div>
</div>
<br>
<!-- 연결하기 -->
<div>
<div class="ui input">
<input type="text" id="hostInput" value="localhost" />
</div>
<div class="ui input">
<input type="text" id="portInput" value="3000" />
</div>
<br><br>
<input class="ui primary button" type="button" id="connectButton" value="연결하기" />
</div>
<br>
<!-- 로그인/로그아웃 -->
<div>
<div class="ui input">
<input type="text" id="idInput" value="test01" />
</div>
<div class="ui input">
<input type="password" id="passwordInput" value="123456" />
</div>
<div class="ui input">
<input type="text" id="aliasInput" value="소녀시대" />
</div>
<div class="ui input">
<input type="text" id="todayInput" value="좋은 날!" />
</div>
<br><br>
<input class="ui primary button" type="button" id="loginButton" value="로그인" />
<input class="ui primary button" type="button" id="logoutButton" value="로그아웃" />
</div>
<br>
<!-- 전송하기 -->
<div>
<div class="description">
<span>보내는사람 아이디 :</span>
<div class="ui input">
<input type="text" id="senderInput" value="test01" />
</div>
</div>
<div class="description">
<span>받는사람 아이디 :</span>
<div class="ui input">
<input type="text" id="recepientInput" value="ALL" />
</div>
</div>
<div class="description">
<span>메시지 데이터 :</span>
<div class="ui input">
<input type="text" id="dataInput" value="안녕!"/>
</div>
</div>
<br>
<input class="ui primary button" type="button" id="sendButton" value="전송" />
<input class="ui primary button" type="button" id="clearButton" value="결과 지우기" />
</div>
<br>
<!-- 결과 표시 -->
<h4 class="ui horizontal divider header">메시지</h4>
<div class="ui segment" id="result">
<ol class="discussion">
<li class="other">
<div class="avatar">
<img src="/public/images/user2.png" />
</div>
<div class="messages">
<p>어디쯤이야? 다들 기다리고 있어.</p>
<time datetime="2016-02-10 18:10">18시 10분</time>
</div>
</li>
<li class="self">
<div class="avatar">
<img src="/public/images/user1.png" />
</div>
<div class="messages">
<p>차가 막히네. 조금 늦을 듯.</p>
<time datetime="2016-02-10 18:00">18시 00분</time>
</div>
</li>
<li class="other">
<div class="avatar">
<img src="/public/images/user2.png" />
</div>
<div class="messages">
<p>강남역에 있는 카페에 자리 잡았어.</p>
<time datetime="2016-02-10 17:40">17시 40분</time>
</div>
</li>
</ol>
</div>
</div>
</div>
</body>
</html>채팅 메시지 표시를 위해 만든 CSS는 https://css-tricks.com/replicating-google-hangouts-chat/참조
Last updated