Efficient Real-Time Updates in Web Applications Using PostgreSQL Triggers and Node.js
Buildbot Technologies Private Limited
We build your idea, We operate your product and We transfer the ownership
Introduction:
In modern web applications, real-time updates are crucial for providing users with a dynamic and interactive experience. However, implementing real-time updates efficiently, especially when dealing with database changes, can be challenging without resorting to resource-intensive techniques like long polling or WebSockets. In this blog post, we'll explore a clever approach to achieving real time updates using PostgreSQL triggers and Node.js without compromising performance.
The Problem:
Imagine you're developing an application that tracks the status of devices. You need to display the number of connected and disconnected devices in real-time to users. Traditional methods like polling the database at regular intervals can be inefficient and lead to unnecessary server load.
The Solution:
To address this challenge, we'll leverage PostgreSQL's NOTIFY/LISTEN mechanism along with triggers to notify our Node.js backend whenever there's an update in the device table. Then, we'll use Node.js to broadcast these updates to connected clients using Server-Sent Events (SSE).
Step 1: Setting up PostgreSQL Triggers
We'll create a trigger function that notifies when an event occurs, and then create a trigger on the desired table to invoke this function. Here's an example of how you can set up triggers in PostgreSQL:
Create a trigger function that notifies when an event occurs
CREATE OR REPLACE FUNCTION notify_event_trigger()
RETURNS TRIGGER AS $$
BEGIN
-- Convert the NEW row to JSON and send it as a notification
PERFORM pg_notify('event_trigger', row_to_json(NEW)::text);
RETURN NEW;
END;
$$ LANGUAGE plpgsql;
-- Create a trigger on the table 'your_table_name'
CREATE TRIGGER usertableupdate
AFTER INSERT OR UPDATE OR DELETE ON users
FOR EACH ROW
EXECUTE FUNCTION notify_event_trigger();
Step 2: Listening for Notifications in Node.js
In your Node.js backend, you'll use the pg library to listen for notifications from PostgreSQL. Here's a simplified
Example:
const http = require('http');
const { Client } = require('pg');
const cors = require('cors');
const client = new Client({
user: '',
host: '',
database: '',
password: '',
port: '', });
client.connect() .then(() => {
console.log('Connected to PostgreSQL database');
client.query('LISTEN event_trigger') .then(() => console.log('Listening for table changes')) .catch(error => console.error('Error listening for table changes:', error)); }).catch(error => console.error('Error connecting to PostgreSQL database:', error));
const server = http.createServer((req, res) => {
cors()(req, res, () => {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive',
'Access-Control-Allow-Origin': '*'
});
client.on('notification', async (notification) => {
console.log("Received notification:", notification.payload);
res.write(`data: ${notification.payload}\n\n`); });
req.on('close', () => {
console.log('Client disconnected'); }); }); });
const PORT = 3000;
server.listen(PORT, () => {
console.log(`Server running at http://localhost:${PORT}/`);
});
Step 3: Broadcasting Updates to Clients Using SSE
On the client-side, you can use the EventSource API to establish a connection with the Node.js server and receive real-time updates. Here's a basic example (similar to the one provided earlier):
Recommended by LinkedIn
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Real-time Notifications</title>
</head> <body> <h1>Real-time Notifications</h1> <div id="notification-container"></div> <script>
// Function to create and append a new notification element
function createNotificationElement(message) {
const notificationContainer = document.getElementById('notification-container');
const notificationElement = document.createElement('div');
notificationElement.textContent = JSON.stringify(message);
notificationContainer.appendChild(notificationElement); }
// Connect to the SSE server
const eventSource = new EventSource('http://localhost:3000');
// Listen for incoming messages
eventSource.addEventListener('message', function(event) {
const data = JSON.parse(event.data);
createNotificationElement(data); // Update UI with the received data
});
</script>
</body>
</html>
NOTE:Handling Connections and Disconnections
Remember to handle connection management efficiently on both the server and client sides. Clients should reconnect automatically if the connection is lost, and the server should manage resources appropriately to avoid memory leaks.
Now you might be wondering when to utilize SSE and when it might not be the best choice. Here are a few scenarios to consider.
When to use
Live Feeds and Notifications: SSE is commonly used in applications that require real-time updates, such as live news feeds, social media feeds, and notification systems. It allows clients to receive updates from the server as soon as they occur, providing a seamless user experience.
Collaborative Editing: SSE can be employed in collaborative editing tools to notify users of changes made by other collaborators in real-time. This ensures that all users have the most up-to-date version of the document.
When not to use
Bidirectional Communication: SSE is limited to unidirectional communication from the server to the client. If bidirectional communication is required, such as in chat applications where users need to send messages back to the server, technologies like WebSockets may be more appropriate.
High-Frequency Data: SSE is well-suited for low to moderate frequency updates. However, if the application requires very high-frequency updates, such as real-time financial data or multiplayer gaming with high update rates, SSE may not be able to handle the volume of updates efficiently.
Conclusion:
By utilizing PostgreSQL triggers, Node.js, and Server-Sent Events, we've implemented a robust and efficient solution for real-time updates in web applications without resorting to resource-intensive techniques like long polling or WebSockets. This approach ensures timely updates while maintaining performance and scalability.
Implementing real-time updates is just one example of how creative solutions can solve complex problems in web development. By leveraging the right technologies and techniques, developers can deliver exceptional user experiences while optimizing performance and resource utilization.
I hope this article has provided you with valuable insights into the topic at hand. Whether you're a beginner or an experienced professional, there's always something new to learn and discover in the world. By sharing my knowledge and experience with you, I hope to have sparked your curiosity and inspired you to explore further. Thank you for taking the time to read this article, and I look forward to hearing your thoughts and feedback.
Written By,