zoukankan      html  css  js  c++  java
  • 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>
    

      

  • 相关阅读:
    UDP通信网络编程
    多线程:购票小案例
    多线程:线程池异步计算,2个线程,1个计算10的阶乘,一个计算20的阶乘并返回
    Kong入门指南
    5分钟完成App后端API开发
    Docker安装Kong
    React Native如何用调用RestFul API
    Flutter如何用调用RestFul API
    如何用Flutter调用生成的RestFul API
    自动化API之一 生成开源ERP Odoo App 的RestFul API
  • 原文地址:https://www.cnblogs.com/BlingSun/p/8981063.html
Copyright © 2011-2022 走看看