Evo ti ga učenik, mora još da uči
To ti je dobar primjer jednosmjerne komunikacije, on vam melje, a vi samo slušate xd
U međuvremenu napravljeno a lot of t’ings, no ono najzanimljivije je da po svemu sudeći ovo uskoro neće biti samo dvosmjerna komunikacija, nego višesmjerna N2N komunikacija između svih članova koji pristupe određenom kanalu komunikacije.
Zasada su po tom pitanju dodane sobe, te mogućnost da se više kanala komunikacije odvija unutar iste sobe, te da na taj način mogu pristupati i uređivati stanja sobe.
Ako bi nekog možda zanimalo od kakvih to procesa se satoji Pulse, slijedi Pulse diagram toka:
P.S. ovo je moj prvi diagram toka , bemu…ovo je korisno, kako se nisam prije sjetio na taj način neke stvari dokumentirati.
Ako netko ima za predložiti neki simpatičan program za izradu ovakvih diagrama, unaprijed zahvaljujem.
Pa znaš, s ovime si me motivirao.
Pulse od sada omogućava kreiranje soba i N2N komunikaciju između svih članova neke sobe.
Kako to izgleda u praksi, snimio sam kratki video: https://youtu.be/YVboyLC8tms
Znači ovaj gore chat flow sam napravio sa Pulse za manje od 10min.
S napomenom da samo radi primjera su svi memberi na istom clientu, ali ne dijele nikakva stanja preko clienta, tako da bi se stvar isto ponašala da su i na različitim clientima.
Znači kompletan code sa Pulse za postići isto je sljedeći: (Gdje se ova pulse instanca mora instancirati za svakog membera)
var addSystemMsg = function(msg){
var msgItem = {txt:msg, systemMsg:true};
member.msgs.push(msgItem);
}
member.pulse = new Pulse({
channalID:'testRoomPulse',
method:"tool_pulse::testRoomPulse",
member:member.name,
room:{name:vue.roomName, password:'12345'},
onMsg:function(msg){
if(msg.charAt(0)==='@')addSystemMsg(msg.substring(1));
},
onMemberMsg:function(fromMember, msg){
var msgItem = {txt:msg, selfMsg:false, autor:fromMember, received:true};
member.msgs.push(msgItem);
},
onMemberConnect:function(memberName){
addSystemMsg('Member connected: $memberName');
member.roomMembers[memberName] = member.roomMembers[memberName] || {online:true};
member.roomMembers[memberName].online = true;
},
onMemberDisconnect:function(memberName){
addSystemMsg('Member dicconnected: $memberName');
if(member.roomMembers[memberName]) member.roomMembers[memberName].online = false;
},
onMemberCreate:function(memberName){
addSystemMsg('New Member joined: $memberName');
member.roomMembers[memberName] = {online:true};
},
onMemberLeave:function(memberName){
addSystemMsg('Member leave group: $memberName');
delete member.roomMembers[memberName];
},
});
var onNewMsg = function(reciever, msg, _callback, delayPush){
var msgItem = {txt:msg, selfMsg:true, autor:'Me', reciever:reciever===true ? 'ALL':reciever, received:false};
member.msgs.push(msgItem);
var callback = function(...args){
msgItem.received = true;
if(_callback)_callback(...args);
}
return {msg:msg, callback:callback};
}
member.sendTo = function(reciever, msg, _callback){
var r = onNewMsg(reciever, msg, _callback); //<< ovdje u callback poruke ugrađujemo da postavi status poslane poruke recieved = true.
member.pulse.sendTo(reciever, msg, r.callback);
}
…uz nešto još malo vue HTML-a za renderiranje ovih member poruka i members statusa … no to ionako nije implementacija komunikacije.
Hvala na alatu, super je.
A pada mi na pamet još jedna perverzno dobra ideja… bilo bi odlično imati debuger koji bi iscrtavao kako je tekao signal po diagramu toka i da se može sa play/stop to pratiti po vremenskoj osi… a ako se nađu dva ili više istovremeno paralelnih signala, da ih ocrta različitim bojama. …i klikom na bilo koju kućicu na diagramu toka da se mogu vidjeti koja su u tom momentu bila stanja / vrijednosti varijabli na ulazu/izlazu te kućice.
Da li trebam dopisati da tražim još jedan krvavi bug, hehe.
Ako ste mislisli da je model baš onako jednostavan, nije. Za dvosmjernu komunikaciju treba ipak malo toga više xd.
I ovo sve je bez PulseRoom nadogradnje, koja doduše i ne komplicira previše dodatno model.
Inače, ja sam fasciniran ovim prikazom modela putem diagrama toka, kako pobogu to nikada ranije nisam koristio xd. Znači ovo je top, toliko stvari mi se ukazalo, koje prije nisam primjetio. Mislim da idući kompleksniji projekt prvo crtam diagram toka, tek onda po njemu štrikam code. A ono što mi je posebno intrigantno, dalo bi se napraviti sučelje gdje bi se i programiralo pomoću diagrama toka. To bi otprilike izgledalo:
Something new in developing, bit će mnogo moćno
Znači, ove strelice malo zajebaju, želja mi je da su onako kao pametne i da prate bilo kakav razmještaj blokova. Prvo sam krenuo ručno računati geometriju za svaku kombinaciju i taman kada sam pomislio da sam rješio cca 80% situacija, skužim neke grde iznimke koje su masovno multiplicirale broj kombinacija i odlučio baciti sve u vjetar i krenuti novim pristupom.
Novi pristup nema ništa predračunato, nego strelice “same” traže najpovoljniji put da povežu dva bloka po principu “problema optimizacije rute trgovačnog putnika”. Prvi puta tako nešto radim, malo je tricky, ali obečavajuće.
Bit će to koristan feature, u ovom gore alatu koji sam nahvalio mi se baš ne sviđa kako tamo rade strelice. Tamo ako se krenu iole ozbiljnije razmještati blokovi, više manje treba ručno preštrikavati i strelice, što u nekim situacijama nije nimalo elegantno.
No ne radim ovo zbog toga, nego je cilj napraviti grafičko sučelje za programiranje putem blokova i za vizualno praćenje i debugiranje toka signala. Predosjećam da će biti totalno crazy alat.
P.S. Delay na videu nastaje zbog screen recordera, app je fino responzivan.
Imaš i draw.io za crtanje dijagrama toka. Tek sad vidim da je ista domena
Yep, to je isti alat koji je sugerirao kolega iznad. Neću reći da mi se nije dopao alat …dopao mi se i to čak toliko da želim imati opciju programirati ubuduće u nalik takvom sučelju. Coming sooon