Skip to content

Eclassic32/IOT-Lab

Repository files navigation

IoT Weight Monitor

A complete real-time weight monitoring system with multiple communication protocols (Socket.IO and MQTT), featuring a modern web dashboard with live graphs and data persistence.

๐Ÿš€ Features

  • Real-time Monitoring: Live weight display with 1-second updates
  • 5-Minute Graph: Interactive Chart.js graph with historical data
  • Dual Protocol Support:
    • Socket.IO (WebSocket) for direct connections
    • MQTT for IoT standard protocol
  • Server-Side Persistence: Data survives page refreshes
  • Connection Monitoring: Visual status indicators
  • Activity Logging: Comprehensive event logging
  • CSV Export: Download historical data
  • Responsive Design: Beautiful UI that works on all devices

๐Ÿ“‹ Prerequisites

  • Node.js (v14 or higher)
  • npm or yarn
  • MQTT Broker (optional, for MQTT version):
    • Local: Mosquitto, EMQX, HiveMQ
    • Or use public test broker

๐Ÿ”ง Installation

  1. Clone the repository:

    git clone <repository-url>
    cd IOT-Lab
  2. Install dependencies:

    npm install
  3. Configure environment:

    cp .env.example .env

    Edit .env to configure your setup. See CONFIGURATION.md for details.

๐ŸŽฏ Quick Start

Socket.IO Version (Simplest)

# Terminal 1 - Start server
npm start

# Terminal 2 - Start weight sensor
npm run weight

# Browser - Open dashboard
http://localhost:3000

MQTT Version (IoT Standard)

# Terminal 1 - Start MQTT server
npm run start:mqtt

# Terminal 2 - Start MQTT weight sensor
npm run mqtt:device

# Browser - Open dashboard
http://localhost:3000

See QUICKSTART-MQTT.md for detailed MQTT setup.

๐Ÿ“ Project Structure

IOT-Lab/
โ”œโ”€โ”€ server/
โ”‚   โ”œโ”€โ”€ server.js              # Socket.IO server
โ”‚   โ””โ”€โ”€ server-mqtt.js         # MQTT to WebSocket bridge
โ”œโ”€โ”€ device/
โ”‚   โ”œโ”€โ”€ weight-sensor.js       # Socket.IO weight sensor
โ”‚   โ””โ”€โ”€ mqtt-weight-sensor.js  # MQTT weight sensor
โ”œโ”€โ”€ public/
โ”‚   โ”œโ”€โ”€ index.html             # Web dashboard
โ”‚   โ”œโ”€โ”€ styles.css             # Styling
โ”‚   โ””โ”€โ”€ app.js                 # Frontend logic
โ”œโ”€โ”€ .env.example               # Environment template
โ”œโ”€โ”€ .env                       # Your configuration (git-ignored)
โ””โ”€โ”€ package.json               # Dependencies

๐ŸŽฎ Available Scripts

Command Description
npm start Start Socket.IO server
npm run start:mqtt Start MQTT-to-WebSocket server
npm run dev Development mode with auto-restart (Socket.IO)
npm run dev:mqtt Development mode with auto-restart (MQTT)
npm run weight Start Socket.IO weight sensor simulator
npm run mqtt:device Start MQTT weight sensor simulator

โš™๏ธ Configuration

Environment variables in .env:

PORT=3000                                    # Server port
MQTT_BROKER=mqtt://test.mosquitto.org:1883  # MQTT broker URL
MQTT_TOPIC=weight/sensor/#                  # MQTT topic pattern
DEVICE_ID=WEIGHT_SCALE_001                  # Device identifier
MAX_HISTORY_MINUTES=5                       # Data retention time

See CONFIGURATION.md for complete configuration guide.

๐Ÿ“š Documentation

๐Ÿ”Œ Connecting Real IoT Devices

MQTT (Recommended for IoT)

ESP32/Arduino:

#include <WiFi.h>
#include <PubSubClient.h>

const char* mqtt_server = "your-server-ip";
const char* topic = "weight/sensor/SCALE_001";

void loop() {
  float weight = readScale(); // Your sensor code
  char msg[10];
  dtostrf(weight, 6, 2, msg);
  client.publish(topic, msg);
  delay(1000);
}

Raspberry Pi/Python:

import paho.mqtt.client as mqtt

client = mqtt.Client()
client.connect("localhost", 1883)

while True:
    weight = read_weight_sensor()  # Your sensor code
    client.publish("weight/sensor/SCALE_001", str(weight))
    time.sleep(1)

Socket.IO

JavaScript/Node.js:

const io = require('socket.io-client');
const socket = io('http://localhost:3000');

socket.emit('register-device', {
  deviceId: 'SCALE_001',
  deviceType: 'Weight Scale'
});

setInterval(() => {
  const weight = readWeightSensor();
  socket.emit('device-data', weight.toString());
}, 1000);

๐ŸŒ API Endpoints

Health Check

GET /api/health

Returns server status and statistics.

Historical Data (MQTT version)

GET /api/history

Returns last 5 minutes of weight data.

๐Ÿ—๏ธ Architecture

Socket.IO Version

Device (Socket.IO) โ†’ Server (WebSocket) โ†’ Web Dashboard

MQTT Version

Device (MQTT) โ†’ MQTT Broker โ†’ Server (Bridge) โ†’ Web Dashboard (WebSocket)

๐Ÿ”’ Security

For production deployment:

  • โœ… Use HTTPS/WSS
  • โœ… Enable authentication
  • โœ… Use secure MQTT (mqtts://)
  • โœ… Implement access control
  • โœ… Keep .env out of version control
  • โœ… Use strong passwords
  • โœ… Enable TLS certificates

๐Ÿ› Troubleshooting

Port already in use

# Windows - Find and kill process on port 3000
Get-NetTCPConnection -LocalPort 3000 | Select-Object -ExpandProperty OwningProcess | ForEach-Object { Stop-Process -Id $_ -Force }

MQTT connection failed

  1. Check MQTT broker is running
  2. Verify broker URL in .env
  3. Test with public broker: mqtt://test.mosquitto.org:1883

No data appearing

  1. Check browser console for errors
  2. Verify device is connected (check server logs)
  3. Ensure topic patterns match (MQTT)

๐Ÿค Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

๐Ÿ“„ License

MIT License

๐Ÿ‘จโ€๐Ÿ’ป Development

Auto-restart during development:

npm run dev        # Socket.IO version
npm run dev:mqtt   # MQTT version

๐ŸŽจ Features in Detail

  • Large Weight Display: 8rem font size, center-positioned
  • Live Graph: Chart.js with 300 data points (5 minutes ร— 60 seconds)
  • Server Persistence: Data stored in server memory
  • Auto-cleanup: Old data automatically removed after 5 minutes
  • Dual Status: Separate indicators for WebSocket and MQTT
  • Export Functionality: Download logs as CSV
  • Responsive Design: Glassmorphism UI with gradient background

๐Ÿ“Š Data Format

Weight data should be sent as a string:

"75.50"

The system will parse and display it automatically.

๐Ÿ”„ Comparison: Socket.IO vs MQTT

Feature Socket.IO MQTT
Setup Complexity Simple Requires broker
Protocol Standard Proprietary IoT standard
Scalability Medium High
Reliability Good Excellent
IoT Integration Custom Native
Message Queuing No Yes
Offline Messages No Yes (with broker)
Best Use Case Direct connections IoT deployments

๐Ÿ“ž Support

For issues and questions:

  1. Check documentation files
  2. Review server/device logs
  3. Test with simulators first
  4. Verify environment configuration

Made with โค๏ธ for IoT weight monitoring

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •