Initial version
This commit is contained in:
parent
cc103b2337
commit
6874e3a0ce
10 changed files with 1031 additions and 2 deletions
6
.idea/vcs.xml
Normal file
6
.idea/vcs.xml
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="VcsDirectoryMappings">
|
||||
<mapping directory="" vcs="Git" />
|
||||
</component>
|
||||
</project>
|
||||
34
README.md
34
README.md
|
|
@ -1,3 +1,35 @@
|
|||
# ip.zuim.de
|
||||
# [ip.zuim.de](https://ip.zuim.de)
|
||||
|
||||
Shows information on connectivity of a user, by testing both IPv4 and IPv6. Also shows geoip data.
|
||||
|
||||
### Warning:
|
||||
This code is mostly unmaintained and uses several old javascript libraries.
|
||||
|
||||
### Setup:
|
||||
|
||||
To get the geoip data, the geoip2 module for nginx is used with the following configuration:
|
||||
```
|
||||
geoip2 /var/lib/GeoIP/GeoLite2-City.mmdb {
|
||||
auto_reload 1h;
|
||||
$geoip2_data_continent_code continent code;
|
||||
$geoip2_data_continent_name continent names en;
|
||||
$geoip2_data_country_code country iso_code;
|
||||
$geoip2_data_country_name country names en;
|
||||
$geoip2_data_subdivision subdivisions 0 names en;
|
||||
$geoip2_data_city_name city names en;
|
||||
$geoip2_data_postal_code postal code;
|
||||
$geoip2_data_location_time location time_zone;
|
||||
}
|
||||
|
||||
geoip2 /var/lib/GeoIP/GeoLite2-ASN.mmdb {
|
||||
auto_reload 1h;
|
||||
$geoip2_data_asn autonomous_system_organization;
|
||||
}
|
||||
```
|
||||
|
||||
Download these files directly and add them in the main folder:
|
||||
- https://ip.zuim.de/0B.zip
|
||||
- https://ip.zuim.de/1MB.zip
|
||||
- https://ip.zuim.de/10MB.zip
|
||||
- https://ip.zuim.de/100MB.zip
|
||||
- https://ip.zuim.de/img.jpg?t=1721317515702
|
||||
|
|
|
|||
10
include/advip.php
Normal file
10
include/advip.php
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<?php
|
||||
$ip = str_replace("::ffff:", "", $_SERVER['REMOTE_ADDR']);
|
||||
|
||||
$data = array();
|
||||
$data["Hostname"] = gethostbyaddr($ip);
|
||||
if($data["Hostname"]===$ip)
|
||||
$data["Hostname"] = "";
|
||||
|
||||
echo json_encode($data);
|
||||
?>
|
||||
10
include/config.php
Normal file
10
include/config.php
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<?php
|
||||
$config = array(
|
||||
"ipv4" => "89.58.44.51",
|
||||
"ipv6" => "2a03:4000:67:e03::1",
|
||||
"nameDS" => "ip.zuim.de",
|
||||
"namev4" => "v4.ip.zuim.de", # only use an A record for this domain
|
||||
"namev6" => "v6.ip.zuim.de", # only use an AAAA record for this domain
|
||||
"app_path" => "/",
|
||||
);
|
||||
?>
|
||||
52
include/ipinfo.php
Normal file
52
include/ipinfo.php
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
<?php
|
||||
require_once("config.php");
|
||||
|
||||
$ip = array();
|
||||
|
||||
$ip["host"] = rtrim($_SERVER['HTTP_HOST'], '.');
|
||||
$ip["ip"] = str_replace("::ffff:", "", $_SERVER['REMOTE_ADDR']);
|
||||
$ip["proxyIp"] = isset($_SERVER['HTTP_X_FORWARDED_FOR']) ? $_SERVER['HTTP_X_FORWARDED_FOR'] : "";
|
||||
//$ip["clientIp"] = isset($_SERVER['HTTP_CLIENT_IP']) ? $_SERVER['HTTP_CLIENT_IP'] : "";
|
||||
|
||||
switch($ip["host"])
|
||||
{
|
||||
case $config["namev4"]:
|
||||
case $config["ipv4"]:
|
||||
$ip["name"] = "IPv4";
|
||||
$ip["conHostType"] = 0;
|
||||
break;
|
||||
case $config["nameDS"]:
|
||||
$ip["name"] = "Dualstack";
|
||||
$ip["conHostType"] = 1;
|
||||
break;
|
||||
case $config["namev6"]:
|
||||
case "[".$config["ipv6"]."]":
|
||||
$ip["name"] = "IPv6";
|
||||
$ip["conHostType"] = 2;
|
||||
break;
|
||||
default:
|
||||
$ip["name"] = "unknown";
|
||||
$ip["conHostType"] = -1;
|
||||
}
|
||||
|
||||
if(strpos($ip["ip"],".") !== FALSE){
|
||||
$ip["conClientType"] = 0;
|
||||
}
|
||||
else if(strpos($ip["ip"],":") !== FALSE){
|
||||
$ip["conClientType"] = 2;
|
||||
}
|
||||
else{
|
||||
$ip["conClientType"] = -1;
|
||||
}
|
||||
|
||||
$ip["geoIp"] = array();
|
||||
$ip["geoIp"]["Land"] = $_SERVER["GEOIP_COUNTRY_NAME"];
|
||||
$ip["geoIp"]["Bundesland"] = $_SERVER["GEOIP_SUBDIVISION"];
|
||||
$ip["geoIp"]["Stadt"] = $_SERVER["GEOIP_CITY_NAME"];
|
||||
$ip["geoIp"]["PLZ"] = $_SERVER["GEOIP_POSTAL_CODE"];
|
||||
$ip["geoIp"]["ISP"] = $_SERVER["GEOIP_ASN"];
|
||||
|
||||
if(!isset($NO_JSON_OUT)) {
|
||||
echo json_encode($ip);
|
||||
}
|
||||
?>
|
||||
135
index.php
Executable file
135
index.php
Executable file
|
|
@ -0,0 +1,135 @@
|
|||
<?php
|
||||
$NO_JSON_OUT = 1; //include mode for ipinfo.php
|
||||
|
||||
require_once("include/config.php");
|
||||
require_once("include/ipinfo.php");
|
||||
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Netzwerktest (<?php echo $ip["name"]; ?>)</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
||||
<link rel="manifest" href="/site.webmanifest">
|
||||
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
|
||||
<meta name="msapplication-TileColor" content="#e0e8ff">
|
||||
<meta name="theme-color" content="#b7eeff">
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="cont">
|
||||
|
||||
<h1><a class="title" href="//<?php echo $ip["host"].$config["app_path"]; ?>">
|
||||
<?php echo $ip["name"]; ?> - Testseite
|
||||
</a></h1>
|
||||
|
||||
|
||||
<hr>
|
||||
<div class="ipTest">
|
||||
<div class="ip_v4"><div class="info_ip">Warte auf IPv4 <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div></div><div class="info_geo"></div></div>
|
||||
<hr style="margin-top:0;margin-bottom:0;">
|
||||
<div class="ip_v6"><div class="info_ip">Warte auf IPv6 <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div></div><div class="info_geo"></div></div>
|
||||
<div class="ip_ds" style="display:none;"><div class="info_ip"></div><div class="info_geo"></div></div>
|
||||
</div>
|
||||
<hr>
|
||||
<h3>Informationen & Downloads</h3>
|
||||
<div id="resultExplanation"></div>
|
||||
<?php
|
||||
if($ip["conHostType"] == 1)
|
||||
{
|
||||
if($ip["conClientType"]==0)
|
||||
{
|
||||
echo "Dein Browser hat <b>IPv4</b> ausgewählt, um sich zu verbinden!<br>";
|
||||
}
|
||||
else
|
||||
{
|
||||
echo "Dein Browser hat <b>IPv6</b> ausgewählt, um sich zu verbinden!<br>";
|
||||
}
|
||||
}
|
||||
else {
|
||||
echo "Wenn diese Seite angezeigt wird unterstützt der Client <b>".$ip["name"]."</b>!<br>";
|
||||
}
|
||||
|
||||
if(isset($_SERVER['HTTPS']) && "on" == $_SERVER['HTTPS'])
|
||||
{
|
||||
echo "Du bist mit <b>https</b> verbunden.";
|
||||
}
|
||||
else
|
||||
{
|
||||
echo "Du bist mit <b>http</b> verbunden.";
|
||||
}
|
||||
?>
|
||||
<p>Download mit <?php echo $ip["name"]; ?>:
|
||||
<a href="1MB.zip">1MB Download</a>,
|
||||
<a href="10MB.zip">10MB Download</a>,
|
||||
<a href="100MB.zip">100MB Download</a></p>
|
||||
|
||||
<p>Weitere Informationen:
|
||||
<a href="//<?php echo $config["nameDS"]; ?>/raw/" target="_blank">Nur IP Adresse als Text</a>,
|
||||
<a href="//status.zuim.de/" target="_blank">Server Statusseite</a>,
|
||||
<a href="//zuim.de/" target="_blank">zuim.de Hauptseite </a></p>
|
||||
<hr>
|
||||
|
||||
<h3 class='headCont'>
|
||||
Rufe diese Seite direkt über
|
||||
<a href="https://<?php echo $config["namev4"] . $config["app_path"]; ?>"> IPV4</a>
|
||||
<a href="http://<?php echo $config["ipv4"] . $config["app_path"]; ?>" class="secondary_link">(Ohne DNS)</a>
|
||||
<a href="https://<?php echo $config["nameDS"] . $config["app_path"]; ?>">Dualstack</a>
|
||||
<a href="http://<?php echo $config["namev6"] . $config["app_path"]; ?>"> IPV6</a>
|
||||
<a href="http://[<?php echo $config["ipv6"]."]" . $config["app_path"]; ?>" class="secondary_link">(Ohne DNS)</a>
|
||||
auf.</h3>
|
||||
<noscript>Aktiviere Javascript, für mehr Informationen:<br>IP: <?php echo $ip["ip"]; ?></noscript>
|
||||
|
||||
<hr>
|
||||
<h3>Ping mit Graph messen: <button class="start">Start</button></h3>
|
||||
|
||||
<div class="out"></div>
|
||||
<div class="ct-chart ct-octave" style="display: none;"></div>
|
||||
<hr>
|
||||
<h3>Andere Tests für Geschwindigkeit & Ping:</h3>
|
||||
<a href="//craftandbuild.de/speedtest/speedtest_ajax">Speedtest mit ajax</a>
|
||||
<a href="//craftandbuild.de/speedtest/speedtest_websocket">Speedtest mit websocket</a>
|
||||
<a href="//craftandbuild.de/WebSockets/Pingtest">Pingtest mit websocket</a>
|
||||
<a href="/librespeed/">LibreSpeed Instanz</a>
|
||||
<button class="ping"><?php echo $ip["name"]; ?> Ping</button><br><span class="pingresult"></span>
|
||||
<hr>
|
||||
<h3>Bild(14MB) parallel mit IPv4 und IPv6 laden: <button class="speed">Start</button></h3>
|
||||
<div class="images">
|
||||
<div class="v4">
|
||||
<h3>IPv4</h3>
|
||||
<img class="testimg" src="" alt="v4 Test"/>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="v6">
|
||||
<h3>IPv6</h3>
|
||||
<img class="testimg" src="" alt="v6 Test"/>
|
||||
<p></p>
|
||||
</div>
|
||||
<br style="clear:both;">
|
||||
<h3 class="ausg"></h3>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- libs -->
|
||||
<script src="//cdn.zuim.de/js/jQuery/jquery.js"></script>
|
||||
<script defer src="//cdn.zuim.de/js/socket.io-4.1.2.js"></script>
|
||||
<script defer src="//cdn.zuim.de/js/chartist-js-0.11.4/chartist.min.js"></script>
|
||||
<script defer src="//cdn.zuim.de/js/chartist-js-0.11.4/chartist-plugin-axistitle.min.js"></script>
|
||||
<script defer src="//cdn.zuim.de/js/chartist-js-0.11.4/chartist-plugin-legend.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="//cdn.zuim.de/css/chartist.min.css">
|
||||
<!-- scripts -->
|
||||
<script>
|
||||
var config = <?php echo json_encode($config); ?>;
|
||||
var ipInfo_php = <?php echo json_encode($ip); ?>;
|
||||
</script>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
3
raw/index.php
Executable file
3
raw/index.php
Executable file
|
|
@ -0,0 +1,3 @@
|
|||
<?php
|
||||
echo str_replace("::ffff:", "", $_SERVER['REMOTE_ADDR'])."\n";
|
||||
?>
|
||||
7
robots.txt
Normal file
7
robots.txt
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
User-agent: *
|
||||
Disallow: 100KB.zip
|
||||
Disallow: 500KB.zip
|
||||
Disallow: 1MB.zip
|
||||
Disallow: 10MB.zip
|
||||
Disallow: 100MB.zip
|
||||
Disallow: 1GB.zip
|
||||
509
script.js
Normal file
509
script.js
Normal file
|
|
@ -0,0 +1,509 @@
|
|||
function copyBtn(className, btn){
|
||||
var ele = $("."+className);
|
||||
highlight(ele[0]);
|
||||
document.execCommand('copy');
|
||||
$(btn).css("backgroundColor","#0c0").delay(500).queue(function() {
|
||||
$(btn).css("backgroundColor","");
|
||||
$(btn).dequeue();
|
||||
});
|
||||
console.log("copied: "+ele.html());
|
||||
}
|
||||
function highlight(ele){
|
||||
var range, selection;
|
||||
if (document.body.createTextRange)
|
||||
{
|
||||
range = document.body.createTextRange();
|
||||
range.moveToElementText(ele);
|
||||
range.select();
|
||||
} else if (window.getSelection)
|
||||
{
|
||||
selection = window.getSelection();
|
||||
range = document.createRange();
|
||||
range.selectNodeContents(ele);
|
||||
selection.removeAllRanges();
|
||||
selection.addRange(range);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
$(document).ready(function()
|
||||
{
|
||||
var v4Div = $(".ip_v4");
|
||||
var v6Div = $(".ip_v6");
|
||||
var dsDiv = $(".ip_ds");
|
||||
|
||||
var testingResult = {};
|
||||
|
||||
function getIpInfo(url, div)
|
||||
{
|
||||
var infoDivIp = div.children(".info_ip");
|
||||
var infoDivGeo = div.children(".info_geo");
|
||||
var version = url.includes("4")?4:6
|
||||
|
||||
infoDivGeo.hide();
|
||||
|
||||
|
||||
function getIpInfoDone(data) {
|
||||
var className = "ip_"+url.replace(/\./g,"");
|
||||
testingResult[version] = true;
|
||||
if(testingResult[4] && testingResult[6]) {
|
||||
$("#resultExplanation").html("Die Verbindung konnte über IPv4 und IPv6 hergestellt werden, also wird Dual-Stack unterstützt! Dies kann nativ, durch DS-Lite oder einen 6to4/4to6 Tunnel umgesetzt sein.<br><br>");
|
||||
}
|
||||
|
||||
div.addClass("success");
|
||||
infoDivIp.html("<h3>Deine <a href='//"+data.host+"/raw/'>"+data.name+" Adresse</a>: "+
|
||||
"<span class='"+className+" ipAddr' onclick='highlight(this)'>"+data.ip+" </span> "+
|
||||
"<button style='vertical-align: middle' onclick='copyBtn(\""+className+"\", this)'>Kopieren</button></h3>");
|
||||
if(data.proxyIp != ""){
|
||||
infoDivIp.append("<p>Vom Proxy angegebene Ip: "+data.proxyIp+" (HTTP_X_FORWARDED_FOR)</p>");
|
||||
}
|
||||
//if(data.clientIp != ""){
|
||||
// infoDivIp.append("<p>Vom Client angegebene Ip: "+data.clientIp+" (HTTP_CLIENT_IP)</p>");
|
||||
//}
|
||||
|
||||
for(var ele in data.geoIp)
|
||||
{
|
||||
if(data.geoIp[ele] != ""){
|
||||
infoDivGeo.append("<span class='info'>"+ele+":</span>"+data.geoIp[ele]+"<br>");
|
||||
}
|
||||
}
|
||||
infoDivGeo.fadeIn();
|
||||
|
||||
//start hostname request
|
||||
$.ajax("//"+url+"/include/advip.php", {dataType: "json", timeout: 5000})
|
||||
.done(function(data, status, xhr){
|
||||
for(var ele in data)
|
||||
{
|
||||
if(data[ele] != ""){
|
||||
infoDivGeo.prepend("<span class='info'>"+ele+":</span>"+data[ele]+"<br>");
|
||||
}
|
||||
}
|
||||
|
||||
}).fail(function(){
|
||||
//fail geoip silently
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
if(ipInfo_php.conHostType==(div==v4Div?0:(div==v6Div?2:1))) {
|
||||
console.log("Loaded over PHP: "+ipInfo_php.name);
|
||||
getIpInfoDone(ipInfo_php);
|
||||
}
|
||||
else {
|
||||
$.ajax("//"+url+"/include/ipinfo.php", {dataType: "json", timeout: 5000})
|
||||
.done(function(data, status, xhr){
|
||||
console.log("Loaded over Ajax: "+data.name);
|
||||
getIpInfoDone(data);
|
||||
}).fail(function(err){
|
||||
testingResult[className] = false;
|
||||
console.log(err);
|
||||
div.addClass("failure");
|
||||
infoDivIp.html("<span style='font-weight: bold;'>IPv"+version+" nicht verfügbar.</span>");
|
||||
|
||||
var ipWithoutDNS;
|
||||
var name;
|
||||
if(version == 4){
|
||||
ipWithoutDNS = config["ipv4"];
|
||||
}
|
||||
else {
|
||||
ipWithoutDNS = "["+config["ipv6"]+"]";
|
||||
}
|
||||
infoDivIp.append("<br>Versuche eine IPv"+version+" Adresse direkt aufzurufen, um auf DNS Fehler zu prüfen:"+
|
||||
"<a href='http://"+ipWithoutDNS+"/'>"+ipWithoutDNS+"</a>");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
getIpInfo(config.namev4, v4Div);
|
||||
getIpInfo(config.namev6, v6Div);
|
||||
//getIpInfo(config.nameDS, dsDiv);
|
||||
|
||||
var pingduration;
|
||||
var pingcount;
|
||||
var pingmax = 3000;
|
||||
var pingInterval;
|
||||
|
||||
$(".ping").click(function()
|
||||
{
|
||||
$(".ping").prop('disabled', true);
|
||||
|
||||
pingduration = 0;
|
||||
pingcount = 0;
|
||||
|
||||
ping();
|
||||
|
||||
setTimeout(function()
|
||||
{
|
||||
if(pingcount != -1)
|
||||
{
|
||||
$(".pingresult").html("Keine Antwort nach 5 Sekunden!");
|
||||
}
|
||||
|
||||
$(".ping").prop('disabled', false);
|
||||
},5000);
|
||||
});
|
||||
|
||||
function ping()
|
||||
{
|
||||
var startTime = new Date().getTime();
|
||||
var req = new XMLHttpRequest();
|
||||
/*
|
||||
0 UNSENT open()wurde noch nicht aufgerufen.
|
||||
1 OPENED send()wurde noch nicht aufgerufen.
|
||||
2 HEADERS_RECEIVED send() wurde aufgerufen, und Headers sowie Status sind verfügbar.
|
||||
3 LOADING Download ist im Gange; responseText enthält bereits unvollständige Daten.
|
||||
4 DONE Der Vorgang ist abgeschlossen.*/
|
||||
req.onreadystatechange = function()
|
||||
{
|
||||
|
||||
//console.log(req.readyState+" "+(new Date().getTime() - startTime));
|
||||
if(req.readyState == 2 && pingcount >= 0)
|
||||
{
|
||||
var duration = new Date().getTime() - startTime;
|
||||
|
||||
pingduration += duration;
|
||||
pingcount++;
|
||||
|
||||
$(".pingresult").html("Anzahl der Pings: "+pingcount+"<br>Zeit: "+Math.round(pingduration/pingcount * 10)/10 + "ms");
|
||||
|
||||
if(pingduration > pingmax)
|
||||
{
|
||||
$(".pingresult").append("<br>Fertig!");
|
||||
pingcount = -1;
|
||||
clearInterval(pingInterval);
|
||||
}
|
||||
else
|
||||
{
|
||||
ping();
|
||||
}
|
||||
}
|
||||
};
|
||||
req.open("GET", "/0B.zip?"+startTime);
|
||||
req.send();
|
||||
}
|
||||
|
||||
$(".speed").click(function()
|
||||
{
|
||||
var v4 = -1;
|
||||
var v6 = -1;
|
||||
var v4Speed = -1;
|
||||
var v6Speed = -1;
|
||||
var timeCount = 15;
|
||||
|
||||
$(this).hide();
|
||||
$(".images").show();
|
||||
time = new Date().getTime();
|
||||
$(".v4 img").attr("src","//"+config.namev4+"/img.jpg?t="+time);
|
||||
$(".v6 img").attr("src","//"+config.namev6+"/img.jpg?t="+time);
|
||||
$(".v4 img, .v6 img").on("load", function()
|
||||
{
|
||||
dauer = (new Date().getTime()-time)/1000;
|
||||
speed = Math.round((14*8)/dauer*100)/100;
|
||||
|
||||
$(this).next().html(speed + " Mbit/s für "+dauer + " Sekunden ");
|
||||
|
||||
//wert setzen
|
||||
if($(this).parent().hasClass("v4"))
|
||||
{
|
||||
v4 = dauer;
|
||||
v4Speed = speed;
|
||||
}
|
||||
if($(this).parent().hasClass("v6"))
|
||||
{
|
||||
v6 = dauer;
|
||||
v6Speed = speed;
|
||||
}
|
||||
|
||||
//fertig
|
||||
fertig();
|
||||
});
|
||||
|
||||
|
||||
var intervall = setInterval(function(){timer()},100);
|
||||
|
||||
function timer()
|
||||
{
|
||||
//count
|
||||
timeCount = (timeCount*10-1)/10;
|
||||
|
||||
//ausgabe
|
||||
$(".ausg").html("Timeout: "+timeCount);
|
||||
|
||||
fertig();
|
||||
}
|
||||
|
||||
function fertig()
|
||||
{
|
||||
if(timeCount <= 0 || v4 != -1 && v6 != -1)
|
||||
{
|
||||
clearInterval(intervall);
|
||||
ausg = "";
|
||||
win = -1;
|
||||
loose = -1;
|
||||
if(v4 == -1 && v6 == -1)
|
||||
{
|
||||
ausg = "Beide haben das laden nach Beenden des Timeout nicht abgeschlossen!";
|
||||
win = 0;
|
||||
loose = 0;
|
||||
}
|
||||
else if(v4 == -1)
|
||||
{
|
||||
ausg = "Nur IPv6 hat mit "+v6+" Sekunden funktioniert!";
|
||||
win = 6;
|
||||
loose = 4;
|
||||
}
|
||||
else if(v6 == -1)
|
||||
{
|
||||
ausg = "Nur IPv4 hat mit "+v4+" Sekunden funktioniert!";
|
||||
win = 4;
|
||||
loose = 6;
|
||||
}
|
||||
else if(v4 < v6)
|
||||
{
|
||||
ausg = "IPv4 war " + Math.round((v6/v4)*100)/100 + " mal schneller als IPv6";
|
||||
win = 4;
|
||||
loose = 6;
|
||||
}
|
||||
else if(v6 <= v4)
|
||||
{
|
||||
ausg = "IPv6 war " + Math.round((v4/v6)*100)/100 + " mal schneller als IPv4";
|
||||
win = 6;
|
||||
loose = 4;
|
||||
}
|
||||
|
||||
$(".ausg").html("<h3>"+ausg+" <button onClick='location.reload();'> Seite erneut laden </button></h3>");
|
||||
|
||||
$(".v"+win).css("border", "5px solid #0a0");
|
||||
$(".v"+loose).css("border", "5px solid #a00");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var active = false;
|
||||
|
||||
var id = -1; //ignore first measurement
|
||||
var times4 = [];
|
||||
var times6 = [];
|
||||
var labels = [];
|
||||
|
||||
var startT;
|
||||
|
||||
$(".start").click(function() {
|
||||
active = !active;
|
||||
|
||||
if(active) {
|
||||
$(".start").html("Stop");
|
||||
loadChart();
|
||||
|
||||
s4 = io('wss://'+config.namev4+'/', {path: '/speedtest'});
|
||||
s6 = io('wss://'+config.namev6+'/', {path: '/speedtest'});
|
||||
|
||||
s4.on('pongDown', function(msg) {
|
||||
times4[msg] = new Date().getTime() - times4[msg];
|
||||
//console.log("Received via v4: " + msg + " Time:" + times4[msg]);
|
||||
updateChart(msg, false);
|
||||
});
|
||||
s6.on('pongDown', function(msg) {
|
||||
times6[msg] = new Date().getTime() - times6[msg];
|
||||
//console.log("Received via v6: " + msg + " Time:" + times6[msg]);
|
||||
updateChart(msg, true);
|
||||
});
|
||||
|
||||
$(".out").html("Starte websocket<br>Wenn dies nicht funktioniert ist der NodeJS Server offline!");
|
||||
$(".ct-chart").show();
|
||||
$("html, body").scrollTop($(".ct-chart").offset().top);
|
||||
}
|
||||
else {
|
||||
times4 = [];
|
||||
times6 = [];
|
||||
labels = [];
|
||||
nTimes4 = [];
|
||||
nTimes6 = [];
|
||||
nLabels = [];
|
||||
$(".start").html("Start");
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
setInterval(function() {
|
||||
if(active) {
|
||||
|
||||
if(id >= 0) {
|
||||
times4[id] = new Date().getTime();
|
||||
times6[id] = new Date().getTime();
|
||||
labels[id] = ""+(id/5);
|
||||
}
|
||||
s4.emit('pingUp', id);
|
||||
s6.emit('pingUp', id);
|
||||
|
||||
id++;
|
||||
}
|
||||
}, 200);
|
||||
|
||||
function calcAvg()
|
||||
{
|
||||
var n4 = 0;
|
||||
var avgAct4 = 0;
|
||||
for(var i = 0; i < nTimes4.length; i++)
|
||||
{
|
||||
if(nTimes4[i]) {
|
||||
avgAct4 += nTimes4[i];
|
||||
n4++;
|
||||
}
|
||||
}
|
||||
avgAct4 /= n4;
|
||||
|
||||
|
||||
var n6 = 0;
|
||||
var avgAct6 = 0;
|
||||
for(var i = 0; i < nTimes6.length; i++)
|
||||
{
|
||||
if(nTimes6[i]) {
|
||||
avgAct6 += nTimes6[i];
|
||||
n6++;
|
||||
}
|
||||
}
|
||||
avgAct6 /= n6;
|
||||
|
||||
$(".out").html("Ping Durchschnitt: IPv4: "+avgAct4.toFixed(1)+" ms / IPv6: "+avgAct6.toFixed(1)+" ms (Anfragen: "+n4+")");
|
||||
}
|
||||
|
||||
|
||||
|
||||
var nTimes4 = [];
|
||||
var nTimes6 = [];
|
||||
var nLabels = [];
|
||||
var chart;
|
||||
function loadChart()
|
||||
{
|
||||
//trim data
|
||||
/*var n = 50;
|
||||
var start = 0>times4.length-n?0:times4.length-n;
|
||||
|
||||
for(var i = start; i < times4.length; i++)
|
||||
{
|
||||
if(times4[i] > 100*1000)
|
||||
break;
|
||||
|
||||
nTimes4[i-start] = times4[i];
|
||||
nLabels[i-start] = labels[i];
|
||||
}
|
||||
|
||||
var n = 50;
|
||||
var start = 0>times6.length-n?0:times6.length-n;
|
||||
|
||||
for(var i = start; i < times6.length; i++)
|
||||
{
|
||||
if(times6[i] > 100*1000)
|
||||
break;
|
||||
|
||||
nTimes6[i-start] = times6[i];
|
||||
nLabels[i-start] = labels[i];
|
||||
}
|
||||
*/
|
||||
|
||||
calcAvg(nTimes4);
|
||||
calcAvg(nTimes6);
|
||||
|
||||
//draw chart
|
||||
var options =
|
||||
{
|
||||
low: 0,
|
||||
|
||||
axisX:
|
||||
{
|
||||
labelInterpolationFnc: function skipLabels(value, index)
|
||||
{
|
||||
return index % 10 === 0 ? value : null;
|
||||
}
|
||||
},
|
||||
|
||||
chartPadding:
|
||||
{
|
||||
top: 50,
|
||||
right: 5,
|
||||
bottom: 20,
|
||||
left: 25
|
||||
},
|
||||
|
||||
plugins: [
|
||||
Chartist.plugins.legend({
|
||||
clickable: false,
|
||||
legendNames: ['IPv4 Ping', 'IPv6 Ping']
|
||||
}),
|
||||
Chartist.plugins.ctAxisTitle(
|
||||
{
|
||||
axisX: {
|
||||
axisTitle: 'Zeit in Sekunden',
|
||||
axisClass: 'ct-axis-title',
|
||||
offset: {
|
||||
x: 0,
|
||||
y: 35
|
||||
},
|
||||
textAnchor: 'middle'
|
||||
},
|
||||
axisY: {
|
||||
axisTitle: 'Ping in ms',
|
||||
axisClass: 'ct-axis-title',
|
||||
offset: {
|
||||
x: 0,
|
||||
y: -10
|
||||
},
|
||||
textAnchor: 'middle',
|
||||
flipTitle: false
|
||||
}
|
||||
})
|
||||
]
|
||||
}
|
||||
|
||||
chart = new Chartist.Line('.ct-chart', {labels: nLabels, series: [nTimes4,nTimes6]}, options);
|
||||
console.log(chart);
|
||||
}
|
||||
|
||||
var idToIndex = [];
|
||||
function updateChart(id, v6) {
|
||||
if(id < 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
var limit = 50;
|
||||
|
||||
if(nLabels.length >= limit) {
|
||||
nLabels.shift();
|
||||
}
|
||||
if(nTimes4.length >= limit) {
|
||||
nTimes4.shift();
|
||||
}
|
||||
if(nTimes6.length >= limit) {
|
||||
nTimes6.shift();
|
||||
}
|
||||
|
||||
if(!nLabels.includes(labels[id])) {
|
||||
nLabels.push(labels[id]);
|
||||
|
||||
//set other value to null while waiting
|
||||
if(v6) {
|
||||
nTimes6.push(times6[id]);
|
||||
nTimes4.push(null);
|
||||
} else {
|
||||
nTimes4.push(times4[id]);
|
||||
nTimes6.push(null);
|
||||
}
|
||||
}
|
||||
else{
|
||||
//replace previously inserted null value
|
||||
if(v6) {
|
||||
nTimes6[nTimes6.length-1] = times6[id];
|
||||
} else {
|
||||
nTimes4[nTimes4.length-1] = times4[id];
|
||||
}
|
||||
}
|
||||
|
||||
calcAvg(nTimes4);
|
||||
calcAvg(nTimes6);
|
||||
|
||||
chart.update({labels: nLabels, series: [nTimes4,nTimes6]});
|
||||
}
|
||||
});
|
||||
265
style.css
Normal file
265
style.css
Normal file
|
|
@ -0,0 +1,265 @@
|
|||
*
|
||||
{
|
||||
font-family: Arial;
|
||||
}
|
||||
h4,h3,h5,h6
|
||||
{
|
||||
margin: 5px 0;
|
||||
}
|
||||
.v4, .v6
|
||||
{
|
||||
float:left;
|
||||
width: 45%;
|
||||
border: 3px solid black;
|
||||
border-radius:10px;
|
||||
margin: 5px;
|
||||
padding: 0;
|
||||
overflow:hidden;
|
||||
}
|
||||
.v4 p, .v4 h3, .v6 p, .v6 h3
|
||||
{
|
||||
margin: 0 5px;
|
||||
}
|
||||
.images
|
||||
{
|
||||
display:none;
|
||||
}
|
||||
.testimg
|
||||
{
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
html,body
|
||||
{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #1e1e1e;
|
||||
}
|
||||
|
||||
/*Hauptcontainer*/
|
||||
.cont
|
||||
{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right:0;
|
||||
width: 100%;
|
||||
max-width: 1000px;
|
||||
min-height: 100%;
|
||||
margin: -10px auto -10px auto;
|
||||
background: #f0f0f0;
|
||||
border: 1px solid #999;
|
||||
border-width: 0 1px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: visible;
|
||||
padding: 10px 10px 0;
|
||||
|
||||
}
|
||||
.cont h1
|
||||
{
|
||||
background: #4B87E7;
|
||||
width: 200%;
|
||||
margin-left: -10px;
|
||||
padding: 10px;
|
||||
color: #e7e7e7;
|
||||
}
|
||||
.headCont
|
||||
{
|
||||
padding: unset;
|
||||
}
|
||||
.headCont a
|
||||
{
|
||||
margin:3px;
|
||||
padding: 5px;
|
||||
}
|
||||
hr
|
||||
{
|
||||
width: 200%;
|
||||
margin: 10px 0 10px -30px;
|
||||
height: 3px;
|
||||
background: rgba(0,0,0,0.4);
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
span.info
|
||||
{
|
||||
display:inline-block;
|
||||
font-weight:bold;
|
||||
width:105px;
|
||||
}
|
||||
a
|
||||
{
|
||||
text-decoration: none;
|
||||
color: #4B87E7;
|
||||
border-radius: 3px;
|
||||
padding: 0 2px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
a.title
|
||||
{
|
||||
color: #eaeaea;
|
||||
}
|
||||
a:hover
|
||||
{
|
||||
background: #4B87E7;
|
||||
color: #f5f5f5;
|
||||
}
|
||||
a.title:hover
|
||||
{
|
||||
color: #111;
|
||||
}
|
||||
.secondary_link
|
||||
{
|
||||
font-size:70%;
|
||||
vertical-align:top;
|
||||
}
|
||||
|
||||
.ipAddr {
|
||||
font-weight:normal;
|
||||
cursor:pointer;
|
||||
}
|
||||
.ipTest{
|
||||
margin: -10px;
|
||||
}
|
||||
.ipTest > div{
|
||||
padding: 10px;
|
||||
transition: all 0.4s;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
.ipTest .success {
|
||||
background-color: rgb(220, 255, 160);
|
||||
}
|
||||
.ipTest .failure {
|
||||
background-color: rgba(255, 100, 136, 0.46);
|
||||
}
|
||||
.info_geo{
|
||||
transition: all 0.3s;
|
||||
padding: 7px;
|
||||
margin: -7px;
|
||||
border-radius: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
.info_geo:hover{
|
||||
background: rgba(255,255,255,0.8);
|
||||
box-shadow: inset 0 0 10px black;
|
||||
}
|
||||
|
||||
|
||||
/* loading icon */
|
||||
.lds-ellipsis {
|
||||
margin-left: 20px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 11px;
|
||||
}
|
||||
.lds-ellipsis div {
|
||||
position: absolute;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
animation-timing-function: cubic-bezier(0, 1, 1, 0);
|
||||
box-shadow: 0 0 5px black;
|
||||
}
|
||||
.lds-ellipsis div:nth-child(1) {
|
||||
left: 8px;
|
||||
animation: lds-ellipsis1 0.6s infinite;
|
||||
}
|
||||
.lds-ellipsis div:nth-child(2) {
|
||||
left: 8px;
|
||||
animation: lds-ellipsis2 0.6s infinite;
|
||||
}
|
||||
.lds-ellipsis div:nth-child(3) {
|
||||
left: 32px;
|
||||
animation: lds-ellipsis2 0.6s infinite;
|
||||
}
|
||||
.lds-ellipsis div:nth-child(4) {
|
||||
left: 56px;
|
||||
animation: lds-ellipsis3 0.6s infinite;
|
||||
}
|
||||
@keyframes lds-ellipsis1 {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes lds-ellipsis3 {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
@keyframes lds-ellipsis2 {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
100% {
|
||||
transform: translate(24px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/*chart*/
|
||||
|
||||
/*v4*/
|
||||
.ct-series-a .ct-line,
|
||||
.ct-legend .ct-series-0:before {
|
||||
stroke: #363880 !important;
|
||||
background-color: #363880 !important;
|
||||
border-color: #363880 !important;
|
||||
}
|
||||
.ct-series-a .ct-point
|
||||
{
|
||||
fill: #363880 !important;
|
||||
stroke: #363880 !important;
|
||||
}
|
||||
/*v6*/
|
||||
.ct-series-b .ct-line,
|
||||
.ct-legend .ct-series-1:before {
|
||||
stroke: #FA9100 !important;
|
||||
background-color: #FA9100 !important;
|
||||
border-color: #FA9100 !important;
|
||||
}
|
||||
.ct-series-b .ct-point
|
||||
{
|
||||
fill: #FA9100 !important;
|
||||
stroke: #FA9100 !important;
|
||||
}
|
||||
|
||||
|
||||
/*Legende*/
|
||||
.ct-legend {
|
||||
background: rgba(255,255,255,0.7);
|
||||
padding: 3px;
|
||||
border-radius: 5px;
|
||||
position: absolute;
|
||||
right:10px;
|
||||
top: 10px;
|
||||
z-index: 10;
|
||||
list-style: none;
|
||||
}
|
||||
.ct-legend li {
|
||||
position: relative;
|
||||
padding-left: 23px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.ct-legend li:before {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
content: '';
|
||||
border: 3px solid transparent;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.ct-legend li.inactive:before {
|
||||
background: transparent;
|
||||
}
|
||||
.ct-legend.ct-legend-inside {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
Loading…
Reference in a new issue