Return-Path: X-Original-To: apmail-activemq-commits-archive@www.apache.org Delivered-To: apmail-activemq-commits-archive@www.apache.org Received: from mail.apache.org (hermes.apache.org [140.211.11.3]) by minotaur.apache.org (Postfix) with SMTP id F415B9C8B for ; Fri, 16 Dec 2011 14:03:21 +0000 (UTC) Received: (qmail 7945 invoked by uid 500); 16 Dec 2011 14:03:21 -0000 Delivered-To: apmail-activemq-commits-archive@activemq.apache.org Received: (qmail 7908 invoked by uid 500); 16 Dec 2011 14:03:21 -0000 Mailing-List: contact commits-help@activemq.apache.org; run by ezmlm Precedence: bulk List-Help: List-Unsubscribe: List-Post: List-Id: Reply-To: dev@activemq.apache.org Delivered-To: mailing list commits@activemq.apache.org Received: (qmail 7901 invoked by uid 99); 16 Dec 2011 14:03:21 -0000 Received: from athena.apache.org (HELO athena.apache.org) (140.211.11.136) by apache.org (qpsmtpd/0.29) with ESMTP; Fri, 16 Dec 2011 14:03:21 +0000 X-ASF-Spam-Status: No, hits=-2000.0 required=5.0 tests=ALL_TRUSTED X-Spam-Check-By: apache.org Received: from [140.211.11.4] (HELO eris.apache.org) (140.211.11.4) by apache.org (qpsmtpd/0.29) with ESMTP; Fri, 16 Dec 2011 14:03:13 +0000 Received: from eris.apache.org (localhost [127.0.0.1]) by eris.apache.org (Postfix) with ESMTP id 04B5C23888D2 for ; Fri, 16 Dec 2011 14:02:53 +0000 (UTC) Content-Type: text/plain; charset="utf-8" MIME-Version: 1.0 Content-Transfer-Encoding: 7bit Subject: svn commit: r1215132 - in /activemq/trunk/activemq-web-demo/src/main/webapp: index.html websocket/ websocket/chat.css websocket/chat.js websocket/index.html websocket/stomp.js Date: Fri, 16 Dec 2011 14:02:52 -0000 To: commits@activemq.apache.org From: dejanb@apache.org X-Mailer: svnmailer-1.0.8-patched Message-Id: <20111216140253.04B5C23888D2@eris.apache.org> Author: dejanb Date: Fri Dec 16 14:02:52 2011 New Revision: 1215132 URL: http://svn.apache.org/viewvc?rev=1215132&view=rev Log: https://issues.apache.org/jira/browse/AMQ-3636 - adding websockets example Added: activemq/trunk/activemq-web-demo/src/main/webapp/websocket/ activemq/trunk/activemq-web-demo/src/main/webapp/websocket/chat.css activemq/trunk/activemq-web-demo/src/main/webapp/websocket/chat.js activemq/trunk/activemq-web-demo/src/main/webapp/websocket/index.html activemq/trunk/activemq-web-demo/src/main/webapp/websocket/stomp.js Modified: activemq/trunk/activemq-web-demo/src/main/webapp/index.html Modified: activemq/trunk/activemq-web-demo/src/main/webapp/index.html URL: http://svn.apache.org/viewvc/activemq/trunk/activemq-web-demo/src/main/webapp/index.html?rev=1215132&r1=1215131&r2=1215132&view=diff ============================================================================== --- activemq/trunk/activemq-web-demo/src/main/webapp/index.html (original) +++ activemq/trunk/activemq-web-demo/src/main/webapp/index.html Fri Dec 16 14:02:52 2011 @@ -91,6 +91,11 @@

Here you can find some examples on how you can exchange messages with ActiveMQ broker, using REST and Ajax APIs

+

Web sockets example

+ +

+ Websockets example shows how you can use websockets to exchange messages using the broker +

Market data example

Added: activemq/trunk/activemq-web-demo/src/main/webapp/websocket/chat.css URL: http://svn.apache.org/viewvc/activemq/trunk/activemq-web-demo/src/main/webapp/websocket/chat.css?rev=1215132&view=auto ============================================================================== --- activemq/trunk/activemq-web-demo/src/main/webapp/websocket/chat.css (added) +++ activemq/trunk/activemq-web-demo/src/main/webapp/websocket/chat.css Fri Dec 16 14:02:52 2011 @@ -0,0 +1,96 @@ +* { + margin: 0; + padding: 0; +} + +body { + font-family: 'Helvetica Neue', Helvetica, Verdana, Arial, sans-serif; + padding: 10px; +} + +#disconnect { + display: none; +} +#subscribe { + display: none; +} + +#debug { + background-color: #F0F0F0; + font-size: 12px; + width: 800px; + margin-left: 0px; + margin-top: 10px; + margin-right: 0px; + padding: 10px; + border: 1px solid #CCC; +} + +#send_form { + width: 800px; + bottom: 10px; +} + +#send_form #send_form_input { + border: 1px solid #CCC; + font-size: 16px; + height: 20px; + padding: 10px; + width: 800px; +} + +#send_form input[disabled] { + background-color: #EEE; +} + +#messages { + bottom: 25px; + left: 0; + overflow: auto; + padding: 5px; + right: 0; + top: 2em; + z-index: -1; +} + +.message { + width: 95%; +} + +.timestamp { + font-size: 12px; +} + +.me, .nick { + float: left; + width: 100px; +} + +.me { + color: #F99; +} + +.nick { + color: #99F; +} + +.status { + background-color: #DDD; +} + +form dt { + clear:both; + width:19%; + float:left; + text-align:right; +} + +form dd { + float:left; + width:80%; + margin:0 0 0.5em 0.25em; +} + +input { + width: 320px; +} \ No newline at end of file Added: activemq/trunk/activemq-web-demo/src/main/webapp/websocket/chat.js URL: http://svn.apache.org/viewvc/activemq/trunk/activemq-web-demo/src/main/webapp/websocket/chat.js?rev=1215132&view=auto ============================================================================== --- activemq/trunk/activemq-web-demo/src/main/webapp/websocket/chat.js (added) +++ activemq/trunk/activemq-web-demo/src/main/webapp/websocket/chat.js Fri Dec 16 14:02:52 2011 @@ -0,0 +1,51 @@ +$(document).ready(function(){ + + var client, destination; + + $('#connect_form').submit(function() { + var url = $("#connect_url").val(); + var login = $("#connect_login").val(); + var passcode = $("#connect_passcode").val(); + destination = $("#destination").val(); + + client = Stomp.client(url); + + // this allows to display debug logs directly on the web page + client.debug = function(str) { + $("#debug").append(str + "\n"); + }; + // the client is notified when it is connected to the server. + var onconnect = function(frame) { + client.debug("connected to Stomp"); + $('#connect').fadeOut({ duration: 'fast' }); + $('#disconnect').fadeIn(); + $('#send_form_input').removeAttr('disabled'); + + client.subscribe(destination, function(message) { + $("#messages").append("

" + message.body + "

\n"); + }); + }; + client.connect(login, passcode, onconnect); + + return false; + }); + + $('#disconnect_form').submit(function() { + client.disconnect(function() { + $('#disconnect').fadeOut({ duration: 'fast' }); + $('#connect').fadeIn(); + $('#send_form_input').addAttr('disabled'); + }); + return false; + }); + + $('#send_form').submit(function() { + var text = $('#send_form_input').val(); + if (text) { + client.send(destination, {foo: 1}, text); + $('#send_form_input').val(""); + } + return false; + }); + +}); \ No newline at end of file Added: activemq/trunk/activemq-web-demo/src/main/webapp/websocket/index.html URL: http://svn.apache.org/viewvc/activemq/trunk/activemq-web-demo/src/main/webapp/websocket/index.html?rev=1215132&view=auto ============================================================================== --- activemq/trunk/activemq-web-demo/src/main/webapp/websocket/index.html (added) +++ activemq/trunk/activemq-web-demo/src/main/webapp/websocket/index.html Fri Dec 16 14:02:52 2011 @@ -0,0 +1,182 @@ + + + + + + + + + + + + + + + + Chat Example Using Stomp Over WebSocket + + + + + + + + +
+
+
+
+
+
+
+
+
+
+ +
+ + + + + +
+ + +
+ + + + + + + + +
+
+ +
+
+
+
+
+
+
+
+
+
+
+
 
+
+
+
+ +

Make sure you have enabled websockets transport before running this demo

+

This is adapted stomp-websocket library demo

+

Use the form above to connect to the Stomp server and subscribe to the destination.

+

Once connected, you can send messages to the destination with the text field at the bottom of this page

+ + +
+
+
+ +
+
+
+
+ +
+ +
+ +

+
+                                

+                            		
+
+                                

+                                    

+                                        

+                                            
Useful Links

+
+                                            
+                                        

+                                    

+                                

+                            

+
+
+                    

+                

+            

+        

+    

+    

+        

+            

+                

+                    

+                        Copyright 2005-2007 The Apache Software Foundation.
+
+                        (printable version)
+                    

+                

+            

+        

+    

+

+
Graphic Design By Hiram

+
+
+
+

Added: activemq/trunk/activemq-web-demo/src/main/webapp/websocket/stomp.js
URL: http://svn.apache.org/viewvc/activemq/trunk/activemq-web-demo/src/main/webapp/websocket/stomp.js?rev=1215132&view=auto
==============================================================================
--- activemq/trunk/activemq-web-demo/src/main/webapp/websocket/stomp.js (added)
+++ activemq/trunk/activemq-web-demo/src/main/webapp/websocket/stomp.js Fri Dec 16 14:02:52 2011
@@ -0,0 +1,195 @@
+(function() {
+  var Client, Stomp, WebSocketStompMock;
+  var __hasProp = Object.prototype.hasOwnProperty, __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+  Stomp = {
+    frame: function(command, headers, body) {
+      if (headers == null) {
+        headers = [];
+      }
+      if (body == null) {
+        body = '';
+      }
+      return {
+        command: command,
+        headers: headers,
+        body: body,
+        id: headers.id,
+        receipt: headers.receipt,
+        transaction: headers.transaction,
+        destination: headers.destination,
+        subscription: headers.subscription,
+        error: null,
+        toString: function() {
+          var lines, name, value;
+          lines = [command];
+          for (name in headers) {
+            if (!__hasProp.call(headers, name)) continue;
+            value = headers[name];
+            lines.push("" + name + ":" + value);
+          }
+          lines.push('\n' + body);
+          return lines.join('\n');
+        }
+      };
+    },
+    unmarshal: function(data) {
+      var body, chr, command, divider, headerLines, headers, i, idx, line, trim, _ref, _ref2, _ref3;
+      divider = data.search(/\n\n/);
+      headerLines = data.substring(0, divider).split('\n');
+      command = headerLines.shift();
+      headers = {};
+      body = '';
+      trim = function(str) {
+        return str.replace(/^\s+/g, '').replace(/\s+$/g, '');
+      };
+      line = idx = null;
+      for (i = 0, _ref = headerLines.length; 0 <= _ref ? i < _ref : i > _ref; 0 <= _ref ? i++ : i--) {
+        line = headerLines[i];
+        idx = line.indexOf(':');
+        headers[trim(line.substring(0, idx))] = trim(line.substring(idx + 1));
+      }
+      chr = null;
+      for (i = _ref2 = divider + 2, _ref3 = data.length; _ref2 <= _ref3 ? i < _ref3 : i > _ref3; _ref2 <= _ref3 ? i++ : i--) {
+        chr = data.charAt(i);
+        if (chr === '\0') {
+          break;
+        }
+        body += chr;
+      }
+      return Stomp.frame(command, headers, body);
+    },
+    marshal: function(command, headers, body) {
+      return Stomp.frame(command, headers, body).toString() + '\0';
+    },
+    client: function(url) {
+      return new Client(url);
+    }
+  };
+  Client = (function() {
+    function Client(url) {
+      this.url = url;
+      this.counter = 0;
+      this.connected = false;
+      this.subscriptions = {};
+    }
+    Client.prototype._transmit = function(command, headers, body) {
+      var out;
+      out = Stomp.marshal(command, headers, body);
+      if (typeof this.debug === "function") {
+        this.debug(">>> " + out);
+      }
+      return this.ws.send(out);
+    };
+    Client.prototype.connect = function(login_, passcode_, connectCallback, errorCallback) {
+      var klass;
+      if (typeof this.debug === "function") {
+        this.debug("Opening Web Socket...");
+      }
+      klass = WebSocketStompMock || WebSocket;
+      this.ws = new klass(this.url);
+      this.ws.onmessage = __bind(function(evt) {
+        var frame, onreceive;
+        if (typeof this.debug === "function") {
+          this.debug('<<< ' + evt.data);
+        }
+        frame = Stomp.unmarshal(evt.data);
+        if (frame.command === "CONNECTED" && connectCallback) {
+          this.connected = true;
+          return connectCallback(frame);
+        } else if (frame.command === "MESSAGE") {
+          onreceive = this.subscriptions[frame.headers.subscription];
+          return typeof onreceive === "function" ? onreceive(frame) : void 0;
+        }
+      }, this);
+      this.ws.onclose = __bind(function() {
+        var msg;
+        msg = "Whoops! Lost connection to " + this.url;
+        if (typeof this.debug === "function") {
+          this.debug(msg);
+        }
+        return typeof errorCallback === "function" ? errorCallback(msg) : void 0;
+      }, this);
+      this.ws.onopen = __bind(function() {
+        if (typeof this.debug === "function") {
+          this.debug('Web Socket Opened...');
+        }
+        return this._transmit("CONNECT", {
+          login: login_,
+          passcode: passcode_
+        });
+      }, this);
+      return this.connectCallback = connectCallback;
+    };
+    Client.prototype.disconnect = function(disconnectCallback) {
+      this._transmit("DISCONNECT");
+      this.ws.close();
+      this.connected = false;
+      return typeof disconnectCallback === "function" ? disconnectCallback() : void 0;
+    };
+    Client.prototype.send = function(destination, headers, body) {
+      if (headers == null) {
+        headers = {};
+      }
+      if (body == null) {
+        body = '';
+      }
+      headers.destination = destination;
+      return this._transmit("SEND", headers, body);
+    };
+    Client.prototype.subscribe = function(destination, callback, headers) {
+      var id;
+      if (headers == null) {
+        headers = {};
+      }
+      id = "sub-" + this.counter++;
+      headers.destination = destination;
+      headers.id = id;
+      this.subscriptions[id] = callback;
+      this._transmit("SUBSCRIBE", headers);
+      return id;
+    };
+    Client.prototype.unsubscribe = function(id, headers) {
+      if (headers == null) {
+        headers = {};
+      }
+      headers.id = id;
+      delete this.subscriptions[id];
+      return this._transmit("UNSUBSCRIBE", headers);
+    };
+    Client.prototype.begin = function(transaction, headers) {
+      if (headers == null) {
+        headers = {};
+      }
+      headers.transaction = transaction;
+      return this._transmit("BEGIN", headers);
+    };
+    Client.prototype.commit = function(transaction, headers) {
+      if (headers == null) {
+        headers = {};
+      }
+      headers.transaction = transaction;
+      return this._transmit("COMMIT", headers);
+    };
+    Client.prototype.abort = function(transaction, headers) {
+      if (headers == null) {
+        headers = {};
+      }
+      headers.transaction = transaction;
+      return this._transmit("ABORT", headers);
+    };
+    Client.prototype.ack = function(message_id, headers) {
+      if (headers == null) {
+        headers = {};
+      }
+      headers["message-id"] = message_id;
+      return this._transmit("ACK", headers);
+    };
+    return Client;
+  })();
+  if (typeof window !== "undefined" && window !== null) {
+    window.Stomp = Stomp;
+  } else {
+    exports.Stomp = Stomp;
+    WebSocketStompMock = require('./test/server.mock.js').StompServerMock;
+  }
+}).call(this);
\ No newline at end of file