[Node.js] node.js, socket.io를 이용한 웹 채팅
socket.io를 이용한 기본 웹 채팅을 구현해보겠습니다
$ npm express --view=ejs chatting
$ npm install
$ npm install socket.io --save
./io.js
modeule.exports = server =>{
let io = require('socket.io')(server);
io.on('connection', socket => {
socket.on('message', msg =>{
console.log(msg);
socket.emit('Mmessage', msg);
socket.emit('Omessage', msg);
});
});
return io;
}'connection' 이벤트가 발생하면 io.js에서 받아서 처리해줍니다.
'connection' 이벤트 후에 'message' 이벤트가 발생하면 메시지를 콘솔에 출력해주고 채팅창에 표시하기 위해 'Mmessage'와 'Omessage' 이벤트를 발생시킵니다.
./bin/www 수정
var server = http.createServer(app)
let io = require('../io.js')(server)
// 이부분을 추가해줍니다io 객체를 모듈화 하여 www 파일에서 실행시키도록 합니다
./routes/index.js
router.get('/chat', (req, res, next) => {
res.render('chatting');
});index 파일에서는 크게 해줄게 없습니다.
./view/chat.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chatting</title>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.1/socket.io.js"></script>
<link href="/stylesheets/style.css" rel="stylesheet"/>
<script>
$(function(){
let socket = io('http://localhost:4000');
socket.on('Mmessage', msg => {
$('#messages').append($('<p class="talk me">').text(msg));
});
socket.on('Omessage', msg => {
$('#messages').append($('<p class="talk other">').text(msg));
});
$("#msinput").keyup(function(key){
if(key.keyCode==13){ // 엔터 눌렀을 때
socket.emit('message', $("#msinput").val());
$("#msinput").val('');
}
});
$("#btns").on('click', function(){ // 전송 버튼 눌렀을 때
socket.emit('message', $("#msinput").val());
$("#msinput").val('');
});
})
</script>
</head>
<body>
<div class="background" >
<div class ="msgbox" id="messages"> </div>
<input id="msinput" class="msg" type="text"/>
<button id="btns" class="send" type="button">전송</button>
</div>
</body>
</html>
./public/stylesheets/style.css
필요하신 분은 사용하세요
body {
font: 12px 'Lucida Grande', Helvetica, Arial, sans-serif;
}
.background {
background-color: #c1aeee;
padding: 15px;
width: 250px;
}
.talk {
position: relative;
padding: 15px;
margin: 1em 0 1em;
color: black;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
width: auto;
}
.talk.me {
margin-left: 30px;
border: 5px solid #fff;
background: #fff;
}
.talk.other {
margin-right: 30px;
border: 5px solid #fff;
background-color: #fff;
}
.msg {
display: inline-block;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857;
color: #555555;
background-color: #fff;
background-image: none;
border: 0px solid #ccc;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.send {
background-color: #fff;
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
vertical-align: middle;
border: 0px solid transparent;
height: 46px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.msgbox {
width: auto;
height: 500px;
overflow: auto;
}
.msgbox::-webkit-scrollbar {
width: 10px;
}
.msgbox::-webkit-scrollbar-thumb {
background-color: #cfe2f5;
border-radius: 10px;
background-clip: padding-box;
border: 2px solid transparent;
}
.msgbox::-webkit-scrollbar-track {
background-color: #c1aeee;
border-radius: 10px;
box-shadow: inset 0px 0px 5px white;
}
/*# sourceMappingURL=style.css.map */
결과
