Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /*******************************************************************************
- * Copyright (c) 2015 IBM Corp.
- *
- * All rights reserved. This program and the accompanying materials
- * are made available under the terms of the Eclipse Public License v1.0
- * and Eclipse Distribution License v1.0 which accompany this distribution.
- *
- * The Eclipse Public License is available at
- * http://www.eclipse.org/legal/epl-v10.html
- * and the Eclipse Distribution License is available at
- * http://www.eclipse.org/org/documents/edl-v10.php.
- *
- * Contributors:
- * James Sutton - Initial Contribution
- *******************************************************************************/
- /*
- Eclipse Paho MQTT-JS Utility
- This utility can be used to test the Eclipse Paho MQTT Javascript client.
- */
- // Create a client instance
- var client = null;
- var connected = false;
- logMessage("INFO", "Starting Eclipse Paho JavaScript Utility.");
- // Things to do as soon as the page loads
- document.getElementById("clientIdInput").value = "js-utility-" + makeid();
- // called when the client connects
- function onConnect(context) {
- // Once a connection has been made, make a subscription and send a message.
- var connectionString = context.invocationContext.host + ":" + context.invocationContext.port + context.invocationContext.path;
- logMessage("INFO", "Connection Success ", "[URI: ", connectionString, ", ID: ", context.invocationContext.clientId, "]");
- var statusSpan = document.getElementById("connectionStatus");
- statusSpan.innerHTML = "Connected to: " + connectionString + " as " + context.invocationContext.clientId;
- connected = true;
- setFormEnabledState(true);
- }
- function onConnected(reconnect, uri) {
- // Once a connection has been made, make a subscription and send a message.
- logMessage("INFO", "Client Has now connected: [Reconnected: ", reconnect, ", URI: ", uri, "]");
- connected = true;
- }
- function onFail(context) {
- logMessage("ERROR", "Failed to connect. [Error Message: ", context.errorMessage, "]");
- var statusSpan = document.getElementById("connectionStatus");
- statusSpan.innerHTML = "Failed to connect: " + context.errorMessage;
- connected = false;
- setFormEnabledState(false);
- }
- // called when the client loses its connection
- function onConnectionLost(responseObject) {
- if (responseObject.errorCode !== 0) {
- logMessage("INFO", "Connection Lost. [Error Message: ", responseObject.errorMessage, "]");
- }
- connected = false;
- }
- // called when a message arrives
- function onMessageArrived(message) {
- logMessage("INFO", "Message Recieved: [Topic: ", message.destinationName, ", Payload: ", message.payloadString, ", QoS: ", message.qos, ", Retained: ", message.retained, ", Duplicate: ", message.duplicate, "]");
- var messageTime = new Date().toISOString();
- // Insert into History Table
- var table = document.getElementById("incomingMessageTable").getElementsByTagName("tbody")[0];
- var row = table.insertRow(0);
- row.insertCell(0).innerHTML = message.destinationName;
- row.insertCell(1).innerHTML = safeTagsRegex(message.payloadString);
- row.insertCell(2).innerHTML = messageTime;
- row.insertCell(3).innerHTML = message.qos;
- if (!document.getElementById(message.destinationName)) {
- var lastMessageTable = document.getElementById("lastMessageTable").getElementsByTagName("tbody")[0];
- var newlastMessageRow = lastMessageTable.insertRow(0);
- newlastMessageRow.id = message.destinationName;
- newlastMessageRow.insertCell(0).innerHTML = message.destinationName;
- newlastMessageRow.insertCell(1).innerHTML = safeTagsRegex(message.payloadString);
- newlastMessageRow.insertCell(2).innerHTML = messageTime;
- newlastMessageRow.insertCell(3).innerHTML = message.qos;
- } else {
- // Update Last Message Table
- var lastMessageRow = document.getElementById(message.destinationName);
- lastMessageRow.id = message.destinationName;
- lastMessageRow.cells[0].innerHTML = message.destinationName;
- lastMessageRow.cells[1].innerHTML = safeTagsRegex(message.payloadString);
- lastMessageRow.cells[2].innerHTML = messageTime;
- lastMessageRow.cells[3].innerHTML = message.qos;
- }
- }
- function connectionToggle() {
- if (connected) {
- disconnect();
- } else {
- connect();
- }
- }
- function connect() {
- var hostname = document.getElementById("hostInput").value;
- var port = document.getElementById("portInput").value;
- var clientId = document.getElementById("clientIdInput").value;
- var path = document.getElementById("pathInput").value;
- var user = document.getElementById("userInput").value;
- var pass = document.getElementById("passInput").value;
- var keepAlive = Number(document.getElementById("keepAliveInput").value);
- var timeout = Number(document.getElementById("timeoutInput").value);
- var tls = document.getElementById("tlsInput").checked;
- var automaticReconnect = document.getElementById("automaticReconnectInput").checked;
- var cleanSession = document.getElementById("cleanSessionInput").checked;
- var lastWillTopic = document.getElementById("lwtInput").value;
- var lastWillQos = Number(document.getElementById("lwQosInput").value);
- var lastWillRetain = document.getElementById("lwRetainInput").checked;
- var lastWillMessageVal = document.getElementById("lwMInput").value;
- if (path.length > 0) {
- client = new Paho.Client(hostname, Number(port), path, clientId);
- } else {
- client = new Paho.Client(hostname, Number(port), clientId);
- }
- logMessage("INFO", "Connecting to Server: [Host: ", hostname, ", Port: ", port, ", Path: ", client.path, ", ID: ", clientId, "]");
- // set callback handlers
- client.onConnectionLost = onConnectionLost;
- client.onMessageArrived = onMessageArrived;
- client.onConnected = onConnected;
- var options = {
- invocationContext: { host: hostname, port: port, path: client.path, clientId: clientId },
- timeout: timeout,
- keepAliveInterval: keepAlive,
- cleanSession: cleanSession,
- useSSL: tls,
- reconnect: automaticReconnect,
- onSuccess: onConnect,
- onFailure: onFail
- };
- if (user.length > 0) {
- options.userName = user;
- }
- if (pass.length > 0) {
- options.password = pass;
- }
- if (lastWillTopic.length > 0) {
- var lastWillMessage = new Paho.Message(lastWillMessageVal);
- lastWillMessage.destinationName = lastWillTopic;
- lastWillMessage.qos = lastWillQos;
- lastWillMessage.retained = lastWillRetain;
- options.willMessage = lastWillMessage;
- }
- // connect the client
- client.connect(options);
- var statusSpan = document.getElementById("connectionStatus");
- statusSpan.innerHTML = "Connecting...";
- }
- function disconnect() {
- logMessage("INFO", "Disconnecting from Server.");
- client.disconnect();
- var statusSpan = document.getElementById("connectionStatus");
- statusSpan.innerHTML = "Connection - Disconnected.";
- connected = false;
- setFormEnabledState(false);
- }
- // Sets various form controls to either enabled or disabled
- function setFormEnabledState(enabled) {
- // Connection Panel Elements
- if (enabled) {
- document.getElementById("clientConnectButton").innerHTML = "Disconnect";
- } else {
- document.getElementById("clientConnectButton").innerHTML = "Connect";
- }
- document.getElementById("hostInput").disabled = enabled;
- document.getElementById("portInput").disabled = enabled;
- document.getElementById("clientIdInput").disabled = enabled;
- document.getElementById("pathInput").disabled = enabled;
- document.getElementById("userInput").disabled = enabled;
- document.getElementById("passInput").disabled = enabled;
- document.getElementById("keepAliveInput").disabled = enabled;
- document.getElementById("timeoutInput").disabled = enabled;
- document.getElementById("tlsInput").disabled = enabled;
- document.getElementById("automaticReconnectInput").disabled = enabled;
- document.getElementById("cleanSessionInput").disabled = enabled;
- document.getElementById("lwtInput").disabled = enabled;
- document.getElementById("lwQosInput").disabled = enabled;
- document.getElementById("lwRetainInput").disabled = enabled;
- document.getElementById("lwMInput").disabled = enabled;
- // Publish Panel Elements
- document.getElementById("publishTopicInput").disabled = !enabled;
- document.getElementById("publishQosInput").disabled = !enabled;
- document.getElementById("publishMessageInput").disabled = !enabled;
- document.getElementById("publishButton").disabled = !enabled;
- document.getElementById("publishRetainInput").disabled = !enabled;
- // Subscription Panel Elements
- document.getElementById("subscribeTopicInput").disabled = !enabled;
- document.getElementById("subscribeQosInput").disabled = !enabled;
- document.getElementById("subscribeButton").disabled = !enabled;
- document.getElementById("unsubscribeButton").disabled = !enabled;
- }
- function publish() {
- var topic = document.getElementById("publishTopicInput").value;
- var qos = document.getElementById("publishQosInput").value;
- var message = document.getElementById("publishMessageInput").value;
- var retain = document.getElementById("publishRetainInput").checked;
- logMessage("INFO", "Publishing Message: [Topic: ", topic, ", Payload: ", message, ", QoS: ", qos, ", Retain: ", retain, "]");
- message = new Paho.Message(message);
- message.destinationName = topic;
- message.qos = Number(qos);
- message.retained = retain;
- client.send(message);
- }
- function subscribe() {
- var topic = document.getElementById("subscribeTopicInput").value;
- var qos = document.getElementById("subscribeQosInput").value;
- logMessage("INFO", "Subscribing to: [Topic: ", topic, ", QoS: ", qos, "]");
- client.subscribe(topic, { qos: Number(qos) });
- }
- function unsubscribe() {
- var topic = document.getElementById("subscribeTopicInput").value;
- logMessage("INFO", "Unsubscribing: [Topic: ", topic, "]");
- client.unsubscribe(topic, {
- onSuccess: unsubscribeSuccess,
- onFailure: unsubscribeFailure,
- invocationContext: { topic: topic }
- });
- }
- function unsubscribeSuccess(context) {
- logMessage("INFO", "Unsubscribed. [Topic: ", context.invocationContext.topic, "]");
- }
- function unsubscribeFailure(context) {
- logMessage("ERROR", "Failed to unsubscribe. [Topic: ", context.invocationContext.topic, ", Error: ", context.errorMessage, "]");
- }
- function clearHistory() {
- var table = document.getElementById("incomingMessageTable");
- //or use : var table = document.all.tableid;
- for (var i = table.rows.length - 1; i > 0; i--) {
- table.deleteRow(i);
- }
- }
- // Just in case someone sends html
- function safeTagsRegex(str) {
- return str.replace(/&/g, "&").replace(/</g, "<").
- replace(/>/g, ">");
- }
- function makeid() {
- var text = "";
- var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
- for (var i = 0; i < 5; i++)
- text += possible.charAt(Math.floor(Math.random() * possible.length));
- return text;
- }
- function logMessage(type, ...content) {
- var consolePre = document.getElementById("consolePre");
- var date = new Date();
- var timeString = date.toUTCString();
- var logMessage = timeString + " - " + type + " - " + content.join("");
- consolePre.innerHTML += logMessage + "n";
- if (type === "INFO") {
- console.info(logMessage);
- } else if (type === "ERROR") {
- console.error(logMessage);
- } else {
- console.log(logMessage);
- }
- }
- /**
- * Copyright 2013 dc-square GmbH
- *
- * Licensed 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.
- *
- * @author: Christoph Schäbel
- */
- var websocketclient = {
- 'client': null,
- 'lastMessageId': 1,
- 'lastSubId': 1,
- 'subscriptions': [],
- 'messages': [],
- 'connected': false,
- 'connect': function () {
- var host = $('#urlInput').val();
- var port = parseInt($('#portInput').val(), 10);
- var clientId = $('#clientIdInput').val();
- var username = $('#userInput').val();
- var password = $('#pwInput').val();
- var keepAlive = parseInt($('#keepAliveInput').val());
- var cleanSession = $('#cleanSessionInput').is(':checked');
- var lwTopic = $('#lwTopicInput').val();
- var lwQos = parseInt($('#lwQosInput').val());
- var lwRetain = $('#LWRInput').is(':checked');
- var lwMessage = $('#LWMInput').val();
- var ssl = $('#sslInput').is(':checked');
- this.client = new Messaging.Client(host, port, clientId);
- this.client.onConnectionLost = this.onConnectionLost;
- this.client.onMessageArrived = this.onMessageArrived;
- var options = {
- timeout: 3,
- keepAliveInterval: keepAlive,
- cleanSession: cleanSession,
- useSSL: ssl,
- onSuccess: this.onConnect,
- onFailure: this.onFail
- };
- if (username.length > 0) {
- options.userName = username;
- }
- if (password.length > 0) {
- options.password = password;
- }
- if (lwTopic.length > 0) {
- var willmsg = new Messaging.Message(lwMessage);
- willmsg.qos = lwQos;
- willmsg.destinationName = lwTopic;
- willmsg.retained = lwRetain;
- options.willMessage = willmsg;
- }
- this.client.connect(options);
- },
- 'onConnect': function () {
- websocketclient.connected = true;
- console.log("connected");
- var body = $('body').addClass('connected').removeClass('notconnected').removeClass('connectionbroke');
- websocketclient.render.hide('conni');
- websocketclient.render.show('publish');
- websocketclient.render.show('sub');
- websocketclient.render.show('messages');
- },
- 'onFail': function (message) {
- websocketclient.connected = false;
- console.log("error: " + message.errorMessage);
- websocketclient.render.showError('Connect failed: ' + message.errorMessage);
- },
- 'onConnectionLost': function (responseObject) {
- websocketclient.connected = false;
- if (responseObject.errorCode !== 0) {
- console.log("onConnectionLost:" + responseObject.errorMessage);
- }
- $('body.connected').removeClass('connected').addClass('notconnected').addClass('connectionbroke');
- websocketclient.render.show('conni');
- websocketclient.render.hide('publish');
- websocketclient.render.hide('sub');
- websocketclient.render.hide('messages');
- //Cleanup messages
- websocketclient.messages = [];
- websocketclient.render.clearMessages();
- //Cleanup subscriptions
- websocketclient.subscriptions = [];
- websocketclient.render.clearSubscriptions();
- },
- 'onMessageArrived': function (message) {
- // console.log("onMessageArrived:" + message.payloadString + " qos: " + message.qos);
- var subscription = websocketclient.getSubscriptionForTopic(message.destinationName);
- var messageObj = {
- 'topic': message.destinationName,
- 'retained': message.retained,
- 'qos': message.qos,
- 'payload': message.payloadString,
- 'timestamp': moment(),
- 'subscriptionId': subscription.id,
- 'color': websocketclient.getColorForSubscription(subscription.id)
- };
- console.log(messageObj);
- messageObj.id = websocketclient.render.message(messageObj);
- websocketclient.messages.push(messageObj);
- },
- 'disconnect': function () {
- this.client.disconnect();
- },
- 'publish': function (topic, payload, qos, retain) {
- if (!websocketclient.connected) {
- websocketclient.render.showError("Not connected");
- return false;
- }
- var message = new Messaging.Message(payload);
- message.destinationName = topic;
- message.qos = qos;
- message.retained = retain;
- this.client.send(message);
- },
- 'subscribe': function (topic, qosNr, color) {
- if (!websocketclient.connected) {
- websocketclient.render.showError("Not connected");
- return false;
- }
- if (topic.length < 1) {
- websocketclient.render.showError("Topic cannot be empty");
- return false;
- }
- if (_.find(this.subscriptions, { 'topic': topic })) {
- websocketclient.render.showError('You are already subscribed to this topic');
- return false;
- }
- this.client.subscribe(topic, {qos: qosNr});
- if (color.length < 1) {
- color = '999999';
- }
- var subscription = {'topic': topic, 'qos': qosNr, 'color': color};
- subscription.id = websocketclient.render.subscription(subscription);
- this.subscriptions.push(subscription);
- return true;
- },
- 'unsubscribe': function (id) {
- var subs = _.find(websocketclient.subscriptions, {'id': id});
- this.client.unsubscribe(subs.topic);
- websocketclient.subscriptions = _.filter(websocketclient.subscriptions, function (item) {
- return item.id != id;
- });
- websocketclient.render.removeSubscriptionsMessages(id);
- },
- 'deleteSubscription': function (id) {
- var elem = $("#sub" + id);
- if (confirm('Are you sure ?')) {
- elem.remove();
- this.unsubscribe(id);
- }
- },
- 'getRandomColor': function () {
- var r = (Math.round(Math.random() * 255)).toString(16);
- var g = (Math.round(Math.random() * 255)).toString(16);
- var b = (Math.round(Math.random() * 255)).toString(16);
- return r + g + b;
- },
- 'getSubscriptionForTopic': function (topic) {
- var i;
- for (i = 0; i < this.subscriptions.length; i++) {
- if (this.compareTopics(topic, this.subscriptions[i].topic)) {
- return this.subscriptions[i];
- }
- }
- return false;
- },
- 'getColorForPublishTopic': function (topic) {
- var id = this.getSubscriptionForTopic(topic);
- return this.getColorForSubscription(id);
- },
- 'getColorForSubscription': function (id) {
- try {
- if (!id) {
- return '99999';
- }
- var sub = _.find(this.subscriptions, { 'id': id });
- if (!sub) {
- return '999999';
- } else {
- return sub.color;
- }
- } catch (e) {
- return '999999';
- }
- },
- 'compareTopics': function (topic, subTopic) {
- var pattern = subTopic.replace("+", "(.*?)").replace("#", "(.*)");
- var regex = new RegExp("^" + pattern + "$");
- return regex.test(topic);
- },
- 'render': {
- 'showError': function (message) {
- alert(message);
- },
- 'messages': function () {
- websocketclient.render.clearMessages();
- _.forEach(websocketclient.messages, function (message) {
- message.id = websocketclient.render.message(message);
- });
- },
- 'message': function (message) {
- var largest = websocketclient.lastMessageId++;
- var html = '<li class="messLine id="' + largest + '">' +
- ' <div class="row large-12 mess' + largest + '" style="border-left: solid 10px #' + message.color + '; ">' +
- ' <div class="large-12 columns messageText">' +
- ' <div class="large-3 columns date">' + message.timestamp.format("YYYY-MM-DD HH:mm:ss") + '</div>' +
- ' <div class="large-5 columns topicM truncate" id="topicM' + largest + '" title="' + Encoder.htmlEncode(message.topic, 0) + '">Topic: ' + Encoder.htmlEncode(message.topic) + '</div>' +
- ' <div class="large-2 columns qos">Qos: ' + message.qos + '</div>' +
- ' <div class="large-2 columns retain">';
- if (message.retained) {
- html += 'Retained';
- }
- html += ' </div>' +
- ' <div class="large-12 columns message break-words">' + Encoder.htmlEncode(message.payload) + '</div>' +
- ' </div>' +
- ' </div>' +
- '</li>';
- $("#messEdit").prepend(html);
- return largest;
- },
- 'subscriptions': function () {
- websocketclient.render.clearSubscriptions();
- _.forEach(websocketclient.subscriptions, function (subs) {
- subs.id = websocketclient.render.subscription(subs);
- });
- },
- 'subscription': function (subscription) {
- var largest = websocketclient.lastSubId++;
- $("#innerEdit").append(
- '<li class="subLine" id="sub' + largest + '">' +
- ' <div class="row large-12 subs' + largest + '" style="border-left: solid 10px #' + subscription.color + '; background-color: #ffffff">' +
- ' <div class="large-12 columns subText">' +
- ' <div class="large-1 columns right closer">' +
- ' <a href="#" onclick="websocketclient.deleteSubscription(' + largest + '); return false;">x</a>' +
- ' </div>' +
- ' <div class="qos">Qos: ' + subscription.qos + '</div>' +
- ' <div class="topic truncate" id="topic' + largest + '" title="' + Encoder.htmlEncode(subscription.topic, 0) + '">' + Encoder.htmlEncode(subscription.topic) + '</div>' +
- ' </div>' +
- ' </div>' +
- '</li>');
- return largest;
- },
- 'toggleAll': function () {
- websocketclient.render.toggle('conni');
- websocketclient.render.toggle('publish');
- websocketclient.render.toggle('messages');
- websocketclient.render.toggle('sub');
- },
- 'toggle': function (name) {
- $('.' + name + 'Arrow').toggleClass("closed");
- $('.' + name + 'Top').toggleClass("closed");
- var elem = $('#' + name + 'Main');
- elem.slideToggle();
- },
- 'hide': function (name) {
- $('.' + name + 'Arrow').addClass("closed");
- $('.' + name + 'Top').addClass("closed");
- var elem = $('#' + name + 'Main');
- elem.slideUp();
- },
- 'show': function (name) {
- $('.' + name + 'Arrow').removeClass("closed");
- $('.' + name + 'Top').removeClass("closed");
- var elem = $('#' + name + 'Main');
- elem.slideDown();
- },
- 'removeSubscriptionsMessages': function (id) {
- websocketclient.messages = _.filter(websocketclient.messages, function (item) {
- return item.subscriptionId != id;
- });
- websocketclient.render.messages();
- },
- 'clearMessages': function () {
- $("#messEdit").empty();
- },
- 'clearSubscriptions': function () {
- $("#innerEdit").empty();
- }
- }
- };
Add Comment
Please, Sign In to add comment