<template>
<div class="page">
<el-button type="primary" @click="createConnection">連接MQTT</el-button>
<el-button type="primary" @click="doSubscribe">訂閱主題</el-button>
<el-button type="primary" @click="doUnSubscribe">取消主題</el-button>
<el-button type="primary" @click="destroyConnection">斷開MQTT</el-button>

</div>
</template>

<script>
import Stomp from 'stompjs';
export default {
data() {
return {
client: null,
frame: null,
options: {
vhost: '/',
incoming: 8000, // 心跳包時間，（須大于0，且小于10000，因為服務器可能默認10秒沒心跳就會斷開）
outgoing: 8000, // 心跳包時間，（須大于0，且小于10000，因為服務器可能默認10秒沒心跳就會斷開）
account: 'taijuyun',
pwd: '123456',
server: 'ws://114.216.4.244:15674/ws',
message: '',
},
};
},

methods: {
connect(options) {
this.options = { ...this.options, ...options };
const mqUrl = this.options.server;
const ws = new WebSocket(mqUrl);
ws.onclose = close => {
console.log('webSocket關閉', close);
};
ws.onerror = error => {
console.log('webSocket異常', error);
};
ws.onopen = success => {
console.log('webSocket連接成功', success);
};
this.client = Stomp.over(ws);
this.client.heartbeat.incoming = this.options.incoming;
this.client.heartbeat.outgoing = this.options.outgoing;
this.client.debug = null; //關閉控制臺調(diào)試

  //連接成功時
  const onConnect = async () => {
    console.log('stomp 連接成功！');
    //訂閱消息
    //this.subscribe();
  };
  //發(fā)生錯誤自動重連
  const onError = errorMsg => {
    console.error(`stomp 斷開連接，正在準備重新連接...`, errorMsg);
    this.connect(this.options);
  };

  //開始連接
  this.client.connect(
    this.options.account, // 用戶名
    this.options.pwd, // 密碼
    onConnect,
    onError,
    this.options.vhost
  );
},
doSubscribe() {
  this.currentSubscribe = this.client.subscribe('/topic/5ccde2da94d141769c9c5b1ac49f73d7', function (messages) {
    console.log('receive:', messages);
  });
},
doUnSubscribe() {
  this.currentSubscribe.unsubscribe();
},
createConnection() {
  this.connect();
},
destroyConnection() {
  this.client.disconnect(() => {
    console.log('已關閉mq連接');
  });
},

},
created() {},
mounted() {
this.connect();
},
};
</script>