ip.zuim.de/script.js

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 &nbsp; / &nbsp; 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]});
	}
});