1.0.0 • Published 5 months ago

conntrack v1.0.0

Weekly downloads
-
License
MIT
Repository
github
Last release
5 months ago

ConnTrack - Real-time Device Connection Tracker

ConnTrack is a lightweight npm package that allows you to track real-time connected devices using Socket.IO. It provides instant updates on connected/disconnected users and total device count with real-time notifications.

🚀 Installation

Install via npm:

npm install conntrack

Or using yarn:

yarn add conntrack

📌 Features

  • Real-time device connection tracking
  • Emits updates on connection and disconnection
  • Supports multiple environments (Node.js, React, HTML, EJS, etc.)
  • Provides notifications on connect/disconnect
  • Ideal for monitoring active users in applications

🛠️ Usage

1️⃣ Node.js (Express Server)

const express = require("express");
const http = require("http");
const { initDeviceTracker } = require("conntrack");

const app = express();
const server = http.createServer(app);
const { io } = initDeviceTracker(server);

io.on("connection", (socket) => {
  console.log(`Device Connected: ${socket.id}`);
  
  socket.on("disconnect", () => {
    console.log(`Device Disconnected: ${socket.id}`);
  });
});

server.listen(3003, () => {
  console.log("Server running on http://localhost:3003");
});

2️⃣ EJS (Server-side Rendering)

const express = require("express");
const http = require("http");
const { initDeviceTracker } = require("conntrack");

const app = express();
const server = http.createServer(app);
const { io } = initDeviceTracker(server);

app.set("view engine", "ejs");
app.get("/", (req, res) => {
  res.render("index");
});

io.on("connection", (socket) => {
  console.log(`Device Connected: ${socket.id}`);
  io.emit("notification", { message: "A new device has connected." });

  socket.on("disconnect", () => {
    console.log(`Device Disconnected: ${socket.id}`);
    io.emit("notification", { message: "A device has disconnected." });
  });
});

server.listen(3000, () => console.log("Server running on http://localhost:3000"));

EJS File: views/index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
  <script>
    const socket = io();
    socket.on("deviceUpdate", (data) => {
      document.getElementById("count").innerText = data.count;
    });
    
    socket.on("notification", (data) => {
      console.log(data.message);
      alert(data.message);
    });
  </script>
</head>
<body>
  <h1>Connected Devices: <span id="count">0</span></h1>
</body>
</html>

3️⃣ React.js

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

const socket = io("http://localhost:3000");

function DeviceTracker() {
  const [deviceCount, setDeviceCount] = useState(0);

  useEffect(() => {
    socket.on("deviceUpdate", (data) => {
      setDeviceCount(data.count);
    });

    socket.on("notification", (data) => {
      console.log(data.message);
      alert(data.message);
    });
  }, []);

  return <h1>Connected Devices: {deviceCount}</h1>;
}

export default DeviceTracker;

📜 API Events

1. deviceUpdate

Emitted when a device connects or disconnects.

socket.on("deviceUpdate", (data) => {
  console.log("Connected Devices:", data.count);
});

2. deviceConnected

Fires when a new device connects.

socket.on("deviceConnected", (data) => {
  console.log("New Device Connected:", data.id);
  alert("New Device Connected: " + data.id);
});

3. deviceDisconnected

Fires when a device disconnects.

socket.on("deviceDisconnected", (data) => {
  console.log("Device Disconnected:", data.id);
  alert("Device Disconnected: " + data.id);
});

🔥 Real-life Use Cases

  1. Live User Tracking - Monitor active users in a chat application or dashboard.
  2. IoT Monitoring - Track connected IoT devices in real-time.
  3. E-commerce - View live visitors on a website.
  4. Gaming - Show live player count in multiplayer games.

1.0.0

5 months ago