실시간 서비스를 위한 서버 준비
socket.io 서버 생성
- var Server = require('socket.io');
- var io = new Server(httpServer
축약 형태
- var io = require('socket.io')(server);
연결 event
- connection
HTTP Server 와 socket.io 서버 준비
var http = require('http');
var server = http.createServer(function(req, res) {
res.end('socket.io Sample');
});
server.listen(3000);socket.io 서버
- var io = require('socket.io')(server);
Express와 socket.io 서버 준비
var express = require('express');
var http = require('http');
var app = express;
var server = http.Server(app);
server.listen(8080);socket.io 서버
- var io = require('socket.io')(server);
서버의 socket.io 클라이언트 html 응답
app.get('/', function(req, res) {
res.sendFile(__dirname + '/client.html');
});script loading
- Server Module Loading or CDN
- (script src="/socket.io/socket.io.js")(/script)
- (script src="https::/cdn.socket.io/socket.io-1.3.7.js")(/script)
socket 생성, connect
- var socket = io();
Server 와 Client 연결
//Server
var io = require('socket.io')(server);
io.on('connection', function(socket){
console.log('client connection');
});
//console.log 로 연결 event 확인//Client
<script src="/socket.io/socket.io.js></script>
<script> var socket = io();
socket.on('connect', function(arg){
console.log('server connect');
});
</script>
//console.log 로 연결 event 확인데이터 교환
메세지 주고 받기 - 이벤트 기반
- 메세지 이벤트 정의
메시지 전송
- 이벤트 발생 : socket.emit()
- socket.emit('EVENT', data);
data = eventHandler로 보낼 data, 없으면 생략 가능
메시지 수신
- eventListener 등록 : socket.on()
- socket.on('EVENT', function(data){});
만약 이벤트를 발송시킬 때 (메시지 전송) data를 받게 됐으면 메세지 수신 eventHandler(data)에서도 데이터를 받도록 parameter를 정해준다
For example
// 보내기 / 받기
socket.emit('hello'),{message:'Welcome');
//'hello'라는 이벤트를 보내기 위해 emit event를 발생시키는 코드. 'hello'이벤트를 발생시키면서 보내는 데이터는 {message:'welcome'}
socket.on('hello', function(data){
var msg = data['message'];
}
);
//보내기 / 받기
socket.emit('howAreYou',{message:'Welcome'});
socket.on('howAreYou', function(Data){
var msg = data['message'];
}
);
//'howAreYou' 이벤트에 반응하는 코드. 'howAreYou'이벤트가 발생하면 이벤트 핸들러를 만들어서 등록함서버에 이벤트 등록 - 클라이언트에서 이벤트 발생
클라이언트 이벤트 등록 - 서버에서 이벤트 발생
네임 스페이스와 룸
socket.io 기본 연결
- 소켓과 1:1
- 모든 소켓과 통신
1:N 통신
- 개별 소켓과 1:1 통신 N번 번복
- 네임 스페이스
- 룸
네임 스페이스로 socket.io 연결 구분
같은 네임 스페이스에서만 메세지를 주고 받음
기본 네임 스페이스 : /
커스텀 네임 스페이스 : /NAME-SPACE
기본 네임 스페이스로 연결
- 서버
var io = require('socket.io')(server);
- 클라이언트
var socket = io();
커스텀 네임 스페이스
-
서버
var nsp = io.of('/Custom-Namespace'); -
클라이언트
var nsp = io('/Custom-Namespace');
EXAMPLE
SERVER
//기본 네임 스페이스
var io = require('socket.io')(server);
...
//네임 스페이스
//system이란 namespace만들기
//system에서 발생한 이벤트만 처리해주는 이벤트 핸들러
var system = io.of('/system');
system.on('connection', function(socket) {
console.log('system namespace');
});
system.emit('message', 'Notice!');CLIENT
//기본 네임 스페이스
var socket = io();
...
//커스텀 네임스페이스를 이용한 연결
var sysNsp = io('http:/myserver.com/system');
sysNsp.on('connect', function() {
console.log('system namespace connect');
});
sysNsp.on('message', function(data){
alert('system message : ' +data);
});룸
네임 스페이스 안의 작은 그룹
- 네임 스페이스 내 채널
- 같은 룸에서만 데이터 교환
- 룸에 입장(join), 여러 룸에 입장 가능
- 룸에서 떠나기(leave)
룸 접속 / 떠나기
- socket#join(name:String[,fn:Function]):Socket; 특정 룸에 입장
- socket#leave(name:String[,fc:Function]):Socket; 룸에서 떠나기
룸 이벤트
- Socket#to(room:String):Socket; 특정 룸에만 이벤트 발생
룸 입장 / 떠나기
- 서버에서 동작
룸을 이용한 통신 코등 예제
//SERVER
var room; //채팅방 입장
socket.on('joinRoom', function(data){
//기존방에서 나오기
socket.leave(room);
//새로운 채팅방 입장
room = data.room;
socket.join(room);
});
//채팅 메시지 룸으로(to) 전송
socket.on('chatInput',function(data){
io.to(room).emit('chatMessage',chat);
});//CLIENT
//룸에 입장
socket.emit('joinRoom', {room:room});
//채팅 메시지 수신
socket.on('chatMessage', function(data) {
var msg = data['msg'];
var nick = data['nick'];
var str = nick + ':' + msg;
//채팅 메시지
$('#messages').append($('<li>').text(str));
});
});
Hello,