This content originally appeared on DEV Community and was authored by Mahmudur Rahman
Hey Devs! 👋
If you've ever wanted to track the number of connected users on your app in real-time, you're in luck! I've built ConnTrack, a lightweight npm package that helps you monitor connected devices using Socket.IO effortlessly. Whether you're working with Node.js, React, EJS, or vanilla HTML, ConnTrack provides instant updates on device connections and disconnections.
🌟 Why Use ConnTrack?
- 📡 Real-time device tracking
- 🔄 Automatic connection/disconnection updates
- 🔥 Plug-and-play with Express, React, and more
- 🛠 Simple API with minimal setup
📦 Installation
Install ConnTrack via npm:
npm install conntrack
Or using yarn:
yarn add conntrack
🛠️ Usage
🚀 Node.js (Express Server) Implementation
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("deviceConnected", (data) => {
console.log(`🔵 Device Connected: ${data.id}`);
});
io.on("deviceDisconnected", (data) => {
console.log(`🔴 Device Disconnected: ${data.id}`);
});
server.listen(3003, () => {
console.log("🚀 Server running on http://localhost:3003");
});
🎭 EJS Integration (Server-side Rendering)
Server Setup
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");
});
server.listen(3004, () => console.log("🚀 Server running on http://localhost:3004"));
EJS View 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;
});
</script>
</head>
<body>
<h1>Connected Devices: <span id="count">0</span></h1>
</body>
</html>
⚛️ React.js Implementation
import { useEffect, useState } from "react";
import { io } from "socket.io-client";
const socket = io("http://localhost:3003");
function DeviceTracker() {
const [deviceCount, setDeviceCount] = useState(0);
useEffect(() => {
socket.on("deviceUpdate", (data) => {
setDeviceCount(data.count);
});
}, []);
return <h1>Connected Devices: {deviceCount}</h1>;
}
export default DeviceTracker;
🔔 Real-Life Use Cases
🚀 Live Streaming Apps – Track the number of viewers in real time.
📊 Admin Dashboards – Monitor active users on your platform.
🎮 Multiplayer Games – Keep count of connected players.
📡 IoT Applications – Track real-time connections of IoT devices.
📜 API Events
1️⃣ deviceUpdate
Emitted when a device connects or disconnects.
socket.on("deviceUpdate", (data) => {
console.log("Connected Devices:", data.count);
});
2️⃣ deviceConnected
Triggered when a new device joins.
socket.on("deviceConnected", (data) => {
console.log("New Device Connected:", data.id);
});
3️⃣ deviceDisconnected
Triggered when a device leaves.
socket.on("deviceDisconnected", (data) => {
console.log("Device Disconnected:", data.id);
});
🚀 Try It Out!
conntrack - npm
Real-time connected device tracking with Socket.IO. Latest version: 1.0.0, last published: 7 minutes ago. Start using conntrack in your project by running `npm i conntrack`. There are no other projects in the npm registry using conntrack.
npmjs.com
conntrack makes it easy to implement real-time device tracking. Give it a shot and let me know your thoughts in the comments! 😊
Happy coding! ✨
I would love to hear your feedback! 🚀 Let me know if you have any feature requests. 💡
This content originally appeared on DEV Community and was authored by Mahmudur Rahman
Mahmudur Rahman | Sciencx (2025-02-16T01:48:33+00:00) ConnTrack: Real-time Device Connection Tracker for Your Web Apps. Retrieved from https://www.scien.cx/2025/02/16/conntrack-real-time-device-connection-tracker-for-your-web-apps/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.