1.0.0 • Published 5 months ago
conntrack v1.0.0
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
- Live User Tracking - Monitor active users in a chat application or dashboard.
- IoT Monitoring - Track connected IoT devices in real-time.
- E-commerce - View live visitors on a website.
- Gaming - Show live player count in multiplayer games.
1.0.0
5 months ago