多个客户端同步工作的服务器发送事件

编程问答 2022-06-08

问题描述

我正在测试服务器发送的事件，因为这是我第一次使用它们。我使用了开源代码。我在控制器中放置了一个for循环，负责将消息发送到前端。我注意到该功能正在同步工作。我几乎同时打开了3个客户端，但是当发送了先前客户端的所有响应时，我会获取响应。

此外，我注意到服务器在循环完成后正在发送消息。也就是说，它最终一次发送所有10条消息。而且，要达到10000分还需要几秒钟的时间，所以我们不能说这个过程太快了以至于没有注意到它。

后端代码

const eventsHandler = (req,res,next) => {
    // Mandatory headers and http status to keep connection open
    const headers = {
        "Content-Type": "text/event-stream",Connection: "keep-alive","Cache-Control": "no-cache",};
    res.writeHead(200,headers);
    const clientId = Date.Now();
    const newClient = {
        id: clientId,};
    clients.push(newClient);
    nests[0].eggs = clientId;
    // After client opens connection send all nests as string
    let i = 1;
    while (i < 100000) {
        console.log(i);
        if (i % 10000 == 0) {
            console.log("xxxxxxxxxxxxxxxxxx");
            const data = `data: ${JSON.stringify(nests)}\n\n`;
            res.write(data);
        }
        i++;
    }
    req.on("close",() => {
        console.log(`${clientId} Connection closed`);
        clients = clients.filter((c) => c.id !== clientId);
    });
};

前端

const [ nests,setnests ] = useState([]);
const [ listening,setListening ] = useState(false);

useEffect( () => {
    if (!listening) {
       const events = new EventSource('http://localhost:4000/events');
       events.onmessage = (event) => {
           console.log(Date.Now())
           const parsedData = JSON.parse(event.data);

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

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

reactjsreactjsreactjsreactjsserver-sent-events