Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

html5 rocks node js server-sent-events SSE example not working

link to article: http://www.html5rocks.com/en/tutorials/eventsource/basics/

The node.js SSE server is not working in that example. I end up with an open connection to /events, but no response is received by the browser.

Chrome dev-tool prnt scrn

sse-server.js

var http = require('http');
var sys = require('sys');
var fs = require('fs');

http.createServer(function(req, res) {
  //debugHeaders(req);

  if (req.headers.accept && req.headers.accept == 'text/event-stream') {
    if (req.url == '/events') {
      sendSSE(req, res);
    } else {
      res.writeHead(404);
      res.end();
    }
  } else {
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write(fs.readFileSync(__dirname + '/sse-node.html'));
    res.end();
  }
}).listen(8000);

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

  var id = (new Date()).toLocaleTimeString();

  // Sends a SSE every 5 seconds on a single connection.
  setInterval(function() {
    constructSSE(res, id, (new Date()).toLocaleTimeString());
  }, 5000);

  constructSSE(res, id, (new Date()).toLocaleTimeString());
}

function constructSSE(res, id, data) {
  res.write('id: ' + id + '\n');
  res.write("data: " + data + '\n\n');
}

function debugHeaders(req) {
  sys.puts('URL: ' + req.url);
  for (var key in req.headers) {
    sys.puts(key + ': ' + req.headers[key]);
  }
  sys.puts('\n\n');
}

sse-node.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
</head>
<body>
  <script>
    var source = new EventSource('/events');
    source.onmessage = function(e) {
      document.body.innerHTML += e.data + '<br>';
    };
  </script>
</body>
</html>
like image 560
alnafie Avatar asked Dec 29 '13 12:12

alnafie


People also ask

What do HTML5 server-sent events do?

A server-sent event is when a web page automatically gets updates from a server. This was also possible before, but the web page would have to ask if any updates were available. With server-sent events, the updates come automatically.

Is SSE long polling?

Long-Polling, Websockets, Server-Sent Events (SSE), and Comet are some of the ways for the client-side to connect with the server-side in real-time.

What is the difference between server-sent events SSEs and WebSockets in HTML5?

Differences. Obviously, the major difference between WebSockets and Server-Sent Events is that WebSockets are bidirectional (allowing communication between the client and the server) while SSEs are mono-directional (only allowing the client to receive data from the server).


3 Answers

The problem was with the server. In my case I was using node with IIS using the iisnode node package. To solve this, I needed to configure iisnode in the web.config like so:

<iisnode flushResponse="true" />

After this, everything worked fine. Others with a similar issue may start here, but apache and nginx may have similar configuration requirements.

like image 179
Matthew James Davis Avatar answered Oct 18 '22 06:10

Matthew James Davis


Why did you comment out the res.end() at the end of the sendSSE function? That's the method that actually sends the response to the browser.

like image 20
anyaelise Avatar answered Oct 18 '22 05:10

anyaelise


I already try that code and is working for me, as you are not using ngnix, or any other server as proxy for your node instances I would believe that the problem is with your machine, if you have firewall or anti virus running, stop it, and try again or any other software that could be intercepting yours req and res.

like image 43
rahpuser Avatar answered Oct 18 '22 05:10

rahpuser