<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.block {
background-color: #ccc;
padding: 1em;
margin: 1em;
}
</style>
<!-- include AutobahnJS .. that's all you need -->
<script src="http://autobahn.s3.amazonaws.com/js/autobahn.min.js"></script>
<script>
// WAMP session object
var sess;
var wsuri;
window.onload = function() {
if (window.location.protocol === "file:") {
wsuri = "ws://localhost:9000";
} else {
wsuri = "ws://" + window.location.hostname + ":9000";
}
// connect to WAMP server
ab.connect(wsuri,
// WAMP session was established
function (session) {
sess = session;
console.log("Connected!");
sess.subscribe("http://example.com/simple", onEvent);
sess.prefix("event", "http://example.com/event#");
sess.subscribe("event:myevent1", onEvent);
sess.subscribe("event:myevent2", onEvent);
},
// WAMP session is gone
function (code, reason) {
sess = null;
alert(reason);
}
);
};
function onEvent(topicUri, event) {
console.log(topicUri);
console.log(event);
}
function publishEvent()
{
evt = {};
evt.num = 23;
evt.name = document.getElementById('form_message').value;
evt.flag = document.getElementById('form_flag').checked;
evt.created = new Date();
evt.rand = Math.random();
var excludeMe = document.getElementById('exclude_me').checked;
if (document.getElementById('event1').checked) {
sess.publish("event:myevent1", evt, excludeMe);
} else {
sess.publish("event:myevent2", evt, excludeMe);
}
}
</script>
</head>
<body>
<h1>AutobahnJS PubSub Client</h1>
<div class="block">
<p>
Publish a simple event containing to data. Open a 2nd browser window/tab and you see events being received.
</p>
<button onclick="sess.subscribe('http://example.com/simple', onEvent);">Subscribe</button>
<button onclick="sess.unsubscribe('http://example.com/simple');">Unsubscribe</button>
<button onclick="sess.publish('http://example.com/simple', null);">Publish</button>
</div>
<div class="block">
<p>
Publish an event containing data.
</p>
<form>
<p>Message: <input id="form_message" type="text" size="50" maxlength="50" value="Hello, world!"></p>
<p>Flag: <input id="form_flag" type="checkbox"></p>
<p>Event:
<input id="event1" type="radio" name="eventtype" checked>Event 1
<input type="radio" name="eventtype">Event 2
</p>
<p>Exclude Me: <input id="exclude_me" type="checkbox" checked>
(By default, events published to a topic by a client will never be delivered to the client who published.
This can be overridded, and then a publisher - who is also subscribed to the topic - will receive it's own event.)</p>
</form>
<button onclick="publishEvent()">Publish Event</button>
</div>
<div class="block">
<p>
Publish to a Topic URI which was never registered for PubSub on server side. Events published to
such topics are transmitted to server, but silently ignored and never dispatched.
</p>
<button onclick="sess.publish('http://example.com/unregistered_topic', null);">Publish to unregistered Topic</button>
</div>
</body>
</html>