// HTTP non-persistent vs. persistent
// 7.4.2015 added TCP SYN/FIN/ACK
// 6.4.2016 muokattu: nappi fade:it luokan, ei id:n, perusteella
// Lisätty: rinnakkaiset yhteydet
// 8.4 Korjattu non-persistent bugi, lisätty $(document).ready(), yhdistetty tilat 0,1 ja 2.
// Lisätty: HTTP/2
// TODO: pipelining, HTTP/2 push versio, Siisti koodia, yksinkertaista switch-case:iä (next FIN:it yhteen tilaan), liikaa toistoa
var text = "";
var kuvia = 0;
var yhteyksia = 0;
var protokollaTila = -1;
var tila = "";
var hosts = {
"h1": "HTTP_Asiakas",
"h2": "HTTP_Palvelin"
};
var synArray = new Array("Avataanko yhteys? (TCP SYN)", "Avataan yhteys, ok? (TCP SYN/ACK)", "OK! (TCP ACK)");
var getArray = new Array("GET html sivu!", "200 OK tässä sivu! (sivulla 3kpl kuvia)");
var finArray = new Array("Suljetaanpa yhteys (TCP FIN)", "Suljetaan yhteys (TCP FIN)", "Okei! (TCP ACK)", "Ookoo! (TCP ACK)");
var kuvaArray = new Array("GET Kuva ", "200 OK tässä Kuva ");
$(document).ready(function() {
alusta();
piirra();
$('a').click(function(event) {
if (this.id != "seuraava") tila = this.id;
switch (tila) {
case "persistent":
switch (protokollaTila) {
case -1:
text = "title: HTTP Protokolla - Persistent versio";
$('.napit').each(function() {
$(this).fadeOut(500);
});
$('#seuraava').fadeIn(500);
protokollaTila += 1;
break;
case 0:
case 1:
case 2:
if (protokollaTila === 1) {
piirra_nuoli("h2", "h1", synArray[protokollaTila]);
} else {
piirra_nuoli("h1", "h2", synArray[protokollaTila]);
}
protokollaTila += 1;
break;
case 3:
if (kuvia === 0) {
piirra_nuoli("h1", "h2", getArray[0]);
protokollaTila += 1;
} else if (kuvia < 4) {
piirra_nuoli("h1", "h2", kuvaArray[0] + kuvia);
protokollaTila = 4;
} else {
//
}
break;
case 4:
if (kuvia === 0) {
piirra_nuoli("h2", "h1", getArray[1]);
protokollaTila = 3;
} else if (kuvia < 4) {
piirra_nuoli("h2", "h1", kuvaArray[1] + kuvia);
if (kuvia === 3) {
protokollaTila = 5;
} else {
protokollaTila = 3;
}
} else {
// should not be here
//protokollaTila = 5;
}
kuvia++;
break;
case 5:
piirra_nuoli("h1", "h2", finArray[0]);
protokollaTila += 1;
break;
case 6:
piirra_nuoli("h2", "h1", finArray[1]);
protokollaTila += 1;
break;
case 7:
piirra_nuoli("h1", "h2", finArray[2]);
protokollaTila += 1;
break;
case 8:
piirra_nuoli("h2", "h1", finArray[3]);
if (kuvia < 4) {
protokollaTila = 0;
} else {
protokollaTila = 9;
}
break;
case 9:
text = text.concat("\nNote right of " + hosts.h1 + ": Kaikki data siirretty!");
protokollaTila = 10;
break;
case 10:
alusta();
break;
}
break;
case "nonpersistent":
switch (protokollaTila) {
case -1:
text = "title: HTTP Protokolla - Non-Persistent versio";
$('.napit').each(function() {
$(this).fadeOut(500);
});
$('#seuraava').fadeIn(500);
protokollaTila += 1;
break;
case 0:
case 1:
case 2:
if (protokollaTila === 1) {
piirra_nuoli("h2", "h1", synArray[protokollaTila]);
} else {
piirra_nuoli("h1", "h2", synArray[protokollaTila]);
}
protokollaTila += 1;
break;
case 3:
if (kuvia === 0) {
piirra_nuoli("h1", "h2", getArray[0]);
protokollaTila += 1;
} else if (kuvia < 4) {
piirra_nuoli("h1", "h2", kuvaArray[0] + kuvia);
protokollaTila = 4;
} else {
// should not be here
}
break;
case 4:
if (kuvia === 0) {
piirra_nuoli("h2", "h1", getArray[1]);
protokollaTila += 1;
} else if (kuvia < 4) {
piirra_nuoli("h2", "h1", kuvaArray[1] + kuvia);
protokollaTila = 5;
} else {
// should not be here
}
kuvia++;
break;
case 5:
piirra_nuoli("h1", "h2", finArray[0]);
protokollaTila += 1;
break;
case 6:
piirra_nuoli("h2", "h1", finArray[1]);
protokollaTila += 1;
break;
case 7:
piirra_nuoli("h1", "h2", finArray[2]);
protokollaTila += 1;
break;
case 8:
piirra_nuoli("h2", "h1", finArray[3]);
if (kuvia < 4) {
protokollaTila = 0;
} else {
protokollaTila = 9;
}
break;
case 9:
text = text.concat("\nNote right of " + hosts.h1 + ": Kaikki data siirretty!");
protokollaTila = 10;
break;
case 10:
alusta();
break;
}
break;
case "rinnakkain":
switch (protokollaTila) {
case -1:
text = "title: HTTP Protokolla - Rinnakkaiset TCP yhteydet";
$('.napit').each(function() {
$(this).fadeOut(500);
});
$('#seuraava').fadeIn(500);
protokollaTila += 1;
break;
case 0:
case 1:
case 2:
if (protokollaTila === 1) {
piirra_nuoli("h2", "h1", synArray[protokollaTila]);
} else {
piirra_nuoli("h1", "h2", synArray[protokollaTila]);
}
if (yhteyksia === 0) {
protokollaTila += 1;
} else {
yhteyksia++;
if (yhteyksia === 4) {
protokollaTila += 1;
yhteyksia = 1
}
}
break;
case 3:
if (kuvia === 0) {
piirra_nuoli("h1", "h2", getArray[0]);
protokollaTila += 1;
} else if (kuvia < 4) {
piirra_nuoli("h1", "h2", kuvaArray[0] + kuvia);
protokollaTila = 3;
kuvia++;
} else {
protokollaTila = 4;
kuvia = 1;
}
break;
case 4:
if (kuvia === 0) {
piirra_nuoli("h2", "h1", getArray[1]);
protokollaTila = 0;
} else if (kuvia < 4) {
piirra_nuoli("h2", "h1", kuvaArray[1] + kuvia);
protokollaTila = 4;
} else {
protokollaTila = 5;
}
kuvia++;
yhteyksia++;
break;
case 5:
text = text.concat("\nNote right of " + hosts.h1 + ": Suljetaan kaikki 4 yhteyttä, yhteensä 16 viestiä...");
protokollaTila += 1;
break;
case 6:
alusta();
break;
default:
text = text.concat("\nNote right of " + hosts.h1 + ": Ei vielä toteutettu...");
break;
}
break;
case "HTTP2":
switch (protokollaTila) {
case -1:
text = "title: HTTP Protokolla - HTTP/2";
$('.napit').each(function() {
$(this).fadeOut(500);
});
$('#seuraava').fadeIn(500);
protokollaTila += 1;
break;
case 0:
case 1:
case 2:
yhteyksia++;
if (yhteyksia === 2) {
piirra_nuoli("h2", "h1", synArray[protokollaTila]);
} else {
piirra_nuoli("h1", "h2", synArray[protokollaTila]);
}
protokollaTila += 1;
break;
case 3:
if (kuvia === 0) {
piirra_nuoli("h1", "h2", getArray[0]);
protokollaTila += 1;
} else if (kuvia < 4) {
piirra_nuoli("h1", "h2", kuvaArray[0] + kuvia);
kuvia++;
if (kuvia === 4) {
protokollaTila += 1;
kuvia = 1;
}
}
break;
case 4:
if (kuvia === 0) {
piirra_nuoli("h2", "h1", getArray[1]);
protokollaTila = 3;
} else if (kuvia < 4) {
piirra_nuoli("h2", "h1", kuvaArray[1] + kuvia);
} else {
// should not be here
}
kuvia++;
if (kuvia === 4) {
protokollaTila += 1;
}
break;
case 5:
piirra_nuoli("h1", "h2", finArray[0]);
protokollaTila += 1;
break;
case 6:
piirra_nuoli("h2", "h1", finArray[1]);
protokollaTila += 1;
break;
case 7:
piirra_nuoli("h1", "h2", finArray[2]);
protokollaTila += 1;
break;
case 8:
piirra_nuoli("h2", "h1", finArray[3]);
if (kuvia < 4) {
protokollaTila = 0;
} else {
protokollaTila = 9;
}
break;
case 9:
text = text.concat("\nNote right of " + hosts.h1 + ": Kaikki data siirretty!");
protokollaTila = 10;
break;
case 10:
alusta();
break;
default:
text = text.concat("\nNote right of " + hosts.h1 + ": Ei vielä toteutettu...");
break;
}
break;
case "aa":
alusta();
break;
default:
break;
} // switch
piirra();
});
});
function piirra_nuoli(h1, h2, viesti) {
text = text.concat("\n" + hosts[h1] + "->" + hosts[h2] + ": ");
text = text.concat(viesti);
}
function alusta() {
text = "title: HTTP Protokolla";
protokollaTila = -1;
kuvia = 0;
yhteyksia = 0;
tila = ""
$('.napit').each(function() {
$(this).fadeIn(500);
});
$('#seuraava').fadeOut(500);
}
function piirra() {
$('#diagram').html('');
var diagram = Diagram.parse(text);
diagram.drawSVG("diagram", {
//theme: 'hand'
//theme: 'simple'
theme: $('.theme').val()
});
}
<a id="seuraava" style="display: none;" href="javascript:void(0);">Seuraava viesti</a>
<a class="napit" id="nonpersistent" href="javascript:void(0);">Non-Persistent</a>
<a class="napit" id="persistent" href="javascript:void(0);">Persistent</a>
<a class="napit" id="rinnakkain" href="javascript:void(0);">Rinnakkaiset TCP yhteydet</a>
<a class="napit" id="HTTP2" href="javascript:void(0);">HTTP/2</a>
<a id="aa" href="javascript:void(0);">Aloita alusta</a> Theme:
<select class="theme" style="margin-left:0.1cm;">
<option value="simple" selected>Simple</option>
<option value="hand">Hand drawn</option>
</select>
<div id="diagram"></div>
a {
background-color: #FFFFCC;
width: 100px;
font-size: 1em;
border: 2px solid black;
border-radius: 5px;
float: top;
margin-left: 0.1cm;
}
a:visited {
color: blue;
}
a:hover {
color: orange;
}
a:active {
color: red;
}