web客户端页面连接MQTT服务

首先搭建好EMQX (MQTT)服务，在前面有说到如何搭建EMQX；MQTT本身就支持WebSocket 访问
MQTT客户端可以后端去开发也可以在页面快速做MQTT客户端

这里先展示页面如何快速做客户端

引用jQuery及mqtt.js

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/mqtt/4.1.0/mqtt.min.js"></script>

    <script>
        console.log(mqtt);
        // 连接地址，有很多连接失败都是因为地址没写对
        const connectUrl = `ws://localhost:8083/mqtt`;
        // 客户端ID 随机数以免重复
        const clientId = `mqtt_${Math.random().toString(16).slice(3)}`;
        console.log("客户端id：" + clientId);

        // 连接设置
        let options = {
            clean: true,	        // 保留会话
            connectTimeout: 4000,	// 超时时间
            reconnectPeriod: 1000,	// 重连时间间隔
            // 认证信息
            clientId,
            username: 'admin',
            password: 'admints',
        }
        // 需要订阅的主题
        const topic = 'esp8266';
        const topic1 = 'tes';

        // 创建客户端
        var client = mqtt.connect(connectUrl, options);

        // 成功连接后触发的回调
        client.on('connect', () => {
            $("#ts").html("在线");
            console.log('已经连接成功');
            // 订阅主题，这里可以订阅多个主题
            client.subscribe([topic, topic1], () => {
                console.log(`订阅了主题 ${[topic, topic1].join('和')}`)
            })
        });

        // 当客户端收到一个发布过来的消息时触发回调
        /**
            * topic：收到的报文的topic
            * message：收到的数据包的负载playload
            * packet：MQTT 报文信息，其中包含 QoS、retain 等信息
            */
        client.on('message', function (topic, message, packet) {
            // 这里有可能拿到的数据格式是Uint8Array格式，可以直接用toString转成字符串
            // let data = JSON.parse(message.toString());
            console.log("获取到的数据：", message)
            console.log("数据对应订阅主题：", topic)
            console.log("获取到的数据包：", packet)
            var message_packet = JSON.parse(Uint8ArrayToString(packet.payload));
            message_packet.msg;
        });

        // 当重新连接启动触发回调 
        client.on('reconnect', () => {
            $("#ts").html("重连");
            console.log("正在重新连接")
        });

        // 连接断开后触发的回调 
        client.on("close", function () {
            $("#ts").html("离线");
            console.log("已断开连接")
        });

        // 在收到 Broker（消息服务器） 发送过来的断开连接的报文时触发的回调，参数 packet 即为断开连接时接收到的报文。MQTT 5.0特性 
        client.on("disconnect", function (packet) {
            console.log("从broker接收到断开连接的报文：" + packet);
        });

        // 客户端脱机下线触发回调 
        client.on("offline", function () {
            console.log("您已断开连接，请检查网络")
        });

        // 当客户端无法成功连接时或发生解析错误时触发的回调，参数 error 为错误信息
        client.on("error", (error) => {
            console.log("客户端出现错误：", error);
        });

        //当客户端发送任何数据包时发出。这包括publish()以及MQTT用于管理订阅和连接的包 
        client.on("packetsend", (packet) => {
            console.log("客户端已发出报文", packet);
        });

        //当客户端接收到任何报文时发出。这包括来自订阅主题的信息包以及MQTT用于管理订阅和连接的信息 
        client.on("packetreceive", (packet) => {
            // 会在 client.on('message', function (topic, message, packet) {}); 之前触发
            console.log("客户端接收报文", packet);
        });


        // 关闭客户端（断开连接）
        //client.end();

        // 发送信息给 topic（主题）
        //client.publish(topic, '这是给topic发送的信息');

        //var topic_data=[];
        //topic_data.push(map)
        function Uint8ArrayToString(fileData) {
            var dataString = "";
            for (var i = 0; i < fileData.length; i++) {
                dataString += String.fromCharCode(fileData[i]);
            }
            return dataString
        }
</script>        

 // 关闭客户端（断开连接）
client.end();
// 发送信息给 topic（主题）
client.publish(topic, '这是给topic发送的信息');