物联网设备接入系统后如何查看硬件实时数据?

要在软件中实时查看硬件设备的信息,通常需要结合前后端技术来实现。以下是设计思路和实现步骤:


1. 系统架构设计

实时查看硬件设备信息的系统通常采用以下架构:

  • 数据采集层: 硬件设备通过传感器采集数据,发送到InfluxDB。
  • 数据存储层: InfluxDB存储设备的历史和实时数据。
  • 后端服务层: 提供API接口,从InfluxDB查询数据并返回给前端。
  • 前端展示层: 通过Web界面或移动端实时展示设备信息。
  • 实时通信层: 使用WebSocket或Server-Sent Events (SSE)实现实时数据推送。

2. 实现步骤

(1) 数据采集与存储

硬件设备通过MQTT、HTTP或其他协议将数据发送到后端,后端将数据写入InfluxDB。可以参考前面的Java代码实现数据写入。


(2) 后端服务设计

后端需要提供API接口,用于查询设备的历史数据和实时数据。

API设计
  • 查询历史数据: 返回设备在某个时间范围内的数据。

    • 请求示例:GET /api/devices/{deviceId}/history?start=2023-10-01T00:00:00Z&end=2023-10-02T00:00:00Z

    • 响应示例:

      json 复制代码
      {
          "deviceId": "device_123",
          "data": [
              {"time": "2023-10-01T12:00:00Z", "temperature": 25.3, "humidity": 60.1},
              {"time": "2023-10-01T12:05:00Z", "temperature": 25.5, "humidity": 60.0}
          ]
      }
  • 查询实时数据: 返回设备的最新数据。

    • 请求示例:GET /api/devices/{deviceId}/realtime

    • 响应示例:

      json 复制代码
      {
          "deviceId": "device_123",
          "time": "2023-10-01T12:10:00Z",
          "temperature": 25.4,
          "humidity": 60.2
      }
后端代码示例(Spring Boot + InfluxDB)
java 复制代码
import com.influxdb.client.InfluxDBClient;
import com.influxdb.client.InfluxDBClientFactory;
import com.influxdb.client.QueryApi;
import com.influxdb.query.FluxRecord;
import com.influxdb.query.FluxTable;
import org.springframework.web.bind.annotation.*;

import java.time.Instant;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@RestController
@RequestMapping("/api/devices")
public class DeviceController {

    private final InfluxDBClient influxDBClient;

    public DeviceController() {
        // 初始化InfluxDB客户端
        this.influxDBClient = InfluxDBClientFactory.create("http://localhost:8086", "your-token".toCharArray(), "your-org", "your-bucket");
    }

    // 查询历史数据
    @GetMapping("/{deviceId}/history")
    public Map<String, Object> getHistoryData(
            @PathVariable String deviceId,
            @RequestParam String start,
            @RequestParam String end) {

        String fluxQuery = String.format("from(bucket: \"your-bucket\") " +
                "|> range(start: %s, stop: %s) " +
                "|> filter(fn: (r) => r._measurement == \"hardware_metrics\" and r.device_id == \"%s\")", start, end, deviceId);

        QueryApi queryApi = influxDBClient.getQueryApi();
        List<FluxTable> tables = queryApi.query(fluxQuery);

        List<Map<String, Object>> data = new ArrayList<>();
        for (FluxTable table : tables) {
            for (FluxRecord record : table.getRecords()) {
                Map<String, Object> point = new HashMap<>();
                point.put("time", record.getTime());
                point.put(record.getField(), record.getValue());
                data.add(point);
            }
        }

        Map<String, Object> response = new HashMap<>();
        response.put("deviceId", deviceId);
        response.put("data", data);
        return response;
    }

    // 查询实时数据
    @GetMapping("/{deviceId}/realtime")
    public Map<String, Object> getRealtimeData(@PathVariable String deviceId) {
        String fluxQuery = String.format("from(bucket: \"your-bucket\") " +
                "|> range(start: -1m) " + // 查询最近1分钟的数据
                "|> filter(fn: (r) => r._measurement == \"hardware_metrics\" and r.device_id == \"%s\") " +
                "|> last()", deviceId); // 获取最新的一条数据

        QueryApi queryApi = influxDBClient.getQueryApi();
        List<FluxTable> tables = queryApi.query(fluxQuery);

        Map<String, Object> response = new HashMap<>();
        if (!tables.isEmpty()) {
            FluxRecord record = tables.get(0).getRecords().get(0);
            response.put("deviceId", deviceId);
            response.put("time", record.getTime());
            response.put(record.getField(), record.getValue());
        }
        return response;
    }
}

(3) 前端实时展示

前端可以通过以下方式实现实时数据展示:

  • 轮询(Polling): 定期调用后端API获取最新数据(简单但不高效)。
  • WebSocket: 建立双向通信通道,后端主动推送数据到前端。
  • Server-Sent Events (SSE): 后端单向推送数据到前端。
WebSocket实现示例
  • 后端(Spring Boot):

    java 复制代码
    import org.springframework.messaging.handler.annotation.MessageMapping;
    import org.springframework.messaging.handler.annotation.SendTo;
    import org.springframework.stereotype.Controller;
    
    @Controller
    public class WebSocketController {
    
        @MessageMapping("/device-data")
        @SendTo("/topic/device-data")
        public String sendDeviceData(String deviceId) {
            // 查询设备的最新数据并返回
            return "Device Data: " + deviceId;
        }
    }
  • 前端(JavaScript):

    javascript 复制代码
    const socket = new WebSocket('ws://localhost:8080/ws');
    socket.onmessage = function(event) {
        const data = JSON.parse(event.data);
        console.log("Received data:", data);
        // 更新UI
    };
SSE实现示例
  • 后端(Spring Boot):

    java 复制代码
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.PathVariable;
    import org.springframework.web.bind.annotation.RestController;
    import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;
    
    @RestController
    public class SSEController {
    
        @GetMapping("/sse/device-data/{deviceId}")
        public SseEmitter streamDeviceData(@PathVariable String deviceId) {
            SseEmitter emitter = new SseEmitter();
            // 模拟实时数据推送
            new Thread(() -> {
                try {
                    while (true) {
                        String data = fetchDataFromInfluxDB(deviceId); // 从InfluxDB获取数据
                        emitter.send(data);
                        Thread.sleep(1000); // 每秒推送一次
                    }
                } catch (Exception e) {
                    emitter.completeWithError(e);
                }
            }).start();
            return emitter;
        }
    
        private String fetchDataFromInfluxDB(String deviceId) {
            // 查询InfluxDB并返回数据
            return "Device Data: " + deviceId;
        }
    }
  • 前端(JavaScript):

    javascript 复制代码
    const eventSource = new EventSource('/sse/device-data/device_123');
    eventSource.onmessage = function(event) {
        const data = JSON.parse(event.data);
        console.log("Received data:", data);
        // 更新UI
    };

(4) 前端UI设计

使用前端框架(如React、Vue.js)构建实时数据展示界面,例如:

  • 实时数据卡片:显示设备的当前状态(温度、湿度等)。
  • 历史数据图表:使用ECharts或Chart.js展示历史数据趋势。

3. 总结

通过InfluxDB存储设备数据,结合后端API和前端实时通信技术(如WebSocket或SSE),可以高效实现硬件设备信息的实时查看。关键点包括:

  • 使用InfluxDB高效存储和查询时序数据。
  • 后端提供API接口,支持历史数据和实时数据查询。
  • 前端通过WebSocket或SSE实现实时数据推送和展示。
  • 使用图表库展示历史数据趋势。
相关推荐
Lionel_SSL6 小时前
《深入理解Java虚拟机》第三章读书笔记:垃圾回收机制与内存管理
java·开发语言·jvm
记得开心一点嘛6 小时前
手搓Springboot
java·spring boot·spring
老华带你飞7 小时前
租房平台|租房管理平台小程序系统|基于java的租房系统 设计与实现(源码+数据库+文档)
java·数据库·小程序·vue·论文·毕设·租房系统管理平台
独行soc7 小时前
2025年渗透测试面试题总结-66(题目+回答)
java·网络·python·安全·web安全·adb·渗透测试
脑子慢且灵7 小时前
[JavaWeb]模拟一个简易的Tomcat服务(Servlet注解)
java·后端·servlet·tomcat·intellij-idea·web
华仔啊8 小时前
SpringBoot 中 6 种数据脱敏方案,第 5 种太强了,支持深度递归!
java·后端
异常驯兽师9 小时前
Spring 中处理 HTTP 请求参数注解全解析
java·spring·http
连合机器人10 小时前
晨曦中的守望者:当科技为景区赋予温度
java·前端·科技
AD钙奶-lalala10 小时前
idea新建的项目new 没有java class选项
java·ide·intellij-idea
sheji341610 小时前
【开题答辩全过程】以 12306候补购票服务系统为例,包含答辩的问题和答案
java·eclipse