topology-vue实现MQTT数据通信(2)

一、设置websocket或mqtt

1、点击画布空白地方，在右边属性面板，设置整个图文属性的“消息通信”

2、mqtt服务器：http://tools.emqx.io/

属性面板中消息通信数据要与mqtt服务器通信数据保持一致，如下图所示：

包括：URL地址，用户名，密码，订阅主题通配符Topics,其中Client ID是自动生成，不需要做配置

设置连接地址、用户名、密码、认证消息 设置订阅主题通配符Topics

二、实现数据通信

topology 是一个挂载在 window 下的对象

设置好连接地址、用户名、密码、订阅主题通配符、认证消息后，在数据初始化时设置：window.topology.data.socketEvent = true  客户端会主动监听服务器消息

当客服端与MQQT服务端连接成功后，可监听数据变化，并对数据进行修改：

window.topology.on('mqtt', (e) => {

  e = JSON.parse(e.message + '');

    console.log(e);

});

实现数据通信