服务器发送事件未使用 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);
    }
}

反应

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

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

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

Answer 1

您正在服务器端传递 data，但没有将 事件名称 作为 event 传递。这就是我解决问题的方法（简化复制）：

服务器:

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.

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

Server Sent Events not receiving messages from stream with React and NodeJs

node.js

reactjs

server-sent-events