socket.io 채팅 구현
(http://socket.io/get-started/chat/ 을 요약 번역)
Node.js 서버 구현
1. 작업할 빈 폴더 생성, 아래 내용의 package.json 파일 생성
{
"name": "socket-chat-example",
"version": "0.0.1",
"description": "my first socket.io app",
"dependencies": {}
}
2. express 설치
- '--save' 옵션을 사용하면 설치시 package.json 파일 dependencies에도 추가해준다
$ npm install --save express
3. 아래 내용으로 index.js 파일을 생성해서 서버 구동을 확인한다.
var app = require('express')();
var http = require('http').Server(app);
app.get('/', function(req, res){
res.send('<h1>Hello world</h1>');
});
http.listen(3000, function(){
console.log('listening on *:3000');
});
- 서버 구동
$ node index.js
- 접속 확인
Serving HTML
1. index.js 파일 수정
..
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
..
2. 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; }
</style>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
</body>
</html>
3. 서버 재시동 후 확인
- Control+C로 서버 종료 후 node index.js로 재구동 후 접속 확인
nodemon 설치
- 소스 수정시마다 재구동이 번거롭다면 nodemon을 설치하면 매우 편리하게 쓸 수 있다.
(http://nodemon.io/)
- '-g' 옵션으로 글로벌 설치
$ npm install -g nodemon
- 이후 서버 구동은 nodemon으로 한다. 파일 수정시 자동으로 서버를 재시작해준다.
$ nodemonIntegrating Socket.IO
1. socket.io 설치
$ npm install --save socket.io
*Windows 환경의 경우 python이 설치 되어있지 않으면 node-gyp 관련된 socket.io의 dependency중 bufferutil, utf-8-validate 빌드 오류가 발생될 수 있다.
*이번 예제 진행에는 영향을 미치지 않으니 일단 무시하고 진행한다.
2. 서버 소스 수정
- index.js 파일 수정
- io에 'connection' 이벤트가 발생하면 콜백 함수를 실행하는 형태이다.
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res){
res.sendfile('index.html');
});
io.on('connection', function(socket){
console.log('a user connected');
});
http.listen(3000, function(){
console.log('listening on *:3000');
});
3. 클라이언트 소스 수정
- index.html 파일 수정. body 맨 아래에 추가한다.
- socket.io.js를 로드해서 io() 라는 함수를 실행해서 연결한다.
...
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
</script>
</body>
...
- nodemon을 사용했다면 자동으로 서버가 재시작 되었을테니 브라우저만 새로고침하면 확인 가능하다.
- 클라이언트는 직접적인 변화가 없으며, 접속시 서버 콘솔에 'a user connected'가 출력된다.
4. disconnect 이벤트 구현
- connection 콜백에서 disconnect 이벤트 리스너를 추가했다.
- 접속시, 해제시 서버측에 콘솔이 출력된다.
- 클라이언트는 직접적인 변화가 없으며, 접속시 서버 콘솔에 'a user connected'가 출력된다.
4. disconnect 이벤트 구현
- connection 콜백에서 disconnect 이벤트 리스너를 추가했다.
- 접속시, 해제시 서버측에 콘솔이 출력된다.
...
io.on('connection', function(socket){
console.log('a user connected');
socket.on('disconnect', function(){
console.log('user disconnected');
});
});
...Emitting events
*Socket.IO를 이용해서 원하는 데이터를 원하는 이름의 이벤트로 전송이 가능하다.
1. index.html 수정
- 폼데이터 전송을 편하게 하기 위해 jquery를 추가했다.
- send 버튼을 누르면 input에 사용자가 입력한 값을 'chat message'라는 이름의 이벤트로 전송하는 내용이다.
...
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
</script>
...2. index.js 수정
- 'chat message'라는 이벤트가 발생하면 메시지를 콘솔로 출력하는 내용이다.
...
io.on('connection', function(socket){
socket.on('chat message', function(msg){
console.log('message: ' + msg);
});
});
...3. 메시지 전송 확인
- 클라이언트 소스 수정이 있었으니 브라우저 새로고침 후 메시지 전송시 서버 콘솔에 출력되는지 확인한다.
Broadcasting
이제 다른 모든 유저에게 메시지를 전달해보자.1. index.js 수정
- 'client message' 이벤트가 발생하면 메시지를 서버 콘솔에 출력하고,
emit 함수를 이용해 'server message' 라는 이벤트를 모든 클라이언트에게 전달하는 내용이다.
- chat message 라는 이름을 공통으로 사용해도 되지만, 구분하기 쉽게 client message / server message 라는 이름으로 구분해서 사용한다.
...
io.on('connection', function(socket){
socket.on('client message', function(msg){
console.log('message: ' + msg);
io.emit('server message', msg);
});
});
...
2. index.html 수정
- 'chat message' 이벤트 이름을 'client message' 로 변경했다.
- 'server message' 라는 이벤트가 발생하면 브라우저에 수신된 메시지를 출력하는 내용을 추가했다.
...
<script>
var socket = io();
$('form').submit(function(){
socket.emit('client message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('server message', function(msg){
$('#messages').append($('<li>').text(msg));
});
</script>
...3. 메시지 전송확인
- 브라우저 탭이나 창을 여러개 띄워서 메시지 전송을 확인한다.
- 메시지 전송시 서버와 접속중인 모든 클라이언트에 해당 메시지가 출력되는것을 확인할 수 있다.
댓글 없음:
댓글 쓰기