使用带有 nodejs 的服务器发送事件并做出反应的问题

Question

I need to implement server-sent-events to my node js and react application, I did some research about this and I had followed some tutorials online especially this site because of its simplicity.

my goal is that there is 1 route called /api/alert

if we make an HTTP POST request to this route with a JSON object like

{
  "longtitude": 100, 
  "latitude": 35, 
  "userId": "5dc28160e8a69c203002383b"
}

then the server will store it in the MongoDB and also send it to the client in realtime (using server-sent events of course)

if we make the HTTP GET request to this route then it will show all the current objects in MongoDB and it will get the new object every time a new object is POST.

it worked like just like how I want it. But a problem came up. it displays the objects in DB and the new one in real-time just fine until exactly 2 minutes later, somehow the connection is lost or something happens that makes the browser call to the GET /api/alert again then all the same data which is already displayed got displayed again. the duplication happen every 2 minutes as long as i do nothing to it.

i did a lot of research on the

Failed to load resource: net::ERR_INCOMPLETE_CHUNKED_ENCODING

and try different ways to work around but it doesn't seem to help at all.

is this a nodejs or react problem. Any idea on what i did wrong or something to do with this problem. All help is appreciated.

these are my code, it is based on most of the what find on this https://alligator.io/nodejs/server-sent-events-build-realtime-app/ :

Nodejs code:

const { Fire } = require("../models/fire");

let clients = [];

// Iterate clients list and use write res object method to send new nest
function sendEventsToAll(newFire) {
  clients.forEach(c => {
    c.res.write(`data: ${JSON.stringify(newFire)}\n\n`);
  });
}

module.exports.addAlert = async (req, res, next) => {
  const fire = new Fire(req.body);
  res.send(await fire.save());

  return sendEventsToAll(fire);
};

module.exports.handleAlert = async (req, res, next) => {
  const headers = {
    "Content-Type": "text/event-stream",
    Connection: "keep-alive",
    "Cache-Control": "no-cache"
  };
  res.writeHead(200, headers);
  res.flushHeaders();

  const data = await Fire.find();
  res.write(`data: ${JSON.stringify(data)}\n\n`);

  // Generate an id based on timestamp and save res
  // object of client connection on clients list
  // Later we'll iterate it and send updates to each client
  const clientId = Date.now();
  const newClient = {
    id: clientId,
    res
  };
  clients.push(newClient);
  console.log(`${clientId} Connection opened`);

  // When client closes connection we update the clients list
  // avoiding the disconnected one
  req.on("close", () => {
    console.log(`${clientId} Connection closed`);
    clients = clients.filter(c => c.id !== clientId);
    res.end();
  });
};

React code:

import React, { useState, useEffect } from "react";
import "./App.css";

function App() {
  const [nests, setNests] = useState([]);
  const [listening, setListening] = useState(false);

  useEffect(() => {
    if (!listening) {
      const events = new EventSource("http://localhost:3900/api/alert");
      events.onmessage = event => {
        const parsedData = JSON.parse(event.data);

        setNests(nests => nests.concat(parsedData));
      };

      setListening(true);
    }
  }, [listening, nests]);

  return (
    <table className="stats-table">
      <thead>
        <tr>
          <th>_id</th>
          <th>longtitude</th>
          <th>latitude</th>
          <th>userId</th>
        </tr>
      </thead>
      <tbody>
        {nests.map((nest, i) => (
          <tr key={i}>
            <td>{nest._id}</td>
            <td>{nest.longtitude}</td>
            <td>{nest.latitude}</td>
            <td>{nest.userId}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}
export default App;

Image of the problem I encountered

Answer 1

Nodejs has 2-minute default timeout that's why your connection has closed after two minutes. If you want it to open for longer period then you need to increase the default timeout.