项目中集成mqtt客户端查询功能，使用到了EMQX api-v5，具体步骤：

一、准备工作

首先在EMQX dashboard中添加API 密钥

填写密钥名称，点击确定，会生成API Key和Secret Key，保存起来备用。

二、配置文件

在springboot的配置文件中添加如下配置

spring:
  # mqtt 配置
  mqtt:
    api:
      # mqtt dashboard的访问地址
      host: http://xxx.xxx.xxx.xxx:18083
      # 上图中的apiKey
      apiKey: xxxxxxxxxxxx
      # 上图中的secretKey
      secretKey: xxxxxxxxxxxx

三、后端实现

创建配置类MqttApiConfig

@Data
@Configuration
@ConfigurationProperties(prefix = "spring.mqtt.api")
public class MqttApiConfig {
    private String host;
    private String apiKey;
    private String secretKey;
}

查询参数DeviceStatusRequest

@Data
public class DeviceStatusRequest {
    private String deviceId;
    private int pageNum = 1;
    private int pageSize = 20;
}

接收参数DeviceStatusInfo

@Data
public class DeviceStatusInfo {
    private Boolean connected;
    private String node;
    private Integer port;
    private Integer keepalive;
    private String ip_address;
    private String username;
    private String created_at;
    private String clientid;
    private String connected_at;
    private Boolean clean_start;
}

创建Controller的接口

@Slf4j
@RequestMapping("/mqtt/client")
@RestController
public class ClientController extends BaseController {
	@Resource
    private MqttApiConfig mqttConfig;
    @Resource
    private RestTemplate restTemplate;

/**
     * 获取所有MQTT客户端列表
     */
    private final String GET_ALL_MQTT_CLIENTS_URL = "%s/api/v5/clients?page=%s&limit=%s&fields=clientid,username,connected,ip_address,port,keepalive,clean_start,connected_at,node,disconnected_at,created_at";

    /**
     * 获取单个MQTT客户端状态信息
     */
    private final String GET_MQTT_CLIENT_STATUS_URL = "%s/api/v5/clients?clientid=%s&fields=clientid,username,connected,ip_address,port,keepalive,clean_start,connected_at,node,disconnected_at,created_at";
    
 	/**
     * 分页查询所有MQTT客户端
     *
     * @return
     */
    @GetMapping("/all")
    public PageResult<List<DeviceStatusInfo>> getClients(DeviceStatusRequest request) {
        String deviceId = request.getDeviceId();
        String url = String.format(GET_ALL_MQTT_CLIENTS_URL, mqttConfig.getHost(), request.getPageNum(), request.getPageSize());
        if (StringUtils.isNotBlank(deviceId)) {
            url = String.format(GET_MQTT_CLIENT_STATUS_URL, mqttConfig.getHost(), deviceId);
        }
        JSONObject object = exchange(url);
        if (object != null) {
            List<DeviceStatusInfo> list = JSONArray.parseArray(object.getString("data"), DeviceStatusInfo.class);
            JSONObject meta = object.getJSONObject("meta");
            Page<DeviceStatusInfo> page = new Page<>();
            page.addAll(list);
            page.setPageNum(meta.getInteger("page"));
            page.setPageSize(meta.getInteger("limit"));
            page.setTotal(meta.getLong("count"));
            return PageResult.success(page);
        }
        return new PageResult(500, "没有查询到数据");
    }

    private JSONObject exchange(String url) {
        HttpHeaders headers = new HttpHeaders();
        headers.setAccept(Collections.singletonList(MediaType.APPLICATION_JSON));
        headers.setBasicAuth(mqttConfig.getApiKey(), mqttConfig.getSecretKey(), StandardCharsets.UTF_8);
        HttpEntity entity = new HttpEntity<>(headers);
        ResponseEntity<String> response = restTemplate.exchange(url, HttpMethod.GET, entity, String.class);
        log.info("response=>{}", response);
        if (response.getStatusCode() == HttpStatus.OK && response.getBody() != null) {
            String body = response.getBody();
            return JSONObject.parseObject(body);
        }
        return null;
    }

四、前端实现

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
      <el-form-item label="客户端" prop="deviceId">
        <el-input
            v-model="queryParams.deviceId"
            placeholder="请输入设备id"
            clearable
            @keyup.enter.native="handleQuery"
            style="width: 160px"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="list" style="width: 100%;">
      <el-table-column label="序号" type="index" align="center"/>
      <el-table-column label="客户端ID" align="left" prop="clientid" min-width="180" :show-overflow-tooltip="true"/>
      <el-table-column label="用户名" align="center" prop="username" min-width="150" :show-overflow-tooltip="true"/>
      <el-table-column label="节点" align="left" prop="node" width="180" :show-overflow-tooltip="true"/>
      <el-table-column label="连接状态" align="center" width="120">
        <template v-slot="scope">
          <el-tag :type="scope.row.connected ? 'success' : 'danger'">{{ scope.row.connected ? '已连接' : '未连接' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="IP地址" align="left" prop="ip_address" min-width="150" :show-overflow-tooltip="true">
        <template v-slot="scope">
          <span>{{ scope.row.ip_address}}:{{scope.row.port}}</span>
        </template>
      </el-table-column>
      <el-table-column label="心跳" align="center" prop="keepalive" width="120"/>
      <el-table-column label="清除会话" align="center" width="120">
        <template v-slot="scope">
          <el-tag>{{ scope.row.clean_start }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="会话创建时间" align="center" width="180">
        <template v-slot="scope">
          <span>{{ parseTime(scope.row.created_at) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="连接时间" align="center" width="180">
        <template v-slot="scope">
          <span>{{ parseTime(scope.row.connected_at) }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
    />

  </div>
</template>

<script>
import {getMqttClient} from "@/api/mqtt";

export default {
  name: "MqttClient",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      // 查询参数
      queryParams: {
        deviceId: undefined,
        pageNum: 1,
        pageSize: 20
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询登录日志列表 */
    getList() {
      this.loading = true;
      getMqttClient(this.queryParams).then(response => {
        this.list = response.data;
        this.total = response.count;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
  }
};
</script>

五、实现效果