JSFiddle - React, Tailwind, and code Playground

by Ari Viinikainen

HTML

<script src="https://bramp.github.io/js-sequence-diagrams/js/webfont.js"></script>
<script src="https://bramp.github.io/js-sequence-diagrams/js/snap.svg-min.js"></script>
<script src="https://bramp.github.io/js-sequence-diagrams/js/underscore-min.js"></script>
<script src="https://bramp.github.io/js-sequence-diagrams/js/sequence-diagram-min.js"></script>
<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>

CSS

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;
}

JavaScript

// 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);
          ...