// TCP State machine var text = ""; var protokollaTila = -1; var hosts = { "h1": "TCP_Asiakas", "h2": "TCP_Palvelin" }; var synArray = new Array("[SYN] SEQ=1000", "[SYN ACK] SEQ=5000 ACK=1001", "[ACK] SEQ=1001 ACK=5001"); var tcpArray = new Array("[GET www sivu] LEN=400 SEQ=1001 ACK=5001", "[ACK] SEQ=5001 ACK=1401(1001+400)", "[HTTP/1.1 200 OK] LEN=660 SEQ=5001 ACK=1401", "[ACK] SEQ=1401 ACK=5661"); var finArray = new Array("[FIN, ACK] SEQ=5661 ACK 1401", "[ACK] SEQ=1401 ACK=5662", "[FIN, ACK] SEQ=1401 ACK 5662", "[ACK] SEQ=5662 ACK=1402"); $(document).ready(function() { alusta(); piirra(); $('a').click(function(event) { var tila = this.id; switch (tila) { case "tcp": switch (protokollaTila) { case -1: $('#tcp').fadeOut(500); $('#tcp').fadeIn(500, function() { $('#tcp').html('Seuraava viesti'); }); protokollaTila += 1; $('#serverState').html('LISTEN'); break; case 0: piirra_nuoli("h1", "h2", synArray[protokollaTila]); protokollaTila += 1; $('#clientState').html('SYN SENT'); break; case 2: piirra_nuoli("h1", "h2", synArray[protokollaTila]); protokollaTila += 1; $('#clientState').html('ESTABLISHED'); $('#serverState').html('ESTABLISHED'); break; case 1: $('#serverState').html('SYN RECEIVED'); piirra_nuoli("h2", "h1", synArray[protokollaTila]); protokollaTila += 1; break; case 4: case 5: piirra_nuoli("h2", "h1", tcpArray[protokollaTila - 3]); protokollaTila += 1; break; case 3: case 6: piirra_nuoli("h1", "h2", tcpArray[protokollaTila - 3]); protokollaTila += 1; break; case 8: $('#clientState').html('CLOSE WAIT'); piirra_nuoli("h1", "h2", finArray[protokollaTila - 7]); protokollaTila += 1; break; case 9: $('#clientState').html('LAST ACK'); piirra_nuoli("h1", "h2", finArray[protokollaTila - 7]); protokollaTila += 1; break; case 7: $('#serverState').html('FIN WAIT 1'); piirra_nuoli("h2", "h1", finArray[protokollaTila - 7]); protokollaTila += 1; break; case 10: $('#serverState').html('FIN WAIT 2'); piirra_nuoli("h2", "h1", finArray[protokollaTila - 7]); protokollaTila += 1; break; case 11: text = text.concat("\nNote right of " + hosts["h1"] + ": Kommunikaatio päättyi"); $('#clientState').html('CLOSED'); $('#serverState').html('TIME WAIT'); protokollaTila += 1; break; case 12: text = text.concat("\nNote left of " + hosts["h2"] + ": Timeout"); $('#clientState').html('CLOSED'); $('#serverState').html('CLOSED'); protokollaTila = -1; 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: TCP protokollan toiminta"; protokollaTila = -1; kuvia = 0; $('#tcp').fadeIn(500, function() { $('#tcp').html('TCP protokolla'); }); } function piirra() { $('#diagram').html(''); var diagram = Diagram.parse(text); diagram.drawSVG("diagram", { //theme: 'hand' //theme: 'simple' theme: $('.theme').val() }); }
<a id="tcp" href="javascript:void(0);">TCP kommunikaatio</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 style="display: inline-block;">TCP Asiakkaan tila: </div> <div id="clientState" style="display: inline-block; background-color: cyan"></div> <div style="display: inline-block;">TCP Palvelimen tila: </div> <div style="display: inline-block; background-color: yellow" id="serverState"></div> <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; }