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

Question

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

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)
        }
    }

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

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);
  });
}

该平活动将每5秒射击。

现在，如果你想eventSource.onmessage被调用，你应该在服务器端将消息命名event为：

...
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事件。更多信息在这里。