간만에 블로그 올립니다.
개인적으로 Socket.IO 를 많이 궁금해했었는데, 더 늦기 전에 정리를 해보려고 합니다.
(1) 개요
채팅이나 메신저 어플리케이션을 구현한다고 했을때, 웹서버 (혹은 WAS 를 포함한) 에서만 기능을 구현하는 것은 상당히 비효율적일 겁니다. 트래픽 양을 생각하면 웹 서버에서 전부 처리하는 것은 로드가 많이 걸리죠. Node.Js로 비동기 처리방식의 구현이 용이해진 만큼, 이를 이용해서 비동기 방식으로 가벼운 메시지 등을 처리하면 운영에 있어서도 유연하겠죠. 아마 이전에는 소켓 프로그램을 구현했겠지만, Node.js 에 Socket.IO 모듈을 설치하면 URL 및 HTTP 전송 방식으로도 이처럼 light한 요청들을 처리하는데 상당히 유용하다고 합니다.
(2) 설치
Node.Js 를 설치하고 프로젝트 폴더에 Socket.IO 모듈을 추가하면 바로 사용할 수 있다고 합니다. 터미널에서 npm install 명령어로 추가합니다.
npm install --save socket.io
(3) Node 서버 메인
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
io.on('connection', function(socket){
socket.on('chat message', function(msg){
io.emit('chat message', msg);
});
});
http.listen(3000, function(){ console.log('listening on *:3000'); });express로 웹 서버 환경을 구현하고 . Socket.IO 모듈은 io 변수가 접근자가 되어서 해당 요청을 처리합니다. io.on() 함수 안의 콜백에서 관련 기능을 구현하면 될거 같네요.
socket.on 메소드의 첫번째 파라미터를 기능을 정의하는 키워드 정도로 생각하시면 될거 같아요. socket.on 메소드는 기능을 구현하는 단위가 되겠네요.
(4) 클라이언트 페이지 처리
<!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>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
$(function () {
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<ul><li>').text(msg));
});
});
</script>
</body>
</html>
페이지에서 socket.io.js 모듈을 추가하고 기능을 정의하였습니다. 그리고 form에 이벤트를 걸었네요.
socket.emit 메소드는 첫번째 파라미터에 정의한 기능으로 메시지를 보내는 액션을 수행하고, socket.on 메소드는 소켓으로부터 데이터가 전송된 후의 액션을 정의하네요.
(5) 레퍼런스
이번글은 Socket.IO 의 getting started 페이지인 https://socket.io/get-started/chat/ 를 읽고 풀어보았습니다. 생략한게 많아서 API 목록이나 기타 더 궁금하신 분들은 여기를 직접 참고해서 들어가시는게 좋겠습니다.
- 서버 API : https://socket.io/docs/server-api/
- 클라이언트 API : https://socket.io/docs/client-api/
'Web 개발 (업데이트 없음)' 카테고리의 다른 글
| 트랜잭션 개요 및 Spring 에서 구현하기 (0) | 2018.10.28 |
|---|---|
| 콜백지옥과 Promise에 대해 (0) | 2018.10.28 |
| Vanilla JS .. ? (0) | 2018.10.28 |
| ES6 문법 정리 (3) – template, arrow function, module (0) | 2018.10.28 |
| ES6 문법 정리 (2) – Destructuring 기법 (0) | 2018.10.28 |
