MQTT Client测试工具

HTML5实现MQTT测试服务

MQTT HTML5

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 38190
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var client;

$(document).ready(function() {

$("#disconnectBtn").hide();
    $("#subscribe").hide();
    $("#connectBtn").show();

$("#clear").on('click', function() {

$("#mqtt-log").empty()
        log("Clear :)")
    })

$('#unsubscribeBtn').on('click', function() {

var topic = $("#mqtt-topic").val();
        if (topic < 1) {
            log('topic 不能为null')
            return
        }
        client.unsubscribe(topic);
        log('>>>退订topic = ' + topic)
    })

$('#subscribeBtn').on('click', function() {

var topic = $("#mqtt-topic").val();
        if (topic < 1) {
            log('topic 不能为null')
            return
        }
        client.subscribe(topic);
        log('>>>订阅topic = ' + topic)
    })
    $('#disconnectBtn').on('click', function() {

log('end.')
        client.end();
        $("#connectBtn").show();
        $(this).hide();
        $("#subscribe").hide();
    })

$('#connectBtn').on('click', function() {

var host = $("#mqtt-host").val();
        var port = $("#mqtt-port").val();
        var name = $("#mqtt-name").val();
        var Password = $("#mqtt-password").val();
        var clientId = $("#mqtt-clientId").val();

if (host.length < 1 || port < 1) {
            log('host和port不能为空...')
            return;
        }
        log('开始连接...')

$(this).hide();
        $("#disconnectBtn").show();
        $("#subscribe").show();

client = mqtt.connect('ws://' + host + ':' + port + '/mqtt', {
            username: name,
            password: Password,
            clientid: clientId
        });
        client.on('connect', function() {

log('connect :)')
                //client.subscribe('mytopic');
                //client.publish('mytopic', 'hello mqtt123');

$(this).hide();
            $("#disconnectBtn").show();
            $("#subscribe").show();
        });
        client.on("error", function(error) {

log(error.toString());
            $(this).show();
            $("#disconnectBtn").hide();
            $("#subscribe").hide();
        });
        client.on("message", function(topic, payload) {
            log('收到topic = ' + topic + ' 消息: ' + payload.toString());
            //alert([topic, payload].join(": "));
            //client.end();
        });

//client.publish("mytopic", "hello world!");
    })
});

function log(data) {

$('#mqtt-log').prepend('<p>' + data + '</p>');

}

编译

CSS

HTML

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>MQTT Debug</title>

<div class="well well-lg">MQTT Client</div>

<form class="form-inline">
        <div class="form-group">
            <label class="sr-only" for="mqtt-host">MQTT Host</label>
            <input type="text" class="form-control" id="mqtt-host" placeholder="MQTT Host">
        </div>
        <div class="form-group">
            <label class="sr-only" for="mqtt-port">MQTT Port</label>
            <input type="text" class="form-control" id="mqtt-port" placeholder="MQTT Port">
        </div>
        <div class="form-group">
            <label class="sr-only" for="mqtt-clientId">MQTT clientId</label>
            <input type="text" class="form-control" id="mqtt-clientId" placeholder="MQTT ClientId">
        </div>
        <div class="form-group">
            <label class="sr-only" for="mqtt-name">MQTT name</label>
            <input type="text" class="form-control" id="mqtt-name" placeholder="MQTT Name">
        </div>
        <div class="form-group">
            <label class="sr-only" for="mqtt-password">MQTT Pasword</label>
            <input type="password" class="form-control" id="mqtt-password" placeholder="MQTT Password">
        </div>
        <button type="button" class="btn btn-primary" id="connectBtn">连接</button>
        <button type="button" class="btn btn-danger" id="disconnectBtn">断开</button>

</form>

</form>
    </div>

<div class="panel panel-success" id="mqtt-log-containor">
        <div class="panel-heading">
            <span class="label label-info">日志</span>
            <span class="label label-danger"><button type="button" class="btn" id="clear">Clear</button></span>
        </div>
        <div class="panel-body" id="mqtt-log"></div>
    </div>

</div>

HTML5实现MQTT测试服务

MQTT HTML5

编辑器支持Emmet

快捷键

HTML5实现MQTT测试服务

MQTT HTML5

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：