Knowledge Base | Daily Notes

Server Sent Events

Aug 30, 20243 min read

Server-Sent Events (SSE) and WebSockets are both technologies used for real-time communication between a client (typically a web browser) and a server. However, they have some key differences in terms of their implementation and use cases.

Server-Sent Events (SSE) is a unidirectional communication protocol that allows a server to push data to the client over a single HTTP connection. It is built on top of standard HTTP and uses the EventSource API in the browser for receiving server updates. SSE is ideal for scenarios where the server needs to send periodic updates or stream data to the client, such as real-time notifications, live feeds, or progress updates. SSE is supported in most modern web browsers.

WebSockets, on the other hand, provide bidirectional communication channels between a client and a server over a single TCP connection. Unlike SSE, WebSockets allow both the client and the server to send messages to each other at any time. This enables more interactive and real-time applications, such as chat applications, collaborative editing tools, or multiplayer games. WebSockets use a separate protocol and require a WebSocket server on the backend to handle the WebSocket connections. WebSocket support is also widely available in modern web browsers.

In summary, SSE is suitable for scenarios where the server needs to push updates or stream data to the client, while WebSockets provide full-duplex communication channels for bidirectional real-time communication between client and server. The choice between SSE and WebSockets depends on the specific requirements and nature of the application you’re building.

Code

var http = require('http');
var fs = require('fs');
 
/*
 * send interval in millis
 */
var sendInterval = 5000;
 
function sendServerSendEvent(req, res) {
 res.writeHead(200, {
 'Content-Type' : 'text/event-stream',
 'Cache-Control' : 'no-cache',
 'Connection' : 'keep-alive'
 });
 
 var sseId = (new Date()).toLocaleTimeString();
 
 setInterval(function() {
 writeServerSendEvent(res, sseId, (new Date()).toLocaleTimeString());
 }, sendInterval);
 
 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');
}
 
http.createServer(function(req, res) {
 if (req.headers.accept && req.headers.accept == 'text/event-stream') {
 if (req.url == '/talk') {
 sendServerSendEvent(req, res);
 } else {
 res.writeHead(404);
 res.end();
 }
 } else {
 res.writeHead(200, {
 'Content-Type' : 'text/html'
 });
 res.write(fs.readFileSync(__dirname + '/index.html'));
 res.end();
 }
}).listen(8080);
<!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('/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>

Performance compared to Web sockets.

Questions

  • Q. How do server keep track of client address in Server Sent Events?
  • Ans. In Server-Sent Events (SSE), the server keeps track of the client’s address through the standard HTTP connection. The server maintains an open HTTP connection with each client, allowing it to send events directly to the client as they occur.
  • Q. Which Network Protocols are used for Server Sent Events?
  • Ans. HTTP protocol

Graph View

Backlinks