반응형
STOMP는 Simple/Streaming Text Oriented Messaging Protocol 의 약자이다. 유사한 프로토콜로 OASIS 표준으로 선정된 AMQP(Advanced Message Queuing protocol)이 있다. STOMP는 원래 Apache ActiveMQ에 사용할 목적으로 개발되었다. Apache ActiveMQ는 웹소켓을 지원한다. configuration 에 transportConnectors 에 websocket을 다음과 같이 지정해 주면 된다.


 

Apache ActiveMQ는 http://activemq.apache.org/ 에서 다운로드 가능하다. 현재(2015.02.22) 버전은 5.11.1 이다. 다운로드하고 압축을 풀고, bin 밑에 activemq 를 실행하면 된다. (activemq console) 데모 페이지를 포함시키려면 다음과 같이 실행한다. 

     bin/activemq console xbean:examples/conf/activemq-demo.xml

관리 페이지로 접속해 보면 다음과 같은 화면이 나타난다. (http://192.168.0.27:8161)


데모페이지는 http://192.168.0.27:8161/demo/ 로 들어가면 된다. 

웹소켓 예제로 들어가서 Server URL에 서버IP를 넣고 Connect 하면 예제가 실행된다.

다음과 같이 STOMP 메시지들을 볼수 있다.


STOMP over Websocket Javascript 라이브러리는 https://github.com/jmesnil/stomp-websocket 에서 찾을수 있다. 이번 포스팅에서는 브라우저와 node.js 상 프로그램간에 메시지 교환에 대해서 설명하도록 하겠다.

1. HTML 페이지
HTML/CSS 페이지는 다음과 같이 한다. 이전 포스팅 XMPP/websocket 의 웹 페이지들을 변경하였다.
<!DOCTYPE html>
<title>STOMP를 이용한 메시지 송/수신</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="chat.css">
<h1>STOMP를 이용한 메시지 송수신</h1>

<!-- 연결 -->ss
<div class="panel">
    <input type="text" id="username" placeholder="STOMP계정">
    <input type="password" id="password" placeholder="STOMP암호">
    <input type="source" id="source" placeholder="메시지전송자">
    <button id="connectButton">연결</button>
</div>

<div id="presenceArea" class="panel"></div>
<div id="chatArea" class="panel"></div>
<div id="output"></div>

<!-- 스크립트 -->
<script src="stomp.js"></script>
<script src="stomp_app.js"></script>
body {
    font-family: sans-serif;
}

#output {
    border: 2px solid black;
    border-radius: 8px;
    width: 500px;
}
    #output div {
        padding: 10px;
    }
    #output div:nth-child(even) {
        background-color: #ccc;
    }

panel {
    display: block;
    padding: 20px;
    border: 1px solid #ccc;
}

2. Javascript 프로그램
stomp_app.js 는 다음과 같이 한다. Apache ActiveMQ에 웹 페이지에서 입력받는 계정/패스워드로 로그인 하고, 웹 페이지에서 지정된 메시지 수신자로 subscription 한다. 그리고 특정 destination에 메시지를 보낸다. 여기에서 stomp client에서 heartbeat를 disable 한다. 아마도 Apache ActiveMQ 에서 웹소켓 이용시 heartbeat가 동작 안하는 듯 하다. (아니면 뭔가 설정하는 부분이 있을듯 하기도 하다.)
var output = document.getElementById("output");
var url = "ws://192.168.0.27:61614/stomp";
var client, src, dest;

function log(message) {
    var line = document.createElement("div");
    line.textContent = message;
    output.appendChild(line);
}

var onconnect=function (){
    console.log('connected');
    client.subscribe(src, function(message) {
        console.log("subscribe:"+message);
        log("Message :"+message.body);
    });
}
var onerror = function(error) {
    console.log(error);
};

var connectButton = document.getElementById("connectButton");
connectButton.onclick = function() {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    src=document.getElementById("source").value;
    console.log("src:"+src);
    client = Stomp.client(url);
    client.heartbeat.incoming = 0;
    client.heartbeat.outgoing=0;
    client.connect(username, password, onconnect, onerror);
}

var chatArea = document.getElementById("chatArea");
var toJid = document.createElement("input");
toJid.setAttribute("placeholder", "메시지수신자");
chatArea.appendChild(toJid);

var chatBody = document.createElement("input");
chatBody.setAttribute("placeholder", "message");
chatArea.appendChild(chatBody);

var sendButton = document.createElement("button");
sendButton.textContent = "메시지 전송";
sendButton.onclick = function() {
    console.log("To:"+toJid.value);
    console.log("Msg:"+chatBody.value);
    client.send(toJid.value,{},chatBody.value);
}
chatArea.appendChild(sendButton);

3. 실행 결과
다음처럼 source를 subscription 하면 해당 source로 전송되는 메시지를 볼수 있다.

Apache ActiveMQ의 관리 화면을 보면 queue에 test1, test2로 각각 메시지가 queue 되고 dequeue 되었음을 알수 있다.


반응형
Posted by alias
,