当 vpn 关闭时如何检测反应？答案

【问题标题】：when vpn off how to detect in react?当 vpn 关闭时如何检测反应？
【发布时间】：2021-12-28 08:22:31
【问题描述】：

import React from "react";
import { Offline, Online } from "react-detect-offline";
export default function DropDown() {
return (
    <>
    <Online>Only shown when you're online</Online>
    <Offline>Only shown offline (surprise!)</Offline>
    </>
  );
}

它仅在我们在线/离线时检测。所以我想添加检测天气，我们关闭了 vpn 连接，它显示你离线，当 vpn 检测到你在线时

【问题讨论】：

请访问help center，使用tour查看内容和How to Ask。做一些研究，search for related topics on SO；如果您遇到困难，请发布您尝试的minimal reproducible example，注意输入和预期输出，最好在Stacksnippet
一般来说，VPN 是在前端应用程序范围之外处理的。您可能能够检索设备的公共 ip 并推断它当前是否连接到您知道/知道公共 ip 范围的一个 vpn。

标签： javascript reactjs vpn

【解决方案1】：

我假设您正在构建某种内部网站，该网站应该仅在您连接到 VPN 时才可用。如果是这种情况，我建议对某些内部资源进行“ping”请求。如果它不可用，您会将其显示为离线。

只需执行 GET 甚至是 OPTIONS http 调用，如果失败，则意味着您已关闭 VPN。这不是检测 VPN 连接的理想方法，但在浏览器中以另一种方式进行检测会很困难。

【讨论】：

是的，你的假设是正确的，我只是希望当 vpn 连接和离线时它应该显示离线消息，但是当 vpn 和在线时它应该显示你在线的消息
是的，完全正确。只需调用一些仅在连接到 VPN 时可用的 URL。如果它可以访问并成功完成，则表示您已连接，否则您未连接。