MQTT是一种非常便捷的传输协议，我们经常用来做后台消息推送和接收，有时候我们需要在网页上做消息的推送和接收，要怎么搞呢？今天我们就来学习一下如何在html页面中使用MQTT。

首先我们引用js文件

<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>

var client;

var options = 
{
    timeout: 5,
    keepAliveInterval: 100,
    cleanSession: true,
    useSSL: false,
    userName: "MQTT账号",
    password: "MQTT密码",
    onSuccess: onConnect
};

client = new Paho.MQTT.Client("MQTT服务器IP或域名", MQTT服务器WebSocket端口号, MQTT客户端ID(最好加上时间戳，要不然后面运行的网页，如果使用相同的客户端ID，会把先运行的网页逼下线));
client.onConnectionLost = onConnectionLost;
client.onMessageArrived = onMessageArrived;
client.connect(options);

function onConnect()
{
    console.log("MQTT服务器连接成功！");

    client.subscribe("要订阅的主题);

    //向指定主题发布信息
    var message = new Paho.MQTT.Message("要发布的主题");
    message.destinationName = "要发布的消息内容";
    client.send(message);
}

function onConnectionLost(responseObject)
{
    if (responseObject.errorCode !== 0)
    {
        //如果两个网页使用了相同的客户端ID，那么先运行的网页会被后运行的网页挤下线，也会触发这个断开事件
        console.log("MQTT连接已断开：" + responseObject.errorMessage);
    }
}

function onMessageArrived(message)
{
    console.log("收到来自主题：" + message.destinationName + "的消息");
    console.log("收到的消息内容是：" + message.payloadString);
}