js能订阅mq吗_网页端HTML使用MQTTJs订阅RabbitＭＱ数据

Host:

Port:

UserName:

Password:

Protocol:

路由:

log:

$(function () {

var mqclient;

//var routingKey = 'Dcon.Logs.ServerWebShow';

var message;

$('#btnSubscribe').attr('disabled', 'disabled');

$('#btnPublish').attr('disabled', 'disabled');

$('#btnSSHuanjing').attr('disabled', 'disabled');

$('#btnPubHuanjing').attr('disabled', 'disabled');

$('#btnConnect').click(function () {

var mqttOpts = {

host: (() => $('#txtHost').val())(),

port: (() => $('#txtPort').val())(),

username: (() => $('#txtUserName').val())(),

password: (() => $('#txtPassword').val())(),

//transformWsUrl方法用于在浏览器中使用MQTT的场景，默认情况下,MQTT自动生成的url为ws://ip:port形式，

//然而服务器要求的格式是ws://ip:port/ws，所以MQTT提供了此接口用于在生成url时自定义url格式

transformWsUrl: (url, opts, client) => { return opts.protocol && opts.protocol == 'ws' ? url + 'ws' : url; },

clientId: (() => { return 'mqttjs_' + Math.random().toString(16).substr(2, 8); })()

};

var biz = {

huanjing: function (handler, isOn) {

if (isOn !== false) {

this.ss(this.topics.huanjing, handler);

} else {

this.sus(this.topics.huanjing, handler);

}

},

topics: {

huanjing: '/hyj/huanjing/monitor'

}

};

//系统初始化时注入连接选项

mqfactory.inject(mqttOpts, biz);

//创建mqclient单例

mqclient = mqfactory.create();

//注册mqclient的连接成功事件

mqclient.on('connect', mqconnected);

});

$('#btnSubscribe').click(function () {

if ($(this).val() == 'Subscribe') {

//订阅成功后，仅注册一次事件(要考虑每次注册事件时，事件处理器调用的次数，如果仅用一次，就用once方法)

//routingKey = $("#btnRoutingKey").val();

mqclient.once('onss', mqSubscribeSuccess);

//简单订阅

mqclient.ss($("#btnRoutingKey").val());

} else {

mqclient.once('onsus', mqUnsubscribeSuccess)

mqclient.sus($("#btnRoutingKey").val());

}

});

$('#btnPublish').click(function () {

var msg = $('#txtMessage').val().length > 0 ? $('#txtMessage').val() : guid();

if (message === msg) {

msg = guid();

}

message = msg;

$('#txtMessage').val(message);

//发送消息

mqclient.pub($("#btnRoutingKey").val(), message);

$('#lstLog').append('

Send Message: ' + message + '');

});

$('#btnSSHuanjing').click(function () {

if ($(this).val() == 'Subscribe Huanjing') {

mqclient.once('onss', mqHJSubscribeSuccess);

mqclient.huanjing(onHuanjingMessageArrived);

} else {

mqclient.once('onsus', mqHJUnsubscribeSuccess);

mqclient.huanjing(onHuanjingMessageArrived, false);

}

});

$('#btnPubHuanjing').click(function () {

var msg = $('#txtMessage').val().length > 0 ? $('#txtMessage').val() : guid();

if (message === msg) {

msg = guid();

}

message = msg;

$('#txtMessage').val(message);

//发送消息

mqclient.pub(mqclient.topics.huanjing, message);

$('#lstLog').append('

Send Huanjing Message: ' + message + '');

});

$('#btnClearLog').click(function () {

$('#lstLog').empty();

});

function mqconnected() {

//alert("mqconnected");

$('#btnSubscribe').removeAttr('disabled');

$('#btnPublish').removeAttr('disabled');

$('#btnSSHuanjing').removeAttr('disabled');

$('#btnPubHuanjing').removeAttr('disabled');

$('#lstLog').append('

mqclient connected');

}

function mqSubscribeSuccess() {

//订阅成功，就注册接受消息的方法，此处要接收多次，因此使用了on

mqclient.on($("#btnRoutingKey").val(), onMessageArrived);

$('#btnSubscribe').val('Unsubscribe');

$('#lstLog').append('

Subscribe successful.' + $("#btnRoutingKey").val()+'');

}

function mqUnsubscribeSuccess() {

//注销订阅，所以将事件处理器解除绑定

mqclient.off($("#btnRoutingKey").val(), onMessageArrived);

$('#btnSubscribe').val('Subscribe');

$('#lstLog').append('

Unsubscribe successful');

}

function mqHJSubscribeSuccess() {

$('#btnSSHuanjing').val('Unsubscribe Huanjing');

$('#lstLog').append('

Hanjing Subscribe successful');

}

function mqHJUnsubscribeSuccess() {

$('#btnSSHuanjing').val('Subscribe Huanjing');

$('#lstLog').append('

Huanjing Unsubscribe successful');

}

function onMessageArrived(message) {

$('#lstLog').append('

Receive message: ' + new Date().toString() + ' ' + message.toString() + '');

}

function onHuanjingMessageArrived(message) {

$('#lstLog').append('

Receive Huanjing message: ' + new Date().toString() + ' ' + message.toString() + '');

}

function guid() {

function s4() {

return Math.floor((1 + Math.random()) * 0x10000)

.toString(16)

.substring(1);

}

return s4() + s4() + '-' + s4() + '-' + s4() + '-' +

s4() + '-' + s4() + s4() + s4();

}

});