Implement Server-Sent Events in NodeJS and integrate this unidirectional event flow with React

Implement Server-Sent Events in NodeJS and integrate this unidirectional event flow with React

Implement Server-Sent Events in NodeJS using NodeJS Events and integrate this event with React application. In this implementation we will create a Nodejs app with events and this will be continuously sending the updated data to the react clients when the data is being changed.

Agenda:

Step 1: We will implement server-sent events (SSE) express Backend

Step 2: We will Run the server-sent events (SSE) express Backend

Step 3: Update the score

Step 4: Will see the score in the browser without refresh

Step 5: Go to the step 3

Step 6: Implement the React Web App Frontend to receive the Events

Step 7: Update the score

Step 8: Will see the score in the React applications without refresh

Step 9: Go to the step 7

Let get started.

Step 1: Implement Server-Sent Events Express Backend

Create a file with name node_sse.js and add the following codes.

File:node_sse.js

                            const express = require('express');
                            const bodyParser = require('body-parser');
                            const cors = require('cors');
                            const app = express();
                    
                            app.use(cors());
                            app.use(bodyParser.json());
                            app.use(bodyParser.urlencoded({extended: false}));
                    
                            app.get('/get-status', (request, response) => response.json({activeClients: activeClients.length}));
                    
                            const PORT = 3000;
                    
                            let activeClients = [];
                            let currentScore = {};
                    
                            function sendEventsToAllActiveClients(newScore) {
                                activeClients.forEach(client => client.response.write(`data: ${JSON.stringify(newScore)}\n\n`))
                            }
                    
                            async function updateScore(request, respsonse, next) {
                                const newScore = request.body;
                                currentScore=newScore;
                                respsonse.json(newScore)
                                return sendEventsToAllActiveClients(newScore);
                            }
                    
                            function eventsHandler(request, response, next) {
                                const headers = {
                                    'Content-Type': 'text/event-stream',
                                    'Connection': 'keep-alive',
                                    'Cache-Control': 'no-cache'
                                };
                                response.writeHead(200, headers);
                                const data = `data: ${JSON.stringify(currentScore)}\n\n`;
                                response.write(data);
                                const clientId = Date.now();
                                const newClient = {
                                    id: clientId,
                                    response
                                };
                            
                                activeClients.push(newClient);
                                request.on('close', () => {
                                    console.log(`${clientId} Connection closed`);
                                    activeClients = activeClients.filter(client => client.id !== clientId);
                                });
                            }
                            
                            app.get('/get-score', eventsHandler);
                            app.post('/score', updateScore);
                    
                            app.listen(PORT, () => {
                                console.log(`Score Events service listening at http://localhost:${PORT}`)
                            });
                          

Let's understand the above codes.

                                app.get('/get-status', (request, response) => response.json({activeClients: activeClients.length}));
                          

The above code is an API endpoint to get the status of the active events. This API will return the total number of active events currently listinging the server.

                            let activeClients = [];
                            let currentScore = {};
                          

The active clients will contain all the active clients connected to our Server-Sent Events server.

                            function sendEventsToAllActiveClients(newScore) {
                                activeClients.forEach(client => client.response.write(`data: ${JSON.stringify(newScore)}\n\n`))
                            }
                          

The above method will be responsible to send the response to all the active clients, who are actively listening to our Server-Sent Events server. They will get the updated score once anyone updates the score.

                            async function updateScore(request, respsonse, next) {
                                const newScore = request.body;
                                currentScore=newScore;
                                respsonse.json(newScore)
                                return sendEventsToAllActiveClients(newScore);
                            }
                          

The above function is used to update the score. This is bind with app.post('/score', updateScore) function, when you call the API /score, this function will be called and will update the score with a given score in the request body. After the updating the score this function will call the sendEventsToAllActiveClients function to send response to all the clients.

                            function eventsHandler(request, response, next) {
                                const headers = {
                                    'Content-Type': 'text/event-stream',
                                    'Connection': 'keep-alive',
                                    'Cache-Control': 'no-cache'
                                };
                                response.writeHead(200, headers);
                                const data = `data: ${JSON.stringify(currentScore)}\n\n`;
                                response.write(data);
                                const clientId = Date.now();
                                const newClient = {
                                    id: clientId,
                                    response
                                };
                            
                                activeClients.push(newClient);
                                request.on('close', () => {
                                    console.log(`${clientId} Connection closed`);
                                    activeClients = activeClients.filter(client => client.id !== clientId);
                                });
                            }
                          

The above function will be called when any client will call the API /get-score to get the updated score. Also, this the function will close the connection when a client will close the connection. This function also maintains the active event listeners to send the updated score whenever the score will be updated.

                            app.get('/get-score', eventsHandler);
                            app.post('/score', updateScore);
                          

These are the two endpoints, one for getting the score and the other for updating the score(POST).

                            app.listen(PORT, () => {
                                console.log(`Score Events service listening at http://localhost:${PORT}`)
                            });
                        

The above code is for the server to listen on a given port.

Step 2: Run the server-sent events (SSE) express Backend

Run the server-sent events (SSE) express Backend using the below command.

node node_sse.js

If you can see the below message, it means your server is running successfully.

Implement Server-Sent Events in NodeJS and integrate this unidirectional event flow with React

Step 3: Update the score

Now open the postman and update the score.

Implement Server-Sent Events in NodeJS and integrate this unidirectional event flow with React

Or use the following code to update the score.

                            curl --location --request POST 'http://localhost:3000/score' \
                            --header 'Content-Type: application/json' \
                            --data-raw '{
                                "score": "150"
                            }'
                         

Step 4: See the score in the browser

Open browser and open below url in the browser.

http://localhost:3000/get-score

Implement Server-Sent Events in NodeJS and integrate this unidirectional event flow with React

Step 5: Update the score with other score and see the result

Now you need to update the score with another number and see the result without refreshing the page. You can see the score is updating without any refresh.

Now open another tab and open the same URL and see the result after updating the score, all the opened tabs will have the updated score without any refresh. It means our server is sending the data to all the clients and clients are listening to the events.

Now let's implement a client in React application.

Step 6: Implement the React Web App Frontend to receive the Events

To create a React client, run the following commands one by one.

npx create-react-app sse_client 

cd sse_client

npm start

Now remove all codes and update sse_client/sse-client/src/App.js file with following codes.
sse_client/sse-client/src/App.js

                            import React, { useState, useEffect } from 'react';
                            import './App.css';
                    
                            function App() {
                            const [score, setScore] = useState({});
                            const [listening, setListening] = useState(false);
                    
                            useEffect(() => {
                                if (!listening) {
                                const events = new EventSource('http://localhost:3000/get-score');
                                events.onmessage = (event) => {
                                    const parsedData = JSON.parse(event.data);
                                    console.log('event :', parsedData);
                                    if (parsedData) {
                                    setScore(parsedData);
                                    }
                                };
                                setListening(true);
                                }
                            }, [listening, score]);
                            
                            return (
                                <h1>Score:{score.score || 0}</h1>
                            );
                            }
                    
                            export default App;
                          

Run the react app using following command

Run the react app using following command and open the browser

npm start

Implement Server-Sent Events in NodeJS and integrate this unidirectional event flow with React

Step 7: Update the score as we did in step 3

Now you need to update the score with another number and see the react app without refreshing the page. You can see the score is updating without any refresh.

Step 8: See the score in the React applications without refresh

Now open another tab of react app and open the same URL and see the result after updating the score, all the opened tab will have the updated score without any refresh. It means our server is sending the data to all the clients and clients are listening to the events.

---

Conclusion:

This article served as a complete server-sent events demonstration. In this article, we implement both the backend and frontend solution to handle real-time information flowing from server to client using res.write function. It was a unidirectional information flow. For more knowledge read out other articles.

Related Keywords:

Implement Server-Sent Events in NodeJS

Simple Way to Implement Server Sent Events in Node.js

How To Use Server-Sent Events in Node.js

Server-Sent Events with NodeJS

Implement Server-Sent Events in Node.js and React

Server-Sent events NodeJS express example

Server-Sent events NodeJS Express with React example