Javascript - 只需识别浏览器连接的网络即可

Javascript - Simply identify on which network the browser is connected

本文关键字：网络 连接 浏览器 识别 Javascript      更新时间：2023-09-26

我设置了一个节点js Web服务器，它在JSON文件中提供图像链接。一个链接引用互联网上的图像，另一个链接引用我家庭服务器中的本地目录。

Web 服务器处于联机状态，而不是在我的主服务器上。出于带宽使用目的，Web 服务器仅提供图像链接。如果客户端通过我的家庭连接连接，则使用本地链接，如果不是，则使用Internet链接。

目前，我提供一个包含链接的 JSON 文件，并且总是在客户端选择互联网文件，因为我不知道如何让客户端了解他在我的本地网络上。

有什么存在吗？我已经做了关于获取路由器（第一跳）的 mac 地址、网络 ssid、...但这似乎不能只用JavaScript来实现。

所以，基本上，这是我的设置：

家庭网络 ：

  • 主服务器（本地存储的图像）
  • 通过此连接连接的潜在客户

网络托管内容 ：

  • Web 服务器（节点 js）
  • FTP（存储的图像）
  • 潜在客户已连接

在任何情况下，客户端都需要互联网连接，因为节点服务器处于联机状态。但是，如果客户端与本地主服务器位于同一（我的本地网络）网络上，则他应使用本地链接来获取图像。

我需要以下两种解决方案之一：

  • 客户端知道他是否在我的本地网络上，然后选取良好的链接
  • Web 服务器知道客户端来自哪里，并直接提供服务良好的链接（因此，客户端没有问题）。问题是我的 Web 服务器没有托管在我的家庭网络上。
你必须在

服务器端写一些东西，才能让它工作。

只有服务器才能判断客户端是否与服务器位于同一网络上。客户端JS根本无法访问网络信息。

你会做这样的事情：

在客户端请求中，服务器：

  • 检查客户端的连接 IP 是否为本地 IP。
  • 如果是这样，请设置客户端可以读取的某种布尔值。
  • 然后，客户端根据该布尔值选择本地或远程 url 集。

选择要包含在页面中的网址要简单一些：

在客户端请求中，服务器：

  • 检查客户端的连接 IP 是否为本地 IP。
  • 如果是这样，请在请求的网页中包含本地 URL。否则，请包含远程 URL。

我正在研究以下server connection lost PHP，jQuery和Bootstrap CSS。它每秒检查一次浏览器是否能够连接到服务器上托管<?=__DOMAIN_URL__;?>/network_access.gif单个像素图像，其中<?=__DOMAIN_URL__;?>是PHP语法，用于将服务器URL管道到HTML。如果无法建立图像连接，则调用 javascript this.img.onerror 函数。

<?php 
// ============================== start plugin for displaying server downtime ?>
<div id="myModalDT" class="modal fade" role="dialog" data-backdrop="static">
    <div class="modal-dialog mt-4 pt-2" style="min-width: 75% !important;">
        <div class="modal-content">
            <div class="modal-body p-3">
                Server disconnect/network outage
            </div>
        </div>
    </div>
</div>
<script>
    // server connection check
    var timer = $.timer(function() {
        this.img = new Image();
        d = new Date();
        // if the image will not load then we need to alert the user that the network connection was lost ?>
        this.img.onerror = function() {
            $('#myModalDT').find(".modal-body").html('<span class="h2"><strong>Server connection lost.</strong><br/>Checking connection at '+d.toString('dddd, MMMM ,yyyy') + '<hr/>This message is likely due to the server being restarted and this message should automatically disappear once the connection is restored. <br/><br/> If this message does not disappear in several minutes then refresh the page.</span>');
            $('#myModalDT').modal('show');
        };
        // if the image is loaded then hide the alert
        this.img.onload = function () {
            $('#myModalDT').modal('hide');
        }
        <?php // looks on the server to see if we can get to an image file ?>
        this.img.src = "<?=__DOMAIN_URL__;?>/network_access.gif?cacheDiscard=" + d.getTime();
    });
    <?php // setting a timer to check that we have network connectivity every second ?>
    timer.set({ time : 1000, autostart : true });
</script>
<?php 
// ============================== end plugin for displaying server downtime ?>

将上面的代码剥离为 javascript，您基本上可以简单地将<?=__DOMAIN_URL__;?>替换为本地服务器 URL，如果调用了 this.img.onload 函数，那么您可以让 javascript 将图像引用 URL 替换为本地 URL，如果调用this.img.onerror函数（意味着您无法连接到本地服务器），则将图像 URL 替换为"云"服务器 URL。

<script>
this.img = new Image(); // create an empty image object 
d = new Date(); // we do not want the browser to cache the image we are checking so we get the current timestamp to clear the cache
this.img.src = "http://localhost-whatever/network_access.gif?cacheDiscard=" + d.getTime();  // this sets the contents of our image object to one of our locally hosted images, with the cache busting timestamp included
this.img.onerror = function() {
  // were were not able to connect locally if this were called and should use the server hosted images    
};
this.img.onload = function () {
  // if we made it here then we can use locally sourced images
}
</script>
相关文章：