多机器监控技术方案咨询：如何实现多连接实时数据展示？

Hey Josef, great project idea! Let's walk through a practical, beginner-friendly implementation that covers all your requirements—managing multiple TCP clients, real-time data sync, and a clean web dashboard with per-device views.

1. Server Side: TCP Connection Management + Real-Time Data Relay #

For handling multiple concurrent TCP connections and pushing data to the web dashboard, Node.js is an excellent choice—it’s lightweight, has great real-time libraries, and is easy to pick up even if you’re new to backend development.

TCP Connection Handling #

Use Node.js’s built-in net module to create a TCP server. When a device connects, assign it a unique device ID (I recommend UUIDs) and track active connections. Parse incoming numerical data (stick with JSON for simplicity) and pass it along to your web dashboard layer.

Here’s a quick snippet to get you started:

const net = require('net');
const { v4: uuidv4 } = require('uuid');
const { Server } = require('socket.io');

// Track active devices: key = device ID, value = TCP socket
const connectedDevices = new Map();
// Set up Socket.io for web dashboard communication (more on this next)
const io = new Server(3000, { cors: { origin: "*" } });

const tcpServer = net.createServer((socket) => {
  const deviceId = uuidv4();
  connectedDevices.set(deviceId, socket);
  console.log(`New device connected: ${deviceId.slice(0, 8)} (short ID)`);

  // Listen for incoming data from the device
  socket.on('data', (rawData) => {
    try {
      // Assume device sends JSON like {"value": 27.3} followed by a newline
      const payload = JSON.parse(rawData.toString().trim());
      // Push data to all connected web dashboards
      io.emit('device-update', { deviceId, value: payload.value, timestamp: Date.now() });
    } catch (err) {
      console.error(`Invalid data from ${deviceId.slice(0,8)}: ${err.message}`);
    }
  });

  // Handle device disconnection
  socket.on('end', () => {
    connectedDevices.delete(deviceId);
    io.emit('device-disconnect', deviceId);
    console.log(`Device disconnected: ${deviceId.slice(0,8)}`);
  });
});

// Start TCP server on port 3001
tcpServer.listen(3001, () => console.log('TCP server running on port 3001'));

Real-Time Web Dashboard Sync #

To push data from the TCP server to your web dashboard in real-time, use Socket.io. It abstracts away the complexity of WebSockets (like reconnection logic and heartbeat checks) and works seamlessly with Node.js. The snippet above already includes Socket.io setup—when the server receives TCP data, it emits an event that all connected web clients can listen to.

2. Web Dashboard: Dynamic Per-Device Views #

For the dashboard, use a frontend framework like React or Vue—both make it easy to manage dynamic lists of device cards. I’ll use React here since it’s widely adopted and has great documentation.

Core Dashboard Logic #

The frontend connects to Socket.io, listens for device updates/disconnections, and maintains a list of active devices. Each device gets its own card (your "independent frame") that updates in real-time.

Example React component:

import { useEffect, useState } from 'react';
import io from 'socket.io-client';

// Connect to the Socket.io server
const socket = io('http://your-server-ip:3000');

function DeviceDashboard() {
  const [devices, setDevices] = useState([]);

  useEffect(() => {
    // Listen for new device data
    socket.on('device-update', ({ deviceId, value, timestamp }) => {
      setDevices(prevDevices => {
        // Update existing device or add new one
        const existingDevice = prevDevices.find(d => d.id === deviceId);
        if (existingDevice) {
          return prevDevices.map(d => 
            d.id === deviceId ? { ...d, value, lastUpdated: new Date(timestamp) } : d
          );
        } else {
          return [...prevDevices, { id: deviceId, value, lastUpdated: new Date(timestamp) }];
        }
      });
    });

    // Listen for device disconnections
    socket.on('device-disconnect', deviceId => {
      setDevices(prev => prev.filter(d => d.id !== deviceId));
    });

    // Clean up on component unmount
    return () => socket.disconnect();
  }, []);

  return (
    <div style={{ padding: '2rem', maxWidth: '1200px', margin: '0 auto' }}>
      <h1>Device Data Dashboard</h1>
      <div style={{ 
        display: 'grid', 
        gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', 
        gap: '1.5rem',
        marginTop: '2rem'
      }}>
        {devices.map(device => (
          <div key={device.id} style={{ 
            border: '1px solid #e0e0e0', 
            borderRadius: '8px', 
            padding: '1.5rem',
            boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
          }}>
            <h3>Device: {device.id.slice(0,8)}</h3>
            <p style={{ fontSize: '2rem', fontWeight: 'bold', margin: '1rem 0' }}>
              {device.value}
            </p>
            <p style={{ color: '#666', fontSize: '0.9rem' }}>
              Last Updated: {device.lastUpdated.toLocaleTimeString()}
            </p>
          </div>
        ))}
      </div>
    </div>
  );
}

export default DeviceDashboard;

Responsive Design #

The CSS grid layout in the example ensures device cards adapt to any screen size—perfect for both desktop and tablet dashboards. You can tweak the minmax value to adjust card size based on your needs.

3. Client PC/平板: TCP Data Sender #

For your client devices, use whatever language you’re comfortable with. Here’s a simple Python example that sends numerical data every 3 seconds:

import socket
import time
import json

# Replace with your server's IP address
SERVER_HOST = 'your-server-ip'
SERVER_PORT = 3001

try:
    with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as s:
        s.connect((SERVER_HOST, SERVER_PORT))
        print("Connected to server. Starting data transmission...")
        while True:
            # Simulate a numerical reading (replace with your actual data source)
            sensor_value = round(time.time() % 100, 2)
            # Send data as JSON with a newline (helps server parse correctly)
            data = json.dumps({"value": sensor_value}) + "\n"
            s.sendall(data.encode('utf-8'))
            print(f"Sent: {sensor_value}")
            time.sleep(3)
except ConnectionRefusedError:
    print("Could not connect to server. Is it running?")

4. Pro Tips for Reliability & Scalability #

• Device Authentication: Add a simple handshake where devices send an API key on connection to block unauthorized access.
• Data Persistence: If you need to store historical data, use Redis for fast caching or PostgreSQL for long-term storage. You can add a "history" tab to the dashboard to view past readings.
• Error Handling: Add reconnection logic to your client devices (in case the server goes down) and add logging to the server to debug issues.
• Scaling: If you expect hundreds of devices, split your TCP server and Socket.io server into separate services, and use Redis Pub/Sub to pass data between them.

内容的提问来源于stack exchange，提问作者Josef