mqtt的浏览器端的简单使用

mqtt协议如果在浏览器使用的话，那么服务器端就需要建立mosca服务和http服务，浏览器页面的mqtt连接到http服务端口

服务器端：

方式一：

var mosca = require(\'mosca\');  
var MqttServer = new mosca.Server({  
    port: 2000,
    http: {
        port: 3006,
        bundle: true,
        static: \'./\'
        } 
}); 

  
MqttServer.on(\'clientConnected\', function(client){  
    console.log(\'client connected\', client.id);  
});  
  
/** 
 * 监听MQTT主题消息 
 **/  
MqttServer.on(\'published\', function(packet, client) {  
    var topic = packet.topic;  
    console.log(\'message-arrived--->\',\'topic =\'+topic+\',message = \'+ packet.payload.toString());  
   //MQTT转发主题消息
   //MqttServer.publish({topic: \'test\', payload: \'sssss\'});
});  
  
MqttServer.on(\'ready\', function(){  
    console.log(\'mqtt is running...\');  
    //MqttServer.authenticate = authenticate;  
});

　　方式二：

var http     = require(\'http\')
  , httpServ = http.createServer()
  , mosca    = require(\'mosca\')
  , mqttServ = new mosca.Server({port: 2000});

mqttServ.attachHttpServer(httpServ);

httpServ.listen(3006);
MqttServer.on(\'clientConnected\', function(client){  
    console.log(\'client connected\', client.id);  
});

　　浏览器客户端：//端口为http端口 mqtt://localhost:3006 和 ws://localhost:3006一样,

web页面没有其他要求，没有跨域问题

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <div>hello mqtt</div>
        <script src="../public/js/jquery-1.9.1.min.js"></script>
    
        <script src="../public/mqtt.min.js"></script>
        <script>
            ////端口为http端口 mqtt://localhost:3006 和 ws://localhost:3006一样
           var client  = mqtt.connect(\'ws://localhost:3006\',{  

            });  
 // you add a ws:// url here
  client.subscribe("mqtt/demo");
  client.on(\'connect\', function () {  
    console.log(\'connected.....\');  
    // client.subscribe(\'test/\');  
    // client.publish(\'app2dev/\', \'Hello mqtt\');  
});  
  client.on("message", function (topic, payload) {
    alert([topic, payload].join(": "));
    
  })
 
  client.publish("mqtt/demo", "hello world!");
  </script>
    </body>
</html>

秒客网

mqtt的浏览器端的简单使用

相关文章