如何在React前端实现keep-alive轮询？

Question

在我的情况下，我们有一个Shibboleth身份验证代理，位于客户端和服务器之间。由于可能会出现用户花费大量时间填写页面而不引起任何HTTP请求的情况，因此Shibboleth可能会结束他们的会话，可能导致用户丢失他们的工作。

为了实现保持活动状态的轮询，在我们的后端中创建了一个路由。然而，我一直无法在我们的React前端中实现实际的轮询。如何在客户端浏览器中实现重复的HTTP请求，只要应用程序打开？从保持活动请求返回的数据是随意的，在前端没有用处，因此这可能完全在React之外完成。

- basse

---

关于这个问题，不是很相关。但是如果有帮助的话，您可以在这里找到我们的存储库：https://github.com/UniversityOfHelsinkiCS/prkl/tree/trunk - basse

Answer 1

这是我的实现，如果有用的话可以参考一下。虽然函数需要重构一下，但功能已经实现。它使用了React的useEffect hook来设置/清除一个间隔定时器，并通过axios向后端发送保持活动状态请求。这全部封装在一个React组件中。

import React, { useEffect } from 'react';
import axios from 'axios';

/** Poll backend's keep-alive route every 5 minutes to maintain Shibboleth session. */
export default () => {
  const url = process.env.NODE_ENV === 'development' ? 'http://localhost:3001/keepalive' : '/keepalive';

  useEffect(() => {
    const interval = setInterval(() => axios.get(url), 5 * 60 * 1000);
    return () => clearInterval(interval);
  });

  return <div />;
};

- basse