ibms/src/framework/components/messagesever/index.vue

<!--
 * @Author: zhangyu
 * @Date: 2019-08-26 15:22:13
 * @Info: 
 * @LastEditTime: 2019-09-26 20:16:41
 -->
<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/model.manage"] // 订阅的消息名称
    }
  },
  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) {
      this.unreadNum = Msmq.handleMsg(message, this.projects, this.unreadNum);
    },
    // 接收消息失败回调
    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>