DEV Community

Tanisha G
Tanisha G

Posted on

Server-Sent Events -Node.js

Image descriptionStaying ahead in the ever-changing field of web development entails embracing technologies that enable real-time communication between clients and servers. Server-Sent Events (SSE) is one such technology that has gained traction. When used in conjunction with Node.js, SSE opens up a new world of possibilities for developing responsive, interactive, and data-driven online apps. In this blog post, we will dive into SSE with nodejs using express

What is SSE?

SSE is a straightforward and efficient technique for transmitting real-time changes from the server to the client using a single HTTP connection.

SSE enables the server to deliver changes to the client as soon as they become available, reducing the need for constant polling or complicated WebSocket configurations. This technology is suitable for providing real-time updates, such as news feeds, sports scores, or monitoring systems.

We can delete the short polling strategy (making requests from the front end at regular intervals).

SSE Format

  1. Event— The” event ” field is optional and used to specify the type of event being sent.
  2. Data— The “ data ” field consists of the payload of the event. Multiple “data” lines, each representing a different piece of data, can be inserted within a single SSE message.
  3. Id— The “ id ” field is optional and can be used to assign a unique identifier to the event. This can assist clients in keeping track of which events they have received.
  4. Retry— The “retry” field is also optional and specifies the reconnection time (in milliseconds) that the client should wait before attempting to reconnect if the connection is lost.
event: myEvent
data: This is some data
data: More data for the event
id: 123
Enter fullscreen mode Exit fullscreen mode

Server Side Implementation

Create a server.js file in your root directory.

const express = require('express')
const app = express()
const cors = require("cors")
app.use(cors())
app.use(express.json())


function serverSentEevnts(req, res) {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  })

  let sseId = new Date().toLocaleDateString()

  //in regular interval it needs to be sent
  setInterval(() => {
    writeServerSendEvent(res, sseId, (new Date()).toLocaleTimeString());
  }, 5000)
  writeServerSendEvent(res, sseId, (new Date()).toLocaleTimeString());
}
function writeServerSendEvent(res, sseId, data) {
  res.write('id: ' + sseId + '\n');
  res.write("data: new server event " + data + '\n\n');
}

app.get("/talk", (req, res) => {
  serverSentEevnts(req, res)
})

app.listen(5000, () => {
  console.log("starting port on 5000")
})
Enter fullscreen mode Exit fullscreen mode

Client Side Implementation

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
   </head>
   <body>
      <input type="button" id="stopButton" value="Stop Listening"/>
      <hr/>
      <div id="content"></div>
      <script>
         var source = new EventSource('http://localhost:5000/talk');
         source.addEventListener('open', function(e) {
         document.getElementById('content').innerHTML += 'Connections to the server established..<br/>';
         }, false);
         source.onmessage = function(e) {
         document.getElementById('content').innerHTML += e.data + '<br/>';
         };
         document.getElementById('stopButton').onclick=function(){
         document.getElementById('content').innerHTML += 'Listening to server events stopped..<br/>';
         source.close();
         }
      </script>
   </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Mention this in the package.json file to run it locally.

"scripts": {
    "start": "http-server -p 8080"
  },
Enter fullscreen mode Exit fullscreen mode

You should be able to open http://localhost:8080 in your browser and watch the events. Pressing the button should stop listening to the server send events.

By now you will be able to see a successful working model of SSE in nodejs

I’ll keep on adding more topics as I learn.Thankyou

Top comments (1)

Collapse
 
der_gopher profile image
Alex Pliutau

Great write up! Does anyone use Server-Sent Events in their projects? If yes, for which use cases? This video dives into the main building blocks of Server-Sent Events in Go.
youtu.be/nvijc5J-JAQ