socket.io 서버 생성
축약 형태
연결 event
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 서버
Express와 socket.io 서버 준비
var express = require('express');
var http = require('http');
var app = express;
var server = http.Server(app);
server.listen(8080);
socket.io 서버
서버의 socket.io 클라이언트 html 응답
app.get('/', function(req, res) {
res.sendFile(__dirname + '/client.html');
});
script loading
socket 생성, connect
//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 확인
메세지 주고 받기 - 이벤트 기반
메시지 전송
data = eventHandler로 보낼 data, 없으면 생략 가능
메시지 수신
만약 이벤트를 발송시킬 때 (메시지 전송) data를 받게 됐으면 메세지 수신 eventHandler(data)에서도 데이터를 받도록 parameter를 정해준다
// 보내기 / 받기
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:N 통신
네임 스페이스로 socket.io 연결 구분
같은 네임 스페이스에서만 메세지를 주고 받음
기본 네임 스페이스 : /
커스텀 네임 스페이스 : /NAME-SPACE
기본 네임 스페이스로 연결
커스텀 네임 스페이스
서버
var nsp = io.of('/Custom-Namespace');
클라이언트
var nsp = io('/Custom-Namespace');
//기본 네임 스페이스
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!');
//기본 네임 스페이스
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);
});
네임 스페이스 안의 작은 그룹
룸 접속 / 떠나기
룸 이벤트
룸 입장 / 떠나기
//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));
});
});