activemq-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From dej...@apache.org
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 GMT
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 @@
                                         <p>
                                             Here you can find some examples on how you can
exchange messages with ActiveMQ broker, using REST and Ajax APIs
                                         </p>
+                                        <h2>Web sockets example</h2>
+
+                                        <p>
+                                            <a href="websocket/index.html">Websockets</a>
example shows how you can use websockets to exchange messages using the broker
+                                        </p>
 
                                         <h2>Market data example</h2>
 

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("<p>" + message.body + "</p>\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 @@
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+-->
+
+
+
+
+
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+    <link rel="stylesheet" href="chat.css" type="text/css">
+    <style type="text/css" media="screen">
+        @import url(/admin/styles/sorttable.css);
+        @import url(/admin/styles/type-settings.css);
+        @import url(/admin/styles/site.css);
+        @import url(/admin/styles/prettify.css);
+    </style>
+    <title>Chat Example Using Stomp Over WebSocket</title>
+    <link rel="stylesheet" type="text/css" href="chat.css"></link>
+    <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
+    <script src='stomp.js'></script>
+    <script src='chat.js'></script>
+    <script>
+        $(document).ready(function() {
+        var supported = ("WebSocket" in window);
+        if(!supported) {
+        var msg = "Your browser does not support Web Sockets. This example will not work
properly.<br>";
+        msg += "Please use a Web Browser with Web Sockets support (WebKit or Google Chrome).";
+        $("#connect").html(msg);
+        }
+        });
+    </script>
+</head>
+<body>
+
+<div class="white_box">
+    <div class="header">
+        <div class="header_l">
+            <div class="header_r">
+            </div>
+        </div>
+    </div>
+    <div class="content">
+        <div class="content_l">
+            <div class="content_r">
+
+                <div>
+
+                    <!-- Banner -->
+                    <div id="asf_logo">
+                        <div id="activemq_logo">
+                            <a style="float:left; width:280px;display:block;text-indent:-5000px;text-decoration:none;line-height:60px;
margin-top:10px; margin-left:100px;"
+                               href="http://activemq.apache.org/"
+                               title="The most popular and powerful open source Message Broker">ActiveMQ</a>
+                            <a style="float:right; width:210px;display:block;text-indent:-5000px;text-decoration:none;line-height:60px;
margin-top:15px; margin-right:10px;"
+                               href="http://www.apache.org/" title="The Apache Software Foundation">ASF</a>
+                        </div>
+                    </div>
+
+
+                    <div class="top_red_bar">
+                        <div id="site-breadcrumbs">
+                            <a href="../index.html" title="Home">Home</a>
+                        </div>
+                        <div id="site-quicklinks"><P>
+                            <a href="http://activemq.apache.org/support.html"
+                               title="Get help and support using Apache ActiveMQ">Support</a></p>
+                        </div>
+                    </div>
+
+                    <table border="0">
+                        <tbody>
+                        <tr>
+                            <td valign="top" width="100%" style="overflow:hidden;">
+                                <div class="body-content">
+
+<div id='connect'>
+    <form id='connect_form'>
+        <dl>
+            <dt><label for=connect_url>Server URL</label></dt>
+            <dd><input name=url id='connect_url' value='ws://localhost:61614/stomp'></dd>
+            <dt><label for=connect_login>Login</label></dt>
+            <dd><input id='connect_login' placeholder="User Login" value="guest"></dd>
+            <dt><label for=connect_passcode>Password</label></dt>
+            <dd><input id='connect_passcode' type=password placeholder="User Password"
value="guest"></dd>
+            <dt><label for=destination>Destination</label></dt>
+            <dd><input id='destination' placeholder="Destination" value="/queue/test"></dd>
+            <dt>&nbsp;</dt>
+            <dd><input type=submit id='connect_submit' value="Connect"></dd>
+        </dl>
+    </form>
+
+    <p><b>Make sure you have enabled <a href="http://activemq.apache.org/websockets.html">websockets
transport</a> before running this demo</b></p>
+    <p>This is adapted <a href="https://github.com/jmesnil/stomp-websocket">stomp-websocket</a>
library demo</p>
+    <p>Use the form above to connect to the Stomp server and subscribe to the destination.</p>
+    <p>Once connected, you can send messages to the destination with the text field
at the bottom of this page</p>
+    
+
+</div>
+<div id="disconnect">
+    <form id='disconnect_form'>
+        <input type=submit id='disconnect_submit' value="Disconnect">
+    </form>
+</div>
+<div id="messages">
+</div>
+
+<form id='send_form'>
+    <input id='send_form_input' placeholder="Type your message here" disabled />
+</form>
+
+<pre id="debug"></pre>
+
+                                </div>
+                            </td>
+                            <td valign="top">
+
+                                <div class="navigation">
+                                    <div class="navigation_top">
+                                        <div class="navigation_bottom">
+                                            <H3>Useful Links</H3>
+
+                                            <ul class="alternate" type="square">
+                                                <li><a href="http://activemq.apache.org/"
+                                                       title="The most popular and powerful
open source Message Broker">Documentation</a></li>
+                                                <li><a href="http://activemq.apache.org/faq.html">FAQ</a></li>
+                                                <li><a href="http://activemq.apache.org/download.html">Downloads</a>
+                                                </li>
+                                                <li><a href="http://activemq.apache.org/discussion-forums.html">Forums</a>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </div>
+                            </td>
+                        </tr>
+                        </tbody>
+                    </table>
+
+
+                    <div class="bottom_red_bar"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="black_box">
+        <div class="footer">
+            <div class="footer_l">
+                <div class="footer_r">
+                    <div>
+                        Copyright 2005-2007 The Apache Software Foundation.
+
+                        (<a href="?printable=true">printable version</a>)
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="design_attribution"><a href="http://hiramchirino.com/">Graphic Design
By Hiram</a></div>
+
+</body>
+</html>
+

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



Mime
View raw message