目前几个主流的推送协议主要有mqtt，xmpp而其中xmpp协议由于其出现时间久远，其协议的完善程度远高于mqtt协议。因此一度成为推送协议的主流协议。但是随着社会的发展，无线通信以及嵌入式领域的兴起，xmpp协议这种字符通信协议就渐渐失去了他的优势。

        mqtt作为一个新型的推送协议，采用的是字节通信协议模式，其协议本身对带宽要求远远低于xmpp这种字符通信协议，因此在无线以及嵌入式领域这种弱网络环境下得到了很好的推广。

目前html5 app研发技术的成熟，越来越多的公司开发一套app会使用html5技术实现。因此html5技术也就越来越多的被使用与嵌入式领域与无线移动领域了。html5技术下使用mqtt通信也就成为了一个必须解决的问题。

       在mqtt协议的高版本中，已经实现了对html5技术中的websocket的支持。下面我就来告诉下大家如何实现这个功能。

首先我们打开javascript使用mqtt插件的官网网站链接，这个是对应的文档链接。根据mqtt协议的特点，如果想要接收到mqtt的请求，需要保证几个属性正确，分别是ip，端口，mqtt接入用户名，mqtt接入密码，topic。同时还需要保证所有接入mqtt服务器的clientid都不相同，否则将会有机会挤掉之前用相同clientid登录的用户。

1.首先建立mqtt类的对象。(注意这里仅仅是建立类的对象，还没有做任何连接操作)

client = new Paho.MQTT.Client(ip, Number(9001), clientid);//第一个参数是mqtt服务器ip，第二个参数是mqtt服务的端口，第三个参数是自己的clientid。

2.然后发起连接

var option = {
    onSuccess:function() {
        console.log("onConnected");
    },
    onFailure:function() {
        console.log("onFailConnect");
    },
    userName:'chazuo',
    password:'worldflying'
};
client.connect(option);

大家可以看到上面那段代码，是先设置一个参数，然后执行连接函数的。参数是一个javascript的对象，对象中有几个参数：

onSuccess对应的值是一个函数，是当连接成功后执行的回调函数。

onFailure对应的值是也个函数，是当连接失败后执行的回调函数。

userName是字符串类型，是mqtt的接入用户名。

password也是字符串类型，是mqtt的接入密码。

这个参数中还有一些其他参数，如：

useSSL：这是个布尔型变量，默认为false，如果设置成true，连接将会使用wss协议。

timeout：这个是设置连接服务器的超时时间的，默认为30s。

keepAliveInterval：这个是设置发送mqtt心跳包的频率，默认为60s。

3.如果连接成功，我们就可以继续往下做，设置当接收到消息后的消息处理函数以及如果出现异常掉线所需要处理的事件处理函数。

消息处理函数

client.onMessageArrived = function(message) {
    var topic = message.destinationName;
    var msg = message.payloadString;
    console.log("接收到消息：");
    console.log("接收到消息的topic为：" + topic);
    console.log("接收到的消息为：" + msg);
}

断线异常处理函数

client.onConnectionLost = function(responseObject) {
    if(responseObject.errorCode !== 0) {
        console.log("异常掉线，掉线信息为:"+responseObject.errorMessage);
    }
}

通常这个函数里会执行一个警告或是断线重连。