echarts+rabbitmq实现数据实时显示

末蓝、 2022-10-14 15:45 161阅读 0赞

以Vue项目为例

1、我们采用发布订阅模式，使用STOMP协议，所以需要室内`rabbitMQ`的stomp插件  
终端切到rabbitmq的sbin目录执行  
`rabbitmq-plugins enable rabbitmq_stomp`  
启用后，可以通过监听`ws://IP:15674/ws`服务地址接收后台用发布的消息

2、配置`rabbitMQ`客户端  
写配置文件 cnonfig/rabbitmq.js

export const MQTT_SERVICE = 'ws://127.0.0.1:15674/ws' 
    export const MQTT_USERNAME = 'guest' 
    export const MQTT_PASSWORD = 'guest'

创建客户端，订阅消息队列，注册回调函数

<template>
    	<div id='image'></div>
    </template>
    <script>
    import Stomp from 'stompjs'
    import { MQTT_SERVICE, MQTT_USERNAME, MQTT_PASSWORD} from '../../config/rabbitmq'
    
    export default { 
        name: 'Home',
        data() { 
          return { 
            client: Stomp.client(MQTT_SERVICE) //创建mq客户端
            x     : new Array(10)  //绘制曲线x坐标
            y     : new Array(10)  //绘制曲线y坐标
          }
        }，
        method(){ 
          onConnected1: function (frame) { 
            this.client.subscribe('queueName', this.responseCallback, this.onFailed)
          },
          onFailed1: function (frame) { 
            console.log('MQ Failed: ' + frame)
          },
          responseCallback: function (frame) { 
          	/** 假设消息为json格式： "{ 'x':'Array(10)', 'y':'Array(10)' }" */
            let data = JSON.parse(frame.body) // frame.body是后台消息内容
            //更新数据
            this.x=data['x']
            this.y=data['y']
            //重新绘图
            this.draw('image')
          },
          connect: function () { 
            this.client.connect(MQTT_USERNAME, MQTT_PASSWORD, this.onConnected, this.onFailed)
          },
          draw(id){ 
    	  	let charts = echarts.init(document.getElementById(id))
            charts.setOption({ 
              tooltip: { 
                trigger: 'axis'
              },
              legend: { 
                data: ['data']
              },
              grid: { 
                containLabel: true
              },
              // toolbox: { 
              // feature: { 
              // saveAsImage: {}
              // }
              // },
              xAxis: { 
                type: 'category',
                boundaryGap: false,
                data: this.x,
                splitLine: { 
                  show: true,
                  lineStyle: { 
                    color: ['#006400'],
                    width: 2,
                    type: 'dotted'
                  }
                }
              },
              yAxis: { 
                type: 'value',
                min: function (value) { 
                  return value.min - 10
                },
                max: function (value) { 
                  return value.max + 10
                },
                splitLine: { 
                  show: true,
                  lineStyle: { 
                    color: ['#006400'],
                    width: 2,
                    type: 'dotted'
                  }
                }
              },
              series: [
                { 
                  symbol: "none",
                  name: 'data',
                  type: 'line',
                  data: this.y,
                  lineStyle: { 
                    width: 1
                  }
                }
              ]
            })
          }
        }，
        created() { 
          this.connect() //建立连接
        },
        mounted() { 
          this.draw('image')
        }
     }
    </script>