Reactjs 如何显示用户在我的应用程序上联机的时间&引用；大卫，在线12分钟”；

如何显示用户已联机多长时间

在消息应用程序的标题中，它应该如下所示：

“David已在线12分钟”，将其存储在本地存储器中

---

由于本地存储允许我们仅以字符串形式存储数据，因此我在转换日期时遇到困难。

要获取用户的联机状态，我们可以使用浏览器导航器API

window.Navigator.online

。你可以在这里找到更多信息

要获取用户在线的时间，请在App.js中添加此

useffect

useEffect(() => {
    console.log(window.navigator.onLine);

    const interval = setInterval(() => {
      const sessionStartTime = localStorage.getItem("sessionStartTime");

      if (sessionStartTime) {
        const d1 = new Date(sessionStartTime);
        const d2 = new Date();
        const diff = d2.getTime() - d1.getTime();

        console.log(`User has been online for ${diff / (1000 * 60)} minutes`);
      }
    }, 1000 * 60);

    window.addEventListener("offline", function (e) {
      localStorage.setItem("sessionStartTime", "");
    });

    window.addEventListener("online", function (e) {
      localStorage.setItem("sessionStartTime", new Date().toString());
    });

    return () => {
      window.removeEventListener("online", () => {
        console.log("Removed online event listener");
      });
      window.removeEventListener("offline", () => {
        console.log("Removed offline event listener");
      });
      clearInterval(interval);
    };
  }, []);

您可以根据需要更改读取间隔