mirror of https://github.com/apache/activemq.git
https://issues.apache.org/jira/browse/AMQ-3636 - adding websockets example
git-svn-id: https://svn.apache.org/repos/asf/activemq/trunk@1215132 13f79535-47bb-0310-9956-ffa450edef68
This commit is contained in:
Bosanac Dejan
parent
e282571099
commit
e72f43f8e6
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
});
|
||||
|
||||
});
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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);
|
||||
Loading…
Reference in New Issue