[Socket.IO] 실시간 채팅 구현

https://socket.io/

Socket.IO 모듈은 브라우저와 서버(Node.js) 간의 이벤트 기반의 실시간 양방향 통신을 가능하게 하는 라이브러리이다.

 

1. 서버

서버단에 Socket.IO 모듈을 설치한다.

npm install socket.io

실행 코드는 아래와 같다.

var app = require('http').createServer(handler);
var io = require('socket.io')(app);

app.listen(80);

function handler(req, res) {
    res.writeHead(200);
    res.end("hello");
}

io.on('connection', function (socket) {
    socket.emit('news', {
        hello: 'world'
    });
    socket.on('my other event', function (data) {
        console.log(data);
    });
});

Node.js의 내장객체인 http 모듈을 이용하여 만들어진 서버(app)를 이용한다. on 메소드를 이용하여 이벤트 핸들러를 등록할 수 있고, emit 메소드를 이용하여 클라이언트로 이벤트를 전달할 수 있다. 이벤트 이름은 이미 정해진 이름(connection)외에 개발자가 임의로 정할 수도 있다. Express 프레임워크를 사용한다면, 코드는 아래와 같이 작성된다.

var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);

server.listen(80);
// WARNING: app.listen(80) will NOT work here!

app.get('/', function (req, res) {
    res.sendFile(__dirname + '/index.html');
});

io.on('connection', function (socket) {
    socket.emit('news', {
        hello: 'world'
    });
    socket.on('my other event', function (data) {
        console.log(data);
    });
});

 

접속중인 클라이언트

현재 접속중인 클라이언트의 갯수는 아래와 같이 확인이 가능하다.

console.log(io.engine.clientsCount);
console.log(Object.keys(io.sockets.connected).length);

 

2. 클라이언트

클라이언트(브라우저)단에서 사용될 socket.io.js파일은 아래 링크에서 다운 받을 수 있다.

https://github.com/socketio/socket.io-client

 

위에서 받은 파일은 HTML에 포함시키고, 아래와 같은 실행코드를 작성한다.

var socket = io('http://localhost');
socket.on('news', function (data) {
    console.log(data);
    socket.emit('my other event', {
        my: 'data'
    });
});

io 함수의 인자로 서버의 도메인 주소나 IP 주소를 입력하면, 해당 클라이언트의 socket객체를 반환 받을 수 있다. socket객체의 on 메소드를 이용하여 이벤트 핸들러를 등록할 수 있고, emit 메소드를 이용하여 서버단으로 이벤트를 전송이 가능하다.

 

 

3. Heroku

https://www.heroku.com/

https://devcenter.heroku.com/articles/node-websockets

 

구현한 서버코드를 헤로쿠(Heroku) 플랫폼을 이용하여 클라우드 서버에 올릴 수 있다. 이때 추가/변경할 내용은 아래와 같다.

 

서버 포트번호 변경

일반적을 서버의 포트번호는 개발자가 정해주지만, 헤로쿠에 서버코드를 올리면 헤로쿠가 포트번호를 할당해준다. 해당 포트번호는 process.env.PORT에 할당된다.

const port = process.env.PORT || 3000; // for heroku

app.set('port', port);

 

Procfile 파일 작성

헤로쿠 플랫폼에서 해당 서버코드를 실행하는 명령어 작성한다.

// Procfile //
web: node index.js

Procfile 파일은 확장자가 없고, 최상위 폴더에 넣어서 헤로쿠로 업로드하면 된다.

 

클라이언트에서 접속할 도메인 주소

헤로쿠로 업로드하면 해당 서버의 헤로쿠 도메인 주소를 받을수 있는데, 클라이언트에서 해당 주소로 접속하면 된다.

let url = 'https://xxx.herokuapp.com';
let mysock = io.connect(url);

클라이언트 HTML 파일이 서버에서 제공된다면, 도메인 주소를 생략할 수 있다.

let mysock = io();

 

Heroku CLI를 이용한 업로드

헤로쿠에 로긴한다.

$ heroku login

 

헤로쿠 원격저장소를 remote 등록한다.

$ heroku git:remote -a <remote_heroku_app_name>

 

브랜치명이 master이거나 main인 브랜치를 업로드하면 해당 브랜치가 서비스된다.

$ git checkout main
$ git add .
$ git commit -m "commit for serving"
$ git push heroku main