Server-Sent Events (SSE) is a web technology that enables servers to send updates to the client in real-time. It is a much simpler alternative to WebSockets and a suitable choice when the server needs to push updates to clients without a request, but the clients do not necessarily need to send messages to the server. This tutorial demonstrates how to implement SSE in a Node.js application.
Setting Up the Project
To get started, initiate a new Node.js project by running npm init
in your terminal. Once you have your package.json
file ready, install the ‘express’ library as our server framework using npm install express
.
Creating the Server
Create a new file named server.js
. Begin with setting up an Express server that can serve static files and that has a route prepared to handle SSE:
const express = require('express');
const app = express();
app.use(express.static('public'));
app.get('/events', (req, res) => {
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
//... more to follow
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));
Implementing SSE
In the ‘/events’ route, you implement the actual SSE handling. Here is an essential configuration pattern:
app.get('/events', (req, res) => {
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');
res.flushHeaders();
// Sends a simple message at a set interval
const interval = setInterval(() => {
res.write(`data: ${new Date().toLocaleTimeString()}
`);
}, 1000);
req.on('close', () => {
clearInterval(interval);
});
});
Here, data is sent to the client every second with the current time. If the client disconnects, the event will stop sending the updates.
Client-Side Setup
You also need some client-side JavaScript to interact with the stream:
const eventSource = new EventSource('/events');
eventSource.onmessage = function(e) {
console.log('Message:', e.data);
};
eventSource.onerror = function(e) {
console.error('Error occurred', e);
};
Now, everything is set up for the server to stream data, and the client to receive updates in real time.
Complete Server Code Example
const express = require('express');
const app = express();
app.use(express.static('public'));
app.get('/events', (req, res) => {
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');
res.flushHeaders();
const interval = setInterval(() => {
res.write(`data: ${new Date().toLocaleTimeString()}
`);
}, 1000);
req.on('close', () => {
clearInterval(interval);
});
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));
Conclusion
In this article, we walked through the steps to implement SSE in a Node.js application using Express. With SSE, you efficiently establish a one-way channel from the server to the client, allowing the server to send real-time updates while preserving the simplicity and lower complexity compared to WebSockets. Now you should have a solid foundational understanding of how Server-Sent Events can be used in your web applications.