├── .gitignore
├── public
├── css
│ └── style.css
└── js
│ └── script.js
├── package.json
├── views
└── index.ejs
├── app.js
└── Readme
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
--------------------------------------------------------------------------------
/public/css/style.css:
--------------------------------------------------------------------------------
1 | *{
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | html, body{
8 |
9 | width: 100%;
10 | height: 100%;
11 | }
12 |
13 | #map{
14 | width: 100%;
15 | height: 100%
16 | }
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "real-time-device-tracking",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "server.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1",
8 | "start": "node server.js"
9 | },
10 | "keywords": [],
11 | "author": "",
12 | "license": "ISC",
13 | "dependencies": {
14 | "ejs": "^3.1.10",
15 | "express": "^5.1.0",
16 | "nodemon": "^3.1.9",
17 | "socket.io": "^4.8.1"
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/views/index.ejs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Real-Time Tracking
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/public/js/script.js:
--------------------------------------------------------------------------------
1 | const socket = io();
2 |
3 | if (navigator.geolocation) {
4 | navigator.geolocation.watchPosition(
5 | (position) => {
6 | const { latitude, longitude } = position.coords;
7 | socket.emit("send-location", { latitude, longitude });
8 | },
9 | (error) => {
10 | console.error(error);
11 | },
12 | {
13 | enableHighAccuracy: true,
14 | timeout: 5000,
15 | maximumAge: 0,
16 | }
17 | );
18 | }
19 |
20 | const map = L.map("map").setView([0, 0], 16);
21 |
22 | L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
23 | attribution: "Coder & codecafe & internetGuru",
24 | }).addTo(map);
25 |
26 | const markers = {};
27 |
28 | socket.on("receive-location", (data) => {
29 | const { id, latitude, longitude } = data;
30 | map.setView([latitude, longitude]);
31 | if (markers[id]) {
32 | markers[id].setLatLng([latitude, longitude]);
33 | } else {
34 | markers[id] = L.marker([latitude, longitude]).addTo(map);
35 | }
36 | });
37 |
38 | socket.on("user-disconnect", (id) => {
39 | if (markers[id]) {
40 | map.removeLayer(markers[id]);
41 | delete markers[id];
42 | }
43 | });
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | const express = require("express");
2 | const http = require("http");
3 | const socketio = require("socket.io");
4 | const path = require("path");
5 |
6 | const app = express();
7 | const server = http.createServer(app);
8 | const io = socketio(server);
9 |
10 | // Set up EJS templating
11 | app.set("view engine", "ejs");
12 |
13 | // Serve static files from the public directory
14 | app.use(express.static(path.join(__dirname, "public")));
15 |
16 | // Handle Socket.IO connections
17 | io.on("connection", (socket) => {
18 | // Handle send-location event
19 | socket.on("send-location", (data) => {
20 | // Broadcast location data to all connected clients
21 | io.emit("receive-location", { id: socket.id, ...data });
22 | });
23 |
24 | // Handle user disconnection
25 | socket.on("disconnect", () => {
26 | // Broadcast user disconnection to all connected clients
27 | io.emit("user-disconnect", socket.id);
28 | });
29 | });
30 |
31 | // Handle GET request to root URL
32 | app.get("/", (req, res) => {
33 | // Render index.ejs template
34 | res.render("index.ejs");
35 | });
36 |
37 | // Start server on port 3000
38 | server.listen(3000, () => {
39 | console.log("Server is running");
40 | });
41 |
42 |
43 |
--------------------------------------------------------------------------------
/Readme:
--------------------------------------------------------------------------------
1 | Real-Time Location Tracking Project
2 |
3 | Overview
4 |
5 | This project is a real-time location tracking system built using Socket.IO, Leaflet, and JavaScript. It allows multiple users to share their locations in real-time, and displays their locations on a map.
6 |
7 | Features
8 |
9 | - Real-time location sharing
10 | - Multiple user support
11 | - Interactive map display
12 | - Automatic user disconnection handling
13 |
14 | Installation
15 |
16 | 1. Clone the repository to your local machine using git clone.
17 | 2. Run npm install to install the required dependencies.
18 | 3. Start the server using node app.js.
19 |
20 | Usage
21 |
22 | 1. Open multiple browser tabs or windows and navigate to http://localhost:3000/
23 | 2. Allow location sharing when prompted.
24 | 3. The map will display the locations of all connected users in real-time.
25 |
26 | Technologies Used
27 |
28 | - Socket.IO for real-time communication
29 | - Leaflet for interactive map display
30 | - JavaScript for client-side logic
31 | - Node.js for server-side logic
32 |
33 | Contributing
34 |
35 | Contributions are welcome! If you'd like to contribute to this project, please fork the repository and submit a pull request.
36 |
37 | License
38 |
39 | This project is licensed under the MIT License. See LICENSE for details.
40 |
--------------------------------------------------------------------------------