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> </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
