基于 MQTT+ECharts 实现 后端向前端推送数据展示的demo

准备：首先去官网下载   HiveMQ  服务端

  参考链接：https://www.hivemq.com/docs/hivemq/4.7/user-guide/install-hivemq.html#windows
    我还在网上找个一个MQTT的可视化 客户端 Paho ： http://wiki.eclipse.org/Paho

将上面两个文件解压备用

以上准备工作各位看官自行下载
1、修改hiveMQ的cofig.文件如下图一和图二
　　

   　　　　　　　　　　　　　　　　　　　　　　　　图一

 


　　

图二

2、写前端demo 需要引用

CDN引入

 

 

具体如下
 
<!doctype html>
<html lang="en">
 
<head>
    <title>Paho MQTT.js </title>

    <!-- 引用MQTT的CDN -->
    <script src="https://cdn.bootcss.com/paho-mqtt/1.0.2/mqttws31.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.1/dist/echarts.min.js"></script>
 
</head>
 
<body>
    <div id="main" style="width: 1800px;height:600px;"></div>
    <!-- 相关业务代码 -->
    <script src="./index.js"></script>
 
</body>
 
</html>
var myChart = echarts.init(document.getElementById('main'));
    option1 = {
        title: {
            text: 'Stacked Line'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['Email']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
            saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
            }
        ]
    };


    myChart.setOption(option1);

    client = new Paho.MQTT.Client("192.168.20.101", Number(8000), "/mqtt","paho-21235228571500");//建立客户端实例   其中 paho-21235228571500 为 客户端 客户机订阅标识
    client.connect({onSuccess:onConnect});//连接服务器并注册连接成功处理事件
    
    function onConnect() {
        console.log("onConnected");
        topic = 'test'; //订阅的主题
        client.subscribe(topic);//订阅主题
        console.log("subscribed");
        //发送消息
    }

    client.onConnectionLost = onConnectionLost;//注册连接断开处理事件
    client.onMessageArrived = onMessageArrived;//注册消息接收处理事件

    function onConnectionLost(responseObject) {
        if (responseObject.errorCode !== 0) {
            console.log("onConnectionLost:"+responseObject.errorMessage);
            console.log("连接已断开");
            }
    }

    function onMessageArrived(message) {

        var temp1 = jQuery.parseJSON(message.payloadString);
        console.log(temp1)
        option1.series[0].data=temp1;
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option1);

    }

3、利用我们的Paho 工具发布一条数据 就会实时推送到前端  如下图

 

 相关链接：https://blog.51cto.com/u_3423936/5062986

posted @ 2022-04-06 15:04  虚无——缥缈  阅读(967)  评论(0)  编辑  收藏  举报