Session Agenda
- Overview of the session
- Why this topic?
- Definition and purpose of real-time dashboards
- Why Node.js for WebSockets?
- Architectural overview
- Integration approach
- Key Challenges
- Demo
- Q&A
Why This Topic?
- Real-time data is critical for dashboards in modern applications.
- Enables faster decision-making with live data
- Combines popular technologies (Laravel, Node.js, WebSockets) for scalable solutions
Definition and Purpose of Topic
- Definition: A real-time dashboard is a user interface that displays live, continuously updated data using technologies like WebSockets for instant updates.
- Purpose
- To deliver live metrics to end-users instantly (e.g., sales, transactions, IoT data).
- Improve UX by removing the need for polling or refreshing.
- Enhance user engagement with dynamic, interactive interfaces.
- Support critical applications like monitoring systems, live feeds, or collaborative tools.
- Example Use Cases
- Live analytics for e-commerce platforms.
- Real-time server monitoring for DevOps.
- Collaborative tools like chat or project management apps.
- Tracking and Monitoring Transactions
Why Node.js and Not Other Technologies?
- Why Node.js?
- Single-threaded and Event-driven Perfect for handling multiple WebSocket connections and real-time applications.
- Lightweight and scalable
- Large ecosystem (e.g., Socket.IO) simplifies WebSocket implementation.
- JavaScript-based, allowing code reuse between frontend and backend.
- Comparison with Other Technologies:
- PHP (Laravel alone): Not optimized for persistent connections like WebSockets; better for request-response cycles.
- Python :Team expertise and integration complexity with Laravel.
- Java: Robust but complex setup for WebSockets
- Firebase: Real-time, but not open source and adds external dependency.
- Pusher: Paid service, less control over infrastructure.
Architectural Overview
- Laravel for backend logic, authentication, database interaction.
- Node.js WebSocket server for real-time event broadcasting.
- Frontend uses Blade Template with JavaScript (e.g., Socket.IO) to receive updates.
- Data Flow
- Laravel processes and stores data (e.g., in MySQL)
- Node.js listens for updates and broadcasts via WebSockets.
- Frontend subscribes to WebSocket events for real-time updates.
Integration Approach
- MySQL
- Create User and entries table
- User Table For Basic Authentication data store
- Entries table for store and fetch the transaction
- Laravel
- Create basic Authentication Business Logic Flow
- Write a method to redirect dashboard page.
- Create dashboard.blade.php (dashboard) file for real time transaction monitor and update. (at here we are gonna add socket.io js file in blade file so we can trigger the event depending on socket response.
- Create entry.blade.php file and write store method to store the transaction
- Node
- Create Websocket Server
- Include Mysql library and make connection for fetch and update the transaction.
- Write Socket.emit and Socket.on method.
- What is socket.on
- socket.on(eventName, callback) is a method used to listen for events from the client (like the browser or another system).
- Example
- socket.on(‘forwardEntry’, (data) => { … });
- This listens for a forwardEntry event sent from the client.
- What is socket.emit
- socket.emit(eventName, data) is a method used to send events (with optional data) to the connected client.
- Example
- socket.emit(‘forwardError’, { message: ‘Failed to update entry.’ });
- This sends an error message back to the client if something fails.
- You also used io.emit(…), which broadcasts the event to all connected clients, not just one.
- What is setInterval?
- setInterval(function, timeInMs) repeatedly calls a function every timeInMs milliseconds.
- Example
- setInterval(() => {
- const query = db.query(‘SELECT * FROM entries WHERE id > ?’, [latestEntryId]);
- …
- }, 1000);
- This means every 1 second, your server checks for new rows in the entries table and emits them if found.
Key Challenges
- Synchronizing Laravel and Node.js services.
- Ensuring security (e.g., authentication for sockets).
- Managing WebSocket reconnections and client lifecycle.
- Handling thousands of concurrent WebSocket connections.
- Minimizing delays in real-time updates.
When to Use This Approach
- When high-frequency, real-time data is needed.
- For collaborative apps, live dashboards, chat systems, notifications.
- When scalability and control over the real-time infrastructure is needed.