Socket io, nodejs를 이용한 채팅 사이트 만들기

소켓을 통한 채팅을 쉽게 구현할 수 있도록 해주는 nodejs의  Socket io 모듈을 이용해

소켓을 통한 채팅 사이트를 만들어볼 것이다.

socket io에 대한 기본적인 사용법은

socket io Official Page - Get-Started 에서 참고할 수 있다.

기본적으로 socket io 모듈 설치는

> npm install --save socket.io

를 통해 할 수 있다.

가장 간단한 예시 - socket io 홈페이지에 나와있음

Server측 코드

 

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){
  console.log('a user connected');
});

http.listen(3000, function(){

  console.log('listening on *:3000');

});

기본적으로

express 모듈과 http모듈이 필요하다.

socketio모듈은 로딩 시 위의 소스처럼 서버와 서버를 나타내는 녀석을 인자로 갖고 io를 리턴하는듯 ( 정확하진 않음. 그냥 socket io 모듈의 사용법일 뿐. 내부가 어떻게 돌아가는 지는 아직 자세히 분석해보지 않았음. )

Client측 코드 - 기본적인 페이지 구성은 각자 자유롭게 하되 아래의 소스를 추가해주어야함.

<script src="/socket.io/socket.io.js"></script>

<script>

  var socket = io();

</script>

( 심화내용 : 

Server측에서 socket io를 npm install 하면 적절한 위치에 위의 script src가 생성될 것임.

따로 라우터를 적용안해줘도 server측 코드에서 3번줄의 모듈 로딩과정에서 라우터가 설정되는듯함. socket io github에 들어가서 코드를 보면 자세히 볼 수 있음.

https://github.com/socketio/socket.io/blob/master/lib/index.js 에서 Server.prototype.attachServe 메소드와Server.prototype.serve 메소드가 static file(for client)의 라우팅 내용인듯. )

기본적인 작동 원리

기본적으로 작동 원리를 설명하자면

client가 페이지에 접속시 client의 socket객체는 'connection'이벤트를 발생시키고

server의 io객체는 'connetion' 이벤트 발생시 콜백으로 client와 통신하는데 쓰이는 socket을 인자로 받게됨. 이때 콜백함수는 그저 'connection'에 대한 단순한 콜백이라기보단 그 클라이언트와 계속해서 통신하기 위한 전체의 과정을 포함한다.

예를 들면, 연결이 끊김을 알리는 이벤트인 'disconnection'에 대해서

io.on('connection', function(socket){ ... })

io.on('disconnection', function(socket){ ...})

이런식이 아닌

io.on('connection', function(socket){

socket.on('disconnection', function(){ ... })

}

이런식으로 작동한다.

즉 유저가 떠날 때 가지 그 유저와의 작업은 모두 connection의 콜백함수 안에 존재함!!

Event 관련

또한 Event와 관련해서는 socket io는 편리하게 이벤트를 생성하고 핸들할 수 있게해준다.

그냥 .emit('EventName', arg)

.on('EventName', function(arg){ .. })

를 통해 가능하다.

예를 들면 내가 메세지를 보내면

socket.emit('chat message', 'hello');

서버에서 이를 핸들할 때에는

socket.on('chat message', function(msg){ ... })

이런 식으로 쉽게 event와 event listener를 구현할 수 있다.

그럼 위에 나온 코드의 간단한 구현 모습은 아래와 같다.

Server

client