[Heroku] Heroku에 Node.js와 MongoDB(MongoHQ) 연동! 푸시보드예제

Heroku에서 MongoDB도 쓸 수 있군요. 16메가까지 무료로 제공되는 것 같아요. 국내에서 이런 비슷한 서비스가 있다면 바로 썼을텐데...ㅠㅠ 확실히 heroku도 google app engine처럼 외국사이트라서 그런지 사이트가 느리긴 하네요...

http://addons.heroku.com/
addon목록들인데, 보면 MySQL도 있고, 그 외에 다양한 db도 제공하는 것 같아요. 
근데, MongoHQ와 MongoLab 두가지가 있던데, MongoHQ로 일단 해봤습니다. MongoLab은 일단 나중에.....(뭔지도 모르겠고....같은 몽고디비인지....)

아! 그리고 Heroku에서 이제 루비설치하고 gem으로 heroku설치하는 삽질을 안하도록 직접 exe파일의 설치파일을 제공하더라구요. 이 문서를 보고 잘 설치하시면 됩니다.
http://devcenter.heroku.com/articles/quickstart 
그리고 여기 devcenter의 메뉴얼이 너무 잘 작성이 되어있어서 그것만 보셔도 충분히 할 수 있을 것 같습니다.

간단하게 몽고디비와 socket.io를 이용해서 트위터형태에 예제를 만들어봤습니다. 그냥 글을 쓰면 상대방도 같이 접속해 있으면 글이 새로 추가되는 초간단 예제입니다.


1.  Node.js app 생성 및 heroku git에 push

일단 app생성하고 push하는 것은 여기 메뉴얼대로 다 하면 됩니다.
http://devcenter.heroku.com/articles/node-js 


2. 해당 앱에 Add on추가하기

위에 대로 해서 앱을 하나 만드셨다면 앱에 mongohq를 추가하셔야 쓸 수 있습니다. 
http://addons.heroku.com/mongohq 여기서 추가하거나 heroku addons:add mongohq:free라고 콘솔에서 때리시거나 하시면 추가가 됩니다. 추가되면 바로 쓸 수 있습니다. 여기에서 자체적으로 데이터 관리 사이트를 제공합니다. 
접속하는 방법은 heroku.com에서 My App에서 해당앱에 Resource를 클릭하고, 맨 아래 installed addons에서 MongoHQ클릭하면 관리사이트가 나옵니다.


3. Node.js와 연동하기 위한 mongoskin

연동하는 게 여러종류가 있는데, 저는 mongoskin을 사용했습니다. 

npm install mongoskin

사용법은 간단합니다.
 

var mongoUrl = process.env.MONGOHQ_URL || "mongodb://mudchobo:1234@127.0.0.1:27017/mudchobo?auto_reconnect"; 

var db = require("mongoskin").db(mongoUrl);
db.collection("pushboard"); // 컬렉션 가져오기
db.collection("pushboard").find(); // 목록가져오기
db.collection("pushboard").insert({content:"내용"}); 

요런식으로 쓰면 됩니다. heroku에서 사용하는 url은 환경변수로 지정되어있습니다. 그냥 저 변수 쓰면 접속됩니다. heroku에 올리기 전에는 로컬에서 할것이기에 로컬에 깔아놓고 테스트하라고 ||로 처리했습니다.


4. 초간단 푸쉬보드예제!

server쪽!

var PREFIX = "/pushboard";

exports.init = function(app, db, io){
    var pb = db.collection("pushboard");
   
    // 메인화면
    app.get(PREFIX, function(req, res){
        res.render("." + PREFIX + "/index", {
            title:"푸쉬보드!",
            addScript:"aa"
        });
    });
   
    // 리스트가져오기
    app.get(PREFIX + "/getList", function(req, res){
        var list = [];
        db.collection("pushboard").find().sort({_id:0}).limit(100).toArray(function(err, content){
            if (err){
                res.end();
            } else {
                res.json({list:content});
            }
        });
    });
   
    // 글쓰기
    app.post(PREFIX + "/write", function(req, res){
        pb.insert({content:req.body.content});
        res.end();
    });
   
    // 푸쉬소켓
    io.of(PREFIX + "/push").on("connection", function(socket){
        console.log("푸쉬소켓 연결!");
        socket.on("newContent", function(data){
            console.log("newContent = " + data);
            socket.emit("newContent", data);
            socket.broadcast.emit("newContent", data);
        });
        socket.on("disconnect", function(){
        });
    });
}

client쪽!

var socket;
$(document).ready(function(){
    //$.floatingMessage("로딩 완료!", {time:3000});
    // 글쓰기 클릭 시
    $("#btnWrite").click(function(){
        var val = $("#taContent").val();
        if (val == ""){
            alert("글을 입력하세요.");
            return;
        }
        $.post("write", {content:val}, function(){
            socket.emit("newContent", val);
        });
        $("#taContent").val("");
    });
   
    // 최초 글 가져오기
    getList();
   
    // 푸쉬서버연결
    socket = io.connect("/pushboard/push").on("newContent", function(data){
        console.log("newcontent! = " + data);
        $("#lvContent").prepend("<li>" + data + "</li>").listview("refresh");
        //$.floatingMessage("새로운 글이 추가되었습니다.", {time:3000});
    });
});

function getList(){
    $.get("getList", {}, function(data){
        var html = "";
        for (var i=0; i<data.list.length; i++){
            html += "<li>" + data.list[i].content + "</li>";
        }
        $("#lvContent").html(html).listview("refresh");
    });
}

초간단 예제라 설명은 그냥 생략하고 싶네요...픽온돋아서.....소스는 github에!
https://github.com/mudchobo/SampleForNodeJS

heroku에도 올렸습니다. 서버는 뭐 언제 내릴지는 모르겠지만, 일단 올려봅니다.
http://samplefornodejs.herokuapp.com/pushboard/