js request data using mqtt

1. The introduction of mqtt js library address link https://blog.csdn.net/qq_28877125/article/details/78360170

<script src="./static/js/mqttws31.js" type="text/javascript"></script>

　　format error occurs, then the following js introduced, the problem is eliminated because ES6 format new Date () method, so the use of this dependence into js.

(function () {
  // Defining locale
  Date.shortMonths = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  Date.longMonths = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
  Date.shortDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
  Date.longDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
  // Defining patterns
  var replaceChars = {
    // Day
    d: function () { var d = this.getDate(); return (d < 10 ? '0' : '') + d },
    D: function () { return Date.shortDays[this.getDay()] },
    j: function () { return this.getDate() },
    l: function () { return Date.longDays[this.getDay()] },
    N: function () { var N = this.getDay(); return (N === 0 ? 7 : N) },
    S: function () { var S = this.getDate(); return (S % 10 === 1 && S !== 11 ? 'st' : (S % 10 === 2 && S !== 12 ? 'nd' : (S % 10 === 3 && S !== 13 ? 'rd' : 'th'))) },
    w: function () { return this.getDay() },
    z: function () { var d = new Date(this.getFullYear(), 0, 1); return Math.ceil((this - d) / 86400000) },
    // Week
    W: function () {
      var target = new Date(this.valueOf())
      var dayNr = (this.getDay() + 6) % 7
      target.setDate(target.getDate() - dayNr + 3)
      var firstThursday = target.valueOf()
      target.setMonth(0, 1)
      if (target.getDay() !== 4) {
        target.setMonth(0, 1 + ((4 - target.getDay()) + 7) % 7)
      }
      var retVal = 1 + Math.ceil((firstThursday - target) / 604800000)

      return (retVal < 10 ? '0' + retVal : retVal)
    },
    // Month
    F: function () { return Date.longMonths[this.getMonth()] },
    m: function () { var m = this.getMonth(); return (m < 9 ? '0' : '') + (m + 1) },
    M: function () { return Date.shortMonths[this.getMonth()] },
    n: function () { return this.getMonth() + 1 },
    t: function () {
      var year = this.getFullYear()
      var nextMonth = this.getMonth() + 1
      if (nextMonth === 12) {
        year = year++
        nextMonth = 0
      }
      return new Date(year, nextMonth, 0).getDate()
    },
    // Year
    L: function () { var L = this.getFullYear(); return (L % 400 === 0 || (L % 100 !== 0 && L % 4 === 0)) },
    o: function () { var d = new Date(this.valueOf()); d.setDate(d.getDate() - ((this.getDay() + 6) % 7) + 3); return d.getFullYear() },
    Y: function () { return this.getFullYear() },
    y: function () { return ('' + this.getFullYear()).substr(2) },
    // Time
    a: function () { return this.getHours() < 12 ? 'am' : 'pm' },
    A: function () { return this.getHours() < 12 ? 'AM' : 'PM' },
    B: function () { return Math.floor((((this.getUTCHours() + 1) % 24) + this.getUTCMinutes() / 60 + this.getUTCSeconds() / 3600) * 1000 / 24) },
    g: function () { return this.getHours() % 12 || 12 },
    G: function () { return this.getHours() },
    h: function () { var h = this.getHours(); return ((h % 12 || 12) < 10 ? '0' : '') + (h % 12 || 12) },
    H: function () { var H = this.getHours(); return (H < 10 ? '0' : '') + H },
    i: function () { var i = this.getMinutes(); return (i < 10 ? '0' : '') + i },
    s: function () { var s = this.getSeconds(); return (s < 10 ? '0' : '') + s },
    v: function () { var v = this.getMilliseconds(); return (v < 10 ? '00' : (v < 100 ? '0' : '')) + v },
    // Timezone
    e: function () { return Intl.DateTimeFormat().resolvedOptions().timeZone },
    I:were() {
      function DST = null
      for (var i = 0; i < 12; ++i) {
        var d = new Date(this.getFullYear(), i, 1)
        var offset = d.getTimezoneOffset()

        if (DST === null) DST = offset
        else if (offset < DST) { DST = offset; break } else if (offset > DST) break
      }
      return (this.getTimezoneOffset() === DST) | 0
    },
    O: function () { var O = this.getTimezoneOffset(); return (-O < 0 ? '-' : '+') + (Math.abs(O / 60) < 10 ? '0' : '') + Math.floor(Math.abs(O / 60)) + (Math.abs(O % 60) === 0 ? '00' : ((Math.abs(O % 60) < 10 ? '0' : '')) + (Math.abs(O % 60))) },
    P: function () { var P = this.getTimezoneOffset(); return (-P < 0 ? '-' : '+') + (Math.abs(P / 60) < 10 ? '0' : '') + Math.floor(Math.abs(P / 60)) + ':' + (Math.abs(P % 60) === 0 ? '00' : ((Math.abs(P % 60) < 10 ? '0' : '')) + (Math.abs(P % 60))) },
    T: function () { var tz = this.toLocaleTimeString(navigator.language, {timeZoneName: 'short'}).split(' '); return tz[tz.length - 1] },
    Z: function () { return -this.getTimezoneOffset() * 60 },
    // Full Date/Time
    c: function () { return this.Format('Y-m-d\\TH:i:sP') },
    r: function () { return this.toString() },
    U: function () { return Math.floor(this.getTime() / 1000) }
  }

  // Simulates PHP's date function
  Date.prototype.Format = function (format) {
    var date = this
    return format.replace(/(\\?)(.)/g, function (_, esc, chr) {
      return (esc === '' && replaceChars[chr]) ? replaceChars[chr].call(date) : chr
    })
  }
}).call(this)

3. Publish and Subscribe theme theme

Export default { 
    Data () { 
        return { 
     　　　　Data: {} // for receiving data returned 
            clientId: "" , 
            the userName: "" , 
            password: "" , 
            DeviceID: "" , 
            cmd: 'Search' , 
            topic_get: ' subscribed threads' , 
            topic_send: 'theme released' , 
            Client: {}, 
            Options: {}, 
            COUNT: 0 , 
            Time: '' ,
            devlist_data_one:'',
        };
    },
    mixins:[clientIp],
    created(){
        console.log(this.hostname)this.client = new Paho.MQTT.Client(
            this.hostname,
            this.port,
            this.clientId
        );
        let that=this
        console.log(this.client);
        this.options = {
            invocationContext: {
                host:this.hostname,
                port:this.port,
                path:this.client.path,
                clientId:this.clientId
            }，
            userName:this.userName,
            password:this.password,
            onSuccess: function() {//连接成功
                console.log("onSuccess")
                that.send();
            },
            onFailure: function(e) {//连接失败
                console.log("onFailure")
                console.log(e);
            }
        };
        this.client.connect ( the this .options); // connect to the server and register the connection is successful event handling 
        the this .client.onConnectionLost = the this .onConnectionLost; // Register disconnect handle the event 

        the this .client.onMessageArrived = the this .onMessageArrived; // event registration message reception process 
    }, 
    Methods: { 
        jumpNum (Val) { 
            the this . $ router.push ({path: '/ DevInfo / DevState' , Query: {devId: val.number}}) 
        }, 
        onMessageArrived (message) { 
            this.data = message.payloadString; 
            the console.log (this.data); // returns the data 
        },

        onConnectionLost(responseObject) {
            if (responseObject.errorCode !== 0) {
                console.log("onConnectionLost:" + responseObject);
                console.log(responseObject);
                console.log("连接已断开");
            }
        },
        send:function(){
            this.time=this.fromDate(new Date())
            let device_id=JSON.stringify(this.deviceid)
            var sendMsg = '{"device_id":"' + this.deviceid + '","cmd":"'+this.cmd+'","time":"'+this.time+'","from":"web console"}';
            console.log(sendMsg)
            var message = new Paho.MQTT.Message(sendMsg);
            message.destinationName = this.topic_send;//发送主题
            this.client.subscribe(this.topic_get);//订阅主题
            this.client.send(message);
        },

　　　　　　fromDate(date) {

            　// var date = new Date(parseInt(timestamp, 10));

            　var date= new Date(Date.parse(date));

            　var Y = date.getFullYear() ;

            　var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);

            　var D = date.getDate() ;

            　var h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours() ;

            　var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();

            　var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();

            　return Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' + s;

        　}

　　}

Note: 1.mqtt short connection, in order to perform real-time updates can use the timer of the send () function.

　　2.this.options there are other parameters needed to find their own

　　3. json transmission data format, the JSON.stringify available () converts the string, the text is spliced.