|
@@ -0,0 +1,161 @@
|
|
|
+<!--
|
|
|
+ * @Author: zhangyu
|
|
|
+ * @Date: 2019-08-26 15:22:13
|
|
|
+ * @Info:
|
|
|
+ * @LastEditTime: 2019-09-05 17:57:15
|
|
|
+ -->
|
|
|
+<template>
|
|
|
+ <div class="notification-box" @click="handleClickRead">
|
|
|
+ <el-badge :value="unreadNum" :hidden="!unreadNum" :max="99">
|
|
|
+ <i class="el-icon-message-solid"></i>
|
|
|
+ </el-badge>
|
|
|
+ <!-- <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 { mapGetters } from 'vuex'
|
|
|
+import Stomp from 'stompjs'
|
|
|
+import Msmq from './msmq'
|
|
|
+import { MQTT_SERVICE, MQTT_USERNAME, MQTT_PASSWORD } from './mqSetting'
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ client: Stomp.client(MQTT_SERVICE),
|
|
|
+ unreadNum: 0,
|
|
|
+ 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)
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters('layout', ['userInfo', 'projectId', 'projects'])
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ connect() {
|
|
|
+ this.client = Stomp.client(MQTT_SERVICE)
|
|
|
+ this.client.reconnect_delay = 5000
|
|
|
+ var clientid = `sagaMQ-${this.userInfo.username}`
|
|
|
+ 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) {
|
|
|
+ this.$message.error('数据格式错误!')
|
|
|
+ }
|
|
|
+ this.unreadNum = Msmq.handleMsg(json, this.projects, this.unreadNum);
|
|
|
+ // this.unreadNum++
|
|
|
+ // this.$notify.info({ title: '消息',dangerouslyUseHTMLString: true, message: `项目编号:${json.projectId}<br>消息类型:${json.type}<br>描述信息:${json.description}<br>` });
|
|
|
+ // 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)
|
|
|
+ },
|
|
|
+ handleClickRead() {
|
|
|
+ this.unreadNum = 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .notification-box{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 16px 10px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ color: #79869a;
|
|
|
+ cursor: pointer;
|
|
|
+ .el-icon-message-solid{
|
|
|
+ font-size: 22px;
|
|
|
+ }
|
|
|
+ /deep/ .el-badge__content{
|
|
|
+ height: 16px;
|
|
|
+ line-height: 16px;
|
|
|
+ border: 1px solid transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .notification-box:hover{
|
|
|
+ color: #d3d8e2;
|
|
|
+ background-color: #3f4f62;
|
|
|
+ }
|
|
|
+</style>
|