SocketIO는 웹소켓을 좀더 포팅한 사용하기 쉬운 소켓이다.
그래서 NodeJS를 떠나서 더 많은 언어에서 사용하는 중이다.
그러나 본고장은 NodeJS이고 NodeJS의 지원이 가장 빠릿하다.
NodeJS에서 SocketIO를 사용해보자.
참고로 Express위에서 사용하므로 Native NodeJS를 사용할 경우는 알아서 하길 바란다.
SocketIO의 공식 홈페이지는 여기이다.
npm install socketio -save
일단 socketio를 사용해야하므로 import시켜준다.
node_modules에 socketio들이 설치된다.
이를 바로 쓸거면 static폴더로 등록해줘야하므로 app.js에서 node_modules를 등록한다.
npm install jquery -save
그리고 예제로 쓰기 위해서 jquery를 설치한다.
socktio의 예제코드를 설명하기 앞서서 socketio는 딱 두가지만 기억 하면된다.
emit - 서버는 클라이언트에게로, 클라이언트는 서버에게로 데이터를 보낸다
on - 서버는 클라이언트에게로, 클라이언트는 서벙에게로 데이터를 받는다.
이제 client의 코드를 보자.
client
<!--index.ejs-->
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css'/>
<script src="../socket.io-client/dist/socket.io.js"></script>
<script src="../jquery/dist/jquery.min.js"></script>
</head>
<body>
<textarea rows="20" cols="30" id="chat"></textarea><br>
<input type="text" id="user"><input type="button" value="msg submit" onclick="myOnClick()">
</body>
<script>
var socket = io.connect('http://localhost:3100');
socket.on('recMsg', function (data) {
console.log(data.comment)
$('#chat').append(data.comment);
});
function myOnClick() {
socket.emit("msg", {comment: $('#user').val()});
$('#user').val('');
}
</script>
</html>
위와 같은textarea와 input을 만들었다.
코드를 조금 해석해보자.
var socket = io.connect('http://localhost:3100');
소켓을 만드는 코드이다.
위 코드만으로 소켓을 연결할 수 있다.
<input type="text" id="user"><input type="button" value="msg submit" onclick="myOnClick()">
function myOnClick() {
socket.emit("msg", {comment: $('#user').val()});
$('#user').val('');
}
저기 button을 누르면 소켓의 데이터를 보낸다.
이벤트의 이름은 msg이며 보내는 데이터는 user input박스의 값을 서버로 전달하고 나서 input박스를 지우는 역활이다.
emit은 보낸다고 했다. 즉 msg라는 이벤트를 서버로 보내는 역활이고 데이터는 comment라는 변수로 던지는 역활이다.
<textarea rows="20" cols="30" id="chat"></textarea><br>
socket.on('recMsg', function (data) {
console.log(data.comment)
$('#chat').append(data.comment);
});
위 코드는 on이므로 서버에서 전달한 데이터가 있을 경우 실행되는 이벤트 리스너이다.
recMsg라는 이벤트가 서버에서 전달했을경우 이 데이터를 클라이언트 콘솔에 출력하며 그 다음 chat이라는 textarea에 넣는다.
server
// app.js의 본문내에 삽입하시면 된다.
var io = require('socket.io').listen(3100);
io.on('connection', function (socket) {
console.log('connect');
var instanceId = socket.id;
socket.on('msg', function (data) {
console.log(data);
socket.emit('recMsg', {comment: instanceId + ":" + data.comment+'\n'});
})
});
서버에서는 소켓을 만드는 코드와 이를 작동시키는 코드가 필요하다.
먼저 io.on의 이벤트는 조금더 큰 단위의 이벤트이다.
이는 소켓이 연결됨을 알려주는 이벤트이다.
소켓이 연결될 경우 서베어는 connect라는 화면이 등장할 것이다.
그 다음 socket.id는 식별자인데 사실 이건 안써도 되는데 그냥 넣었다.
msg이벤트는 connection이벤트 내부에 존재해야한다.
즉 성공한 이벤트중에서 msg이벤트를 확인하는 것이고 클라이언트에서 msg라는 이벤트로 던졌다면 이를 받는 것이다.
그리고 그 값을 조금 수정해서 recMsg이벤트로 다시 던져주는 것이다.
이제 서버와 클라이언트 부분을 번갈아가면서 본다면 이 코드를 쉬이 이해할 수 있다.
사용해보면 작동함을 알수 있다.
문제는 이 코드는 1대1만 가능하다.
1대다를 사용하려면 다른 방법을 써야한다.
이를 다음 화에서 알려드리겠다.