2016년 1월 28일 목요일

stomp.js 사용하기

STOMP가 뭐죠?

stomp는 간단한 텍스트 기반 메시지 프로토콜이다.

WebSocket API 란 무엇이지?

웹소켓은 웹을 위한 TCP이다.
구글이 크롬 브라우저에서의 웹소켓의 사용가능에 대해 발표할 때, 웹소켓의 기본 아이디어에 대해 설명하였다.

===================================================================================
웹소켓 API는 웹 애플리케이션이 양방향 커뮤니케이션을 다룰 수 있게 해주는 직접적인 서버 프로세스이다.
개발자들은 이러한 목적을 위해 XMLHttpRequest(XHR)를 사용해왔지만, XHR은 불필요하게 복잡하다.
XHR은 기본적으로 비동기식 HTTP이고, 서버에서 브라우저로 데이터를 보낼 때, long-hanging GET과 같은 기술을
사용하기 때문에, 간단한 업무가 급격히 복잡해졌다. XHR과 반대로 웹소켓은 진정한 양방향 통신을 당신의 브라우저에 제공한다.
당신이 웹소켓 커넥션을 얻기만 하면, 당신은 send() 메서드를 부름으로써 브라우저에서 서버로 데이터를 보낼 수 있고,
서버에서 브라우저로 onmessage event handler를 사용하여 데이터를 받을 수 있다.
새로운 웹소켓 API에는, 브라우저에서 서버와 통신하는 데 사용하는 새로운 프로토콜(WebSocket Protocol)이 있다.
프로토콜은 낮은 단계의 TCP가 아니다.왜냐하면 이것은 브라우저의 "same origin" 보안 모델을 공급할 필요가 있기 때문이다.
이것은 HTTP 또한 아니다. WebSocket의 트래픽은 HTTP의 request-response 모델과도 다르기 때문이다.
새로운 웹소켓 프로토콜을 사용하는 웹소켓 통신은 적은 대역을 사용해야만 한다. 여러 개의 XHR과 hanging GET 과는 다르게,
하나의 커넥션이 이루어질 때 header는 사용되지않는다.
이러한 새로운 API와 프로토콜을 사용하여 보다 간단한 프로그래밍과 보다 효과적인 네트워크 트래픽을 이용하기 위해서는,
당신은 통신할 새로운 서버를 만들어야만 한다.
===================================================================================

이 API는 HTML5의 한 부분이며 대부분의 현대적인 웹 브라우저 (구글 크롬, 파이어폭스, 맥OSX와 iOS 의 사파리를 포함하여)에서 지원된다.

Protocol Support

이 라이브러리는 다양한 버전의 stomp 프로토콜을 지원한다.

STOMP 1.0
STOMP 1.1 (heart-beating 포함)

Server Requirements

이 라이브러리는 순수 stomp client는 아니다. 이 것은 TCP가 아닌 웹소켓 프로토콜에서 사용하는 것에 초점이 맞춰져있다.
기본적으로 웹소켓 프로토콜은 브라우저의 클라이언트와 서버 사이에 브라우저의 "same-origin" 보안 모델을 적용하기 위해
handshake가 요구된다.

이것은 이 라이브러리는 stomp 프로토콜의 부분이 아닌 웹소켓에 의해 handshake는 허용되지않고, 거절되기 때문에 보통의 stomp broker에게로 연결하지 않는다는 것을 의미한다.

STOPM API

웹소켓을 사용하는 stomp는 stomp frame에서 javascript object로의 직접적인 맵핑을 제공한다.

@Frame Object
Property Type Notes
command String name of the frame ("CONNECT", "SEND", etc.)
headers JavaScript object
body String

command와 headers 의 property는 항상 정의되지만 만약 frame이 header를 가지지 않는다면 headers는 empty가 될 수 있다.
body는 frame이 body를 가지지 않는다면 null 값이 될 수 있다.

Create a STOMP client

In a Web browser with regular Web Socket

STOMP javascript client는 ws:// 주소를 이용해 stomp 서버와 통신할 것이다.

stomp client javascript client를 만들기 위해서, 당신은 Stomp.client(url) 을 호출하여야 한다.

var url = "ws://localhost:61614/stomp";
 var client = Stomp.client(url);

Stomp.client(url, protocols) 역시 기본 subprotocols로 제공되는 ['v10.stomp', 'v11.stomp]' (for STOMP 1.0 & 1.1 specifications) 를
덮어씌우기 위해 사용될 수 있다.
두 번째 변수는 하나의 string 혹은 여러개의 subprotocol을 명시하기 위해 array로 명시될 수 있다.

Connection to the server

stomp client가 만들어진 이후에, stomp server에 효과적으로 연결하고 인증하기 위해 connect() method를 호출하여야 한다.
이 method는 두 개의 필수 값을 가지고 있는데, user credential과 일치하는 login과 passcode이다.

client는 websocket을 이용하여 connection을 연 다음, connect frame을 보낸다.

커넥션은 비동기적으로 이루어진다. 효과적으로 통신이 연결되었다는 보장이 없기 때문에, 커넥션이 이루어짐을 알리기 위해서,
당신은 connect_callback 을 connect 메서드에 넘겨주어야 한다.

var connect_callback = function() {
    // called back after the client is connected and authenticated to the STOMP server
  };

하지만, 커넥션이 실패할 경우는 어떻게 하나? connect 메서드는 선택적으로 error_callback 변수를 제공한다.
커넥션이 실패하였을 때 실행되며, error 변수는 STOMP ERROR 프레임에 상응한다.

var error_callback = function(error) {
    // display the error's message header:
    alert(error.headers.message);
  };

connect 메서드는 다양한 갯수의 변수를 허용한다.

client.connect(login, passcode, connectCallback);
  client.connect(login, passcode, connectCallback, errorCallback);
  client.connect(login, passcode, connectCallback, errorCallback, host);

login, passcode 는 string 값이며, connectCallback 과 errorCallback 은 function이다.

connect 메서드는 만약 당신이 header를 더 추가하여야 한다면, 다른 두 개 종류의 모양도 허용한다.

client.connect(headers, connectCallback);
  client.connect(headers, connectCallback, errorCallback);

header는 map 이고, connectCallback 과 errorCallback 은 function이다.

만약 당신이 이러한 형태를 사용한다면, 당신은 headers에 반드시 login, passcode 를 추가하여야 한다.

var headers = {
      login: 'mylogin',
      passcode: 'mypasscode',
      // additional header
      'client-id': 'my-client-id'
    };
    client.connect(headers, connectCallback);

연결을 끊기위해, 당신은 disconnect 메서드를 사용할 수 있다. 이러한 연결은 비동기적이고, 역시 선택적으로 callback 변수를 사용할 수 있다.

client.disconnect(function() {
    alert("See you next time!");
  };

disconnect가 되면, 더이상 메시지를 받거나 보내지 않는다.

원본 출처 : http://jmesnil.net/stomp-websocket/doc/

댓글 없음 :

댓글 쓰기