반응형
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 되었음을 알수 있다.
반응형
