Socket.io를 통해서 실시간으로 채팅하는 프로젝트를 만드는 방법에 대해서 소개를 하려고 합니다.
채팅 가장 중요한게 실시간입니다. Socket.IO는 웹기반 실시간 양방향 통신이기 때문에 실시간 채팅을 구현할 수 있습니다.
연결, 연결해제, 메시지 등을 순차적으로 구현해볼께! 자 Todo를 채워 봅시다.
클라이언트 (Client)
<!DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<style type="text/css">
#main {
width: 500px;
height: 300px;
margin: auto;
}
#main textarea {
display: block;
width: 95%;
height: 200px;
}
#main>#msg {
width: 80%;
}
</style>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var ws = null;
var id = null;
$('#btnConnect').click(function() {
id = $('#id').val();
//Todo
});
$('#btnDisconn').click(function() {
//Todo
});
function send() {
var text = $('#msg').val();
//Todo
}
$('#btnSend').on('click', function() {
send();
});
$('#msg').on('keydown', function(evt) {
if (evt.keyCode == 13) {
send();
}
});
});
</script>
</head>
<body>
<div id="main">
<label for="id">ID :</label><input type="text" id="id" />
<button id="btnConnect">connect</button>
<button id="btnDisconn">Close</button>
<textarea id="content" readonly="readonly"></textarea>
<input type="text" id="msg" />
<button id="btnSend">Send</button>
</div>
</body>
</html>
1. 연결
이름을 넣고 connect를 누르면 '바나나님이 입장 하셨습니다.'와 함께 연결하는 부분
$('#btnConnect').click(function() {
id = $('#id').val();
//Todo
ws = io.connect();
ws.on('connect', function() {
ws.emit('login', {id:id});
});
ws.on('msg', function(data) {
console.log(data);
var txt = data.txt;
$('#content').val($('#content').val() + '\n' + txt);
});
});
2. 로그아웃 (연결해지)
disconnect를 누르면 '로그아웃 되었습니다.' 와 함께 서버하고 통신 종료
$('#btnDisconn').click(function() {
ws.emit('logout', {id:id}});
$('#id').val('');
ws.close();
});
3. 메시지 전송
메시지를 전송하고, EditText창을 비워주자.
ws.emit('msg', {id:id, text:text});
$('#msg').val('');
서버 (Server)
io.on('connection', function(socket) {
console.log('conneceted ' + socket.id);
socket.on('login' ,function(data) {
});
socket.on('msg', function(data) {
});
socket.on('logout', function(data) {
});
});
로그인 됬을때, 메시지전송, 접속 종료 각각에 대해서 함수를 채워넣으면 된다.
1. 로그인
console.log('conneceted ' + socket.id);
socket.on('login' ,function(data) {
io.emit('msg',{text: data.id + ' has connected.'});
});
2. 메시지전송
socket.on('msg', function(data) {
io.emit('msg', {text: data.id + ':' + data.text});
});
3. 접속 종료
socket.on('logout', function(data) {
io.emit("msg", {text: data.id + " has disconnected."});
});
참................. 쉽조잉?
'Programming > 웹프로그래밍' 카테고리의 다른 글
| [NodeJs] NoSQL MongoDB 연동하기 (검색/추가/삭제/갱신) (0) | 2016.03.18 |
|---|---|
| [NodeJs] MySQL 연동하기 (SELECT/INSERT/UPDATE/DELETE) (0) | 2016.03.18 |
| [NodeJs] Socket.io를 WebSocket 구현하기. (0) | 2016.03.18 |
| [NodeJs] Socket.IO란? (0) | 2016.03.18 |
| [NodeJs] Web Socket (0) | 2016.03.18 |