Browse Source

添加MQ通信(未完成)

zhangyu 5 years ago
parent
commit
d98b884755

+ 126 - 0
src/framework/components/messagesever.vue/index.vue

@@ -0,0 +1,126 @@
+<!--
+ * @Author: zhangyu
+ * @Date: 2019-08-26 15:22:13
+ * @Info: 
+ * @LastEditTime: 2019-09-04 15:15:01
+ -->
+<template>
+  <div>
+    <el-button type="primary" @click="handleClickConnectMQ">连接MQ</el-button>
+    <el-button type="primary" @click="handleClickDisconnectMQ">断开MQ</el-button>
+    <el-button type="primary" @click="handleClickUnsubscribe">停止接收消息</el-button><br><br>
+    <el-input type="textarea" :autosize="{ minRows: 6, maxRows: 6}" v-model="sendMessage" placeholder="请输入要发送的内容"></el-input>
+    <br><br>
+    <el-button type="primary" @click="handleClickSendMessage">发送消息</el-button>
+    <el-card style="margin-top:20px;text-align:left;">
+      <div slot="header" class="clearfix">
+        <span>消息历史</span>
+      </div>
+      <div v-for="(message, index) in messageList" :key="index" class="text item">
+        {{ message }}
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import Stomp from 'stompjs'
+import { MQTT_SERVICE, MQTT_USERNAME, MQTT_PASSWORD } from './mqSetting'
+
+export default {
+  data() {
+    return {
+      client: Stomp.client(MQTT_SERVICE),
+      sendMessage: '',
+      messageList: [], // 历史消息
+      subList: [], // 订阅的消息实例
+      topics: ["/topic/datacenter.broadcast","/topic/dataPlatform.broadcast"] // 订阅的消息名称
+    }
+  },
+  created () {
+    this.connect()
+    // let url = "ws://192.168.20.225:61614/stomp";
+    // let login = "admin";
+    // let passcode = "admin";
+    // let destination = "/topic/datacenter.broadcast";
+    // let client = Stomp.client(url)
+    // console.log('钩子:',client)
+    // var onconnect = function(frame) {
+    //   client.subscribe(destination, function(message) {
+    //     console.log(message.body);
+    //     alert(message.body);        
+    //   });
+    // };
+    // client.connect(login, passcode, onconnect)
+  },
+  methods:{
+    connect() {
+      this.client = Stomp.client(MQTT_SERVICE)
+      this.client.reconnect_delay = 5000
+      var clientid = 'sagaMQ-zy'
+      var headers = {
+        'login': MQTT_USERNAME,
+        'passcode': MQTT_PASSWORD,
+        'client-id': clientid
+      }
+      this.client.connect(headers, this.onConnected, this.onFailed)
+    },
+    onConnected(frame) {
+      console.log('Connected: ' + frame)
+      //订阅多个消息
+      this.topics.forEach(item => {
+        let sub = this.client.subscribe(item, this.onmessage, this.onFailed)
+        this.subList.push(sub)
+      })
+      // this.client.subscribe(topic, this.onmessage, this.onFailed) 
+    },
+    //接收到消息的回调
+    onmessage(message) {
+      let json
+      try {
+        json = JSON.parse(message.body)
+      } catch (err) {
+        alert('数据格式错误!')
+      }
+      this.messageList.push(json)
+    },
+    // 接收消息失败回调
+    onFailed(frame) {
+      console.log('Failed: ' + frame)
+    },
+    //停止接收消息
+    unsubscribe() {
+      this.subList.forEach((item) => {
+        item.unsubscribe()
+      })
+    },
+    //断开连接
+    disconnect() {
+      this.client.disconnect(function() {
+        console.log("连接已断开!");
+      })
+    },
+    //发送消息
+    send(destination, message, headers = {}) {
+      this.client.send(destination, headers, JSON.stringify(message))
+    },
+    
+    handleClickConnectMQ() {
+      this.connect()
+    },
+    handleClickDisconnectMQ() {
+      this.disconnect()
+    },
+    handleClickUnsubscribe() {
+      this.unsubscribe()
+    },
+    handleClickSendMessage() {
+      this.send('/topic/datacenter.broadcast',this.sendMessage)
+    },
+    
+  }
+}
+</script>
+
+<style scoped>
+</style>

+ 9 - 0
src/framework/components/messagesever.vue/mqSetting.js

@@ -0,0 +1,9 @@
+/*
+ * @Author: zhangyu
+ * @Date: 2019-08-26 16:03:46
+ * @Info: 
+ * @LastEditTime: 2019-09-04 15:06:24
+ */
+export const MQTT_SERVICE = 'ws://192.168.20.225:61614/stomp' // mq服务地址
+export const MQTT_USERNAME = 'admin' // mq连接用户名
+export const MQTT_PASSWORD = 'admin' // mq连接密码

+ 1 - 0
src/framework/layout/PageHeader.vue

@@ -32,6 +32,7 @@
 <script>
 import frameworkApi from '@/api/framework'
 import { mapGetters, mapMutations } from 'vuex'
+import Bus from '@/utils/bus.js'
 export default {
     name: 'PageHeader',
     props: [],

+ 2 - 0
src/utils/bus.js

@@ -0,0 +1,2 @@
+import Vue from 'vue'
+export default new Vue