• 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>
    

      

  • 相关阅读:
    How to convert VirtualBox vdi to KVM qcow2
    (OK)(OK) adb -s emulator-5554 shell
    (OK)(OK) using adb with a NAT'ed VM
    (OK) How to access a NAT guest from host with VirtualBox
    (OK) Creating manually one VMs from an existing VDI file in CLI (VBoxManage) in Fedora 23
    (OK)(OK) Creating VMs from an existing VDI file in CLI (VBoxManage) in Fedora 23
    (OK) Creating_VMs_from_an_existing_VDI_file.txt
    (OK) Creating VMs from an existing VDI file —— in OS X
    (OK) install_IBM_SERVER.txt
    (OK) install chrome & busybox in android-x86_64 —— uninstall chrome
  • 原文地址:https://www.cnblogs.com/BlingSun/p/8981063.html
Copyright © 2020-2023  润新知