node.js - 服务器发送事件未使用 React 和 NodeJs 从流中接收消息

Question

我有一个非常简单的设置。
NodeJs

export default class StreamController {
    public static newMessage = async (req: Request, res: Response) => {
        const { userid } = req.params;
        res.writeHead(200, {
            "Connection": "keep-alive",
            "Content-Type": "text/event-stream",
            "Cache-Control": "no-cache",
        });
        setInterval(async () => {
            console.log(await MessagesController.hasNewMessage(userid));
            res.write(`${JSON.stringify({ hasUnread: await MessagesController.hasNewMessage(userid) })}`);
            res.write("\n\n");
        }, 5000);
    }
}

react

 constructor() {
        super();
        const uid = getUserId();
        const eventSource = new EventSource(`http://localhost:8080/stream/messages/${uid}`)

        eventSource.onmessage = (e) => {
            console.log(e)
        }
    }

我可以看到流已打开，但没有从服务器传递任何事件，而数据是在服务器端发出的。我做错了什么？

Answer 1

您在服务器端传递数据，但没有将事件名称作为事件传递。这就是我解决问题的方法(简化复制):

服务器:

app.get('/stream', (req, res) => {
  console.log('request received');
  res.writeHead(200, {
    "Connection": "keep-alive",
    "Content-Type": "text/event-stream",
    "Cache-Control": "no-cache",
  });
  setInterval(async () => {
    res.write('event: ping\n');  // added these
    res.write(`data: ${JSON.stringify({ hasUnread: true })}`);
    res.write("\n\n");
  }, 5000);
});

客户:

constructor(props) {
  super(props);
  const eventSource = new EventSource(`http://localhost:3030/stream`);
  eventSource.onopen = e => {
    console.log(e);
  }
  eventSource.onmessage = e => {
    console.log('onmessage');
    console.log(e);
  }
  eventSource.addEventListener('ping', e => {
    console.log(e);
  });
}

ping 事件将每 5 秒触发一次。

现在，如果您想要调用 eventSource.onmessage，您应该在服务器端将 event 命名为 message:

...
setInterval(async () => {
  res.write('event: message\n');  // message event
  res.write(`data: ${JSON.stringify({ hasUnread: true })}`);
  res.write("\n\n");
}, 5000);
...

现在你会在控制台看到:

onmessage MessageEvent {..., data: "{'hasUnread': true}", ...}

请注意，在这种情况下，不会再触发 ping 事件。更多信息 here .