Realtime Location Tracker

A simple but effective realtime location tracking application built with Node.js, Express, Socket.io, and Leaflet.js. This project demonstrates how to track a user's location in a web browser and display it on a map for all connected clients to see in realtime.

🌟 Features

• Live Location Tracking: Uses the browser's Geolocation API for accurate, realtime location data.
• IP Geolocation Fallback: If the Geolocation API is unavailable or denied, it gracefully falls back to an IP-based location service to provide an approximate location.
• Realtime Map Updates: Markers on a Leaflet.js map move smoothly as location data is received.
• Multi-User Support: Shows markers for all connected users, each with a unique ID.
• Clean & Responsive UI: A simple interface that works on both desktop and mobile browsers.
• WebSocket Communication: Efficient, bidirectional communication between the client and server using Socket.io.

🛠️ Tech Stack

• Backend:
  • Node.js: JavaScript runtime environment.
  • Express.js: Web framework for Node.js.
  • Socket.io: Library for realtime, bidirectional and event-based communication.
• Frontend:
  • EJS: Embedded JavaScript templating.
  • Leaflet.js: An open-source JavaScript library for mobile-friendly interactive maps.
  • Vanilla JavaScript (ES6+).

🚀 Getting Started

Follow these instructions to get a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

Make sure you have the following installed on your system:

• Node.js (v14 or newer recommended)
• npm (comes with Node.js)
• Git

Installation & Setup

1. Clone the repository:

   Open your terminal and run the following command to clone the project:

   git clone https://github.com/VisXhal06/Realtime_tracker.git

2. Navigate to the project directory:

   cd Realtime-tracker-backend

3. Install dependencies:

   Install all the required npm packages.

   npm install

Running the Application

1. Start the server:

   You can run the application with the following command:

   node app.js

   Or, for a better development experience with automatic restarts on file changes, you can install nodemon:

   npm install -g nodemon
   nodemon app.js

2. View the application:

   Open your web browser and navigate to: http://localhost:3000

   To see the multi-user feature in action, open the link in multiple browser tabs or on different devices on the same network.

🔧 How It Works

The application follows a simple client-server architecture:

1. Client Connection: When a user opens the web page, the browser connects to the server using Socket.io.
2. Location Request: The client-side JavaScript attempts to get the user's location using the navigator.geolocation API.
3. Geolocation Fallback: If the Geolocation API fails (e.g., permission denied, timeout), the client makes a request to https://ip-api.com/json to get an approximate location based on the user's IP address.
4. Emit Location: The obtained coordinates (either from Geolocation or IP lookup) are sent to the server via a send-location socket event.
5. Broadcast Location: The server receives the coordinates and broadcasts them to all connected clients using a receive-location event. This event includes the user's unique socket ID.
6. Update Map: Each client listens for the receive-location event. When it receives data, it either creates a new marker on the Leaflet map for a new user or updates the position of an existing marker.
7. User Disconnect: When a user disconnects, the server emits a user-disconnected event with the user's ID, allowing clients to remove the corresponding marker from the map.

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

📄 License

This project is licensed under the ISC License.