Websockets och Javascript

2017-03-16, 12:47 #1

Medlem

Reg: Aug 2010

Inlägg: 1 525

Hej,
Är det någon som jobbat med websockets här? Tror inte detta är WS specifikt, utan kanske mer min avsaknad av kunskaper om JS i kombination med Async/Sync I/O.

Jag har en Javascript klient (HTML) sida som prenumerera på events från en WS server. Så fort ett nytt event kommer in körs ett animation library som flyttar lite i DOM:en. Allt fungerar fint.

Förutom om det kommer två events tätt inpå varandra. Eftersom koden triggas på varje event så kommer tidigare eventet's data att ersättas med det nya. Helt logiskt.

Tyvärr vill jag inte ha det så, då det kan komma många events efter varandra och då kommer mitt animation library inte vara klart (tar 15 sekunder)

Finns det något sätt jag kan köa upp dessa events och loopa igenom dessa? Detta måste ju också göras async

Just nu använder jag autobahn som WS library.

Citera

2017-03-16, 12:55 #2

Medlem

Reg: Feb 2014

Inlägg: 1 065

Låter ju helt galet när du säger att det tidigare eventets data ersätts med det nya för att dom kommer tätt inpå, så ska det ju absolut inte vara?

Citera

2017-03-16, 14:11 #3

Medlem

Reg: Mar 2016

Inlägg: 817

Du kan ju skapa ett lock som du låser när du påbörjar animationen och låser upp efteråt. Då får du automatisk en kö in till din critical section.

__________________
Senast redigerad av DigiFlax 2017-03-16 kl. 14:14.

Citera

2017-03-17, 09:50 #4

Medlem

Reg: Aug 2010

Inlägg: 1 525

Citat:

Ursprungligen postat av DigiFlax

Du kan ju skapa ett lock som du låser när du påbörjar animationen och låser upp efteråt. Då får du automatisk en kö in till din critical section.

Hur skapar jag en lock på en callback som körs asynkront? Vad ska jag sätta som triggar vs låser min lock?

Citera

2017-03-17, 12:24 #5

Medlem

Reg: Mar 2016

Inlägg: 817

Citat:

Ursprungligen postat av studioxswe

Hur skapar jag en lock på en callback som körs asynkront? Vad ska jag sätta som triggar vs låser min lock?

Tänker att du har en delad flagga som är satt till True när en animation pågår. Får du in en ny animation när den flaggan är satt till True så lägger du den nya animationen i en kö. När du då är klar med en animation så måste du kolla kön och starta en ny animation om det finns något där. Alltså, om du får in en ny animation när det redan pågår en annan så kölägger du den nya animationen och litar på att den pågående animationen invoke:ar den nya animationen när den pågående animationen körts klart.

Tänkte först att du kunde köra typ ett spin lock och på så sätt få en automatisk kö. Men eftersom javascript bara går på en tråd så får du nog implementera en egen kö.

Citera

2017-03-17, 15:49 #6

Medlem

Reg: Aug 2010

Inlägg: 1 525

Citat:

Ursprungligen postat av DigiFlax

Tänker att du har en delad flagga som är satt till True när en animation pågår. Får du in en ny animation när den flaggan är satt till True så lägger du den nya animationen i en kö. När du då är klar med en animation så måste du kolla kön och starta en ny animation om det finns något där. Alltså, om du får in en ny animation när det redan pågår en annan så kölägger du den nya animationen och litar på att den pågående animationen invoke:ar den nya animationen när den pågående animationen körts klart.

Tänkte först att du kunde köra typ ett spin lock och på så sätt få en automatisk kö. Men eftersom javascript bara går på en tråd så får du nog implementera en egen kö.

Jag är inte så bra på JS så jag vet inte riktigt hur jag ska implementera detta. Men jag håller med dig, och har varit inne på att skapa en kö, vilket är det mest logiska då jag aldrig vet när det kommer events, hur många dom är osv.

Kan visa vad jag skrivit kodmässigt (inte så snyggt) så kanske jag kan få tips om hur jag borde göra? Jag vill gärna lära mig så det är ok med inriktning. Har tidigare googlat på köhantering i JS men bara blivit vimsig av det

Jag har försökt loopa igenom elementen i koden nedan, men det fungerade inte..

Kod:

<div id="bar"> </div> <img id="logo" src="">
<h4 id="ticker">(placeholer)<br/>(placeholer)<br/> Säsong (placeholer) Avsnitt (placeholer)</h4>

  <script src="http://autobahn.s3.amazonaws.com/js/autobahn.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
	<!-- <script src="animate.js"></script> -->
	<script>

	    var conn = new ab.Session('ws://control.nebuchadnezzar.local:8080',
	        function() {
	            conn.subscribe('NextShow', function(topic, data) {
	                console.log(data);

                  for(key in data.Program){

		ticker.innerText = data.Program[key];
		TweenMax.to("#bar", 2, {left:1450,ease:Back.easeOut});
		TweenMax.to("#ticker", 2, {left:1560,ease:Back.easeOut, delay:0.5});
		TweenMax.to("#logo", 2, {left:1450,ease:Back.easeOut, delay:0.5});

                TweenMax.to("#ticker", 2, {left:1920,ease:Power2.easeOut, delay:10});
		TweenMax.to("#logo", 2, {left:1920,ease:Power2.easeOut, delay:10});
		TweenMax.to("#bar", 2, {left:1920,ease:Power2.easeOut, delay:10});

		TweenMax.to("#logo", 2, {opacity:0, delay:11});
		TweenMax.to("#ticker", 2, {opacity:0, delay:11});
		TweenMax.to("#bar", 2, {opacity:0, delay:11});

              	console.log(ProgramEPG);
		setTimeout(function(){
		 location.reload();
		  },1000*30);  
                }

	      });
	        },
	        function() {
	            console.warn('WebSocket connection closed');
		location.reload(); // Ok rätt ful kod för att initiera ny connection
	        },
	        {'skipSubprotocolCheck': true, 'maxRetries': 60, 'retryDelay': 500}
	    );

	// A $( document ).ready() block.
	$( document ).ready(function() {
	    console.log( "ready!" );
	});

__________________
Senast redigerad av studioxswe 2017-03-17 kl. 15:53.

Citera

2017-03-17, 16:56 #7

Medlem

Reg: Mar 2016

Inlägg: 817

Börja med att definiera din function för animeringen, sedan definierar du en callback function som sköter kö-hantering och anrop för animering.

Typ denna strukturen:

Kod:


var flag = false; //global flaga på passande ställe

conn.subscribe('NextShow', callback);

function callback(topic, data){

    if (flag)

        queue.add(topic, data);

    else {

        flag = true;

        myAnimation(topic, data);

        flag = false;

        if (queued_items)

            callback(queue.get_item(), queue.get_data()); //rekursivt anrop

}

function myAnimation(topic, data){

    console.log(data);

    for(key in data.Program){

    [....]

    }

}

Nu är inte koden komplett, men hoppas du förstår tankesättet lite. Köhanteringen har jag bara satt beskrivande funktionsnamn på t.ex. Varför gör du en reload 30 sekunder efter en animation?

__________________
Senast redigerad av DigiFlax 2017-03-17 kl. 17:23.

Citera

2017-03-18, 15:43 #8

Medlem

Reg: Aug 2010

Inlägg: 1 525

Citat:

Ursprungligen postat av DigiFlax

Börja med att definiera din function för animeringen, sedan definierar du en callback function som sköter kö-hantering och anrop för animering.

Typ denna strukturen:

Kod:


var flag = false; //global flaga på passande ställe

conn.subscribe('NextShow', callback);

function callback(topic, data){

    if (flag)

        queue.add(topic, data);

    else {

        flag = true;

        myAnimation(topic, data);

        flag = false;

        if (queued_items)

            callback(queue.get_item(), queue.get_data()); //rekursivt anrop

}

function myAnimation(topic, data){

    console.log(data);

    for(key in data.Program){

    [....]

    }

}

Nu är inte koden komplett, men hoppas du förstår tankesättet lite. Köhanteringen har jag bara satt beskrivande funktionsnamn på t.ex. Varför gör du en reload 30 sekunder efter en animation?

Tackar

Jag har haft lite problem med GSAP att resetta domen, då den inte verkar göra det automatiskt (på den kod jag skrivit) så jag gjorde en enkel variant för mina tester, detta kommer såklart inte fungera om jag får köhanteringen att fungera.

Har bara en fråga, hur fungerar if (queued_items)? Antar att det är en variabel som ska fyllas på? I så fall var?

Citera

2017-03-18, 21:57 #9

Medlem

Reg: Mar 2016

Inlägg: 817

Citat:

Ursprungligen postat av studioxswe

Tackar

Jag har haft lite problem med GSAP att resetta domen, då den inte verkar göra det automatiskt (på den kod jag skrivit) så jag gjorde en enkel variant för mina tester, detta kommer såklart inte fungera om jag får köhanteringen att fungera.

Har bara en fråga, hur fungerar if (queued_items)? Antar att det är en variabel som ska fyllas på? I så fall var?

Den raden kollar helt enkelt bara om det finns något i kön. Drog bara till med ett beskrivande variabelnamn. Egentligen kanske du vill ha en funktion där istället, typ if (queue.not_empty()) om du nu skapar ett queue objekt. Lär ju finnas färdiga bibliotek för köhanteringen, då skapar du bara ett object av topic och data innan du stoppar in det i kön. Är nog nästan att rekommendera att du använder färdig kod för köhanteringen.

Citera

2017-03-20, 10:33 #10

Medlem

Reg: Aug 2010

Inlägg: 1 525

Citat:

Ursprungligen postat av DigiFlax

Den raden kollar helt enkelt bara om det finns något i kön. Drog bara till med ett beskrivande variabelnamn. Egentligen kanske du vill ha en funktion där istället, typ if (queue.not_empty()) om du nu skapar ett queue objekt. Lär ju finnas färdiga bibliotek för köhanteringen, då skapar du bara ett object av topic och data innan du stoppar in det i kön. Är nog nästan att rekommendera att du använder färdig kod för köhanteringen.

ja det tror jag också

Fast vilket bibliotek skulle du rekommendera?

Jag har dessutom funderat på att använda "promise" då det verkar vara som klippt skuret på async operationer, hittade även en wrapper till GSAP (mitt anim lib) som kan returnera promise efter att min animation körts.

Har läst lite på om autobahn och deras support för promise men har inte hittat så mycket. Inte heller stöd för köhantering, men jag lär mig lite mer iaf

Citera

2017-03-20, 17:17 #11

Medlem

Reg: Jul 2013

Inlägg: 9 727

Varför köra ett lib för websocket? Det är bokstavligen bara skapa ett objekt och sätta två-tre events på objektet och sen är det ju klart...

Citera

Websockets och Javascript

Stöd Flashback