1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
| <template>
| <div>
|
| </div>
| </template>
| <script lang="ts">
| import { defineComponent, ref, unref } from 'vue';
| import mqtt from 'mqtt';
| var client
| const options={
| port:8083,
| connectTimeout:4000,
| clientId:'mqtt_'+ Math.random().toString(16),
| }
| client = mqtt.connect('ws://192.168.31.151/mgtt',options)
| export default {
| name: 'Helloworld',
| data(){
| return{
| msg:'Welcome to Your Vue.js App'
| }
| },
| created(){
| this.mqttMsg()
| },
| methods:{
| mqttMsg(){
| client.on('connect',(e)=>{
| console.log('连接成功')
| client.subscribe('/test/helloworld',{qos:0},(error)=>{
| console.log(error)
| })
| client.on("message",(topic,message)=>{
| console.log('收到来自',topic,'的消息',message.tostring())
| })
| client.on("reconnect",(error)=>{
| console.log('正在重连',error)
| })
| client.on("reconnect",(error)=>{
| console.log('连接失败',error)
| })
| })
| }
| }
|
| }
| </script>
|
|
