JingYun
/
ATY_LIB


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
							<!-- <body style="margin: 0 auto;">
    <div style="width: 500px;">服务器地址：<input style="float: right;width: 300px;" id="MQTT_ServerAdd"
            value="ws://www.passingworld.vip:8083/mqtt"></div>
    <div style="width: 500px;">心跳时间 ：<input style="float: right;width: 300px;"
            id="MQTT_ConnHeartbeatTime" value="30"></div>
    <div style="width: 500px;">用户名 ：<input style="float: right;width: 300px;" id="MQTT_UserName"
            value="admin"></div>
    <div style="width: 500px;">密码 ：<input style="float: right;width: 300px;" id="MQTT_PassWord"
            value="public"></div>

    <div>
        <button onclick="MQTT_Connect()">连接服务器</button>
    </div>

    <div style="margin-top: 20px;">
        订阅消息<input id="MQTT_Subscribe_Msg">
        QoS<select id="MQTT_Subscribe_QoS">
            <option>0_Almost_Once</option>
            <option>1_Atleast_Once</option>
            <option>2_Exactly_Once</option>
        </select>
        <button onclick="Add_MQTT_Subscribe()">添加订阅信息</button>
    </div>

    <div style="margin-top: 20px;">
        订阅列表
    </div>
    <div>
        <table style="padding: 1px;width: 700px;margin-top: 5px;" border="1">
            <tr style="background-color: #919191;">
                <td>订阅消息</td>
                <td>QoS</td>
                <td>操作</td>
            </tr>
        </table>
    </div>
    <div style="margin-top: 20px;">
        接收消息
    </div>
    <div>
        <textarea id="textareaid" rows="5" cols="30" class="message1"
            style="width: 100%;height: 300px; min-height: 100px;"></textarea>
    </div>
    <div>
        发布点：<input id="MQTT_Publish_Text">
        发布消息：<input id="MQTT_Publish_Msg">
        <button onclick="Send_MQTT_Msg()">发送消息</button>
    </div>
</body>


<script>
    function MQTT_Connect(serveradd, KeepAlive, UserName, PassWord) {
        //MQTT连接的配置
        MQTT_Options: {
            protocolVersion: 4; //MQTT连接协议版本
            clientId: 'miniTest22222';
            clean: false;
            keepalive: KeepAlive;
            password: UserName;
            username: PassWord;
            reconnectPeriod: 1000;			//1000毫秒，两次重新连接之间的间隔
            connectTimeout: 10 * 1000; 		//1000毫秒，两次重新连接之间的间隔
            resubscribe: true; //如果连接断开并重新连接，则会再次自动订阅已订阅的主题（默认true）
        };
        //开始连接
        MQTT_Client = mqtt.connect(serveradd, this.MQTT_Options);
        MQTT_Client.on('connect',
            function (connack) {
                console.log('MQTT连接成功')
            })
        //服务器下发消息的回调
        MQTT_Client.on("message", function (topic, payload) {
            console.log(" 收到 topic:" + topic + " , payload :" + payload)
            var str = document.getElementById("textareaid").value;
            document.getElementById("textareaid").value = str + "\n" + "收到 topic:" + topic + " , payload :" + payload;
        })
        //服务器连接异常的回调
        MQTT_Client.on("error", function (error) { console.log("MQTT Server Error 的回调" + error) })
        //服务器重连连接异常的回调
        MQTT_Client.on("reconnect", function () { console.log("MQTT Server Reconnect的回调") })
        //服务器连接异常的回调
        MQTT_Client.on("offline", function (errr) { console.log("MQTT Server Offline的回调" + errr) })
    };

    MQTT_SubOne = function (Topic) {
        var ok = false;
        if (MQTT_Client && MQTT_Client.connected) {
            MQTT_Client.subscribe(Topic, function (err, granted) {
                if (!err) {
                    console.log('订阅主题 ' + Topic + ' 成功')
                    ok = true;
                } else {
                    console.log('订阅主题 ' + Topic + ' 失败')
                    ok = false;
                }
            })
        } else {
            console.log('请先连接服务器')
            ok = false;
        }
        return ok;
    };

    function MQTT_SubMany() {
        if (MQTT_Client && MQTT_Client.connected) {
            MQTT_Client.subscribe({ 'Topic1': { qos: 0 }, 'Topic2': { qos: 1 } }, function (err, granted) {
                if (!err) {
                    console.log('订阅多主题成功')
                } else {
                    console.log('订阅多主题失败')
                }
            })
        } else {
            console.log('请先连接服务器')
        }
    };

    MQTT_PubMsg = function (Topic, Msg) {
        if (MQTT_Client && MQTT_Client.connected) {
            MQTT_Client.publish(Topic, Msg);
            console.log('发布成功->' + Topic + '->' + Msg)
        } else {
            console.log('请先连接服务器')
        }
    };

    function MQTT_UnSubOne(Topic) {
        if (MQTT_Client && MQTT_Client.connected) {
            MQTT_Client.unsubscribe(Topic);
        } else {
            console.log('请先连接服务器')
        }
    };

    function MQTT_unSubMany() {
        if (MQTT_Client && MQTT_Client.connected) {
            MQTT_Client.unsubscribe(['Topic1', 'Topic2']);
        } else {
            console.log('请先连接服务器')
        }
    };
</script> -->


<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
<script>
    const mqtt = require('mqtt')
    // import mqtt from 'mqtt'

    // 连接选项
    const options = {
        clean: true, // true: 清除会话, false: 保留会话
        connectTimeout: 4000, // 超时时间
        // 认证信息
        clientId: 'emqx_test_html',
        // username: 'emqx_test',
        // password: 'emqx_test',
    }


    const connectUrl = 'ws://emqx@127.0.0.1:8084/mqtt'
    const client = mqtt.connect(connectUrl, options)

    client.on('reconnect', (error) => {
        console.log('正在重连:', error)
    })

    client.on('error', (error) => {
        console.log('连接失败:', error)
    })

    client.on('message', (topic, message) => {
        console.log('收到消息：', topic, message.toString())
    })
</script>