服务器发送的事件不是“文本/事件流”

Question

I want to add Server Sent Events (SSE) into my project that runs on nodeJS (Express). As a start I have used this code: https://github.com/hnasr/javascript_playground/blob/master/server-sent-events/index.js . This example code works like a charm when running it in isolation but when I'm incorporating the code into my (bigger) project I got some errors that I'm unable to solve. I hope you can help me. I think messed up the code in the routes folder, not sure tho.

I use NodeJs with express as my server. The folder app.js contains this code.

    #Routing code
    var router_price_24h_changes  = require('./routes/24hours');
    app.use('/24hours', router_price_24h_changes);
    
    #>>>a lot of other (probably unnecessary code)<<<

    #Added this 
    app.get("/24hours-events", (req,res) => {
    
      res.setHeader("Content-Type", "text/event-stream");
      send(res);
      console.log("Stream")
    
    })
    
    let i = 0;
    function send (res) {
      console.log("send")
      res.write("data: " + `hello!${i++}\n\n`);
    
      setTimeout(() => send(res), 1000);
    }

This is what my routes-24hours.js looks like:

var express = require('express');
var router = express.Router();
const fs = require('fs');


router.get('/', function(req, res, next) {
  
  const myHtml = fs.readFileSync('./24hours.html', 'utf-8');
  const changes = fs.readFileSync("./changes.json", 'utf-8');
  const changes2 = fs.readFileSync("./changes2", 'utf-8');

  res.send(myHtml.replace(/data/g, JSON.stringify(({changes ,changes2 }), null, 0)));

});

module.exports = router;

When visiting the 24hours-events webpage from my chrome browser I typed this

let sse = new EventSource("http://localhost:3000/24hours-events");

In the console log, this was the response:

http://localhost:3000/24hours-events 404 (Not Found)

Note: I have not created a "24hours-events" html file

In the isolated SSE test version I added sse.onmessage = console.log after it and it logged the server events.

If something is not clear and more information is needed to answer this question, I would be more then happy to hear from you.

Answer 1

 app.get("http://localhost:3000/24hours", (req,res) => {

When defining a route, you should only specify the path, not the full URL:

app.get("/24hours", (req, res) => {

The HTML being received might be a 404 page. (You should look in your network panel, or open http://localhost:3000/24hours directly, to confirm that.)

In the metadata of the 24hours.html file I have added this:

 <meta http-equiv="Content-Type" content="text/event-stream" charset="utf-8" />

Remove that, it's incorrect.