Blockly collaborative code

[Sebastien K.]

Hello,
Currently working on a blockly/ace interface, I would like to implement a real-time collaborative code. Do you know if there are already projects that can help me to achieve this?
Thanks a lot.
Sebastien.

[Beka Westberg]

Hello Sebastien!

There's a real time collaboration demo, but I'm not sure if it's up-to-date. The basic way of doing real time collaboration is using events. Every time a non-ui event happens that is triggered by a user in one workspace, you serialize it, pipe it over to the other user in another workspace, deserialize it, and run it.

I hope that helps! If you have any further questions please reply!
--Beka

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/f16b26ff-586c-4d47-b7b9-0f819e5c1063n%40googlegroups.com.

[Sebastien K.]

Hello,

Thanks for your answer, indeed i was thinking that way. The sample you just link helped me too. I'm gonna try to work on that.

Thank you.

[Beka Westberg]

Sure thing! Best of luck with your project :D

On Mon, Jun 13, 2022 at 8:58 AM Sebastien K. <vittase...@gmail.com> wrote:

Hello,

Thanks for your answer, indeed i was thinking that way. The sample you just link helped me too. I'm gonna try to work on that.

Thank you.

Le vendredi 3 juin 2022 à 16:32:24 UTC+2, bwes...@google.com a écrit :

Hello Sebastien!

There's a real time collaboration demo, but I'm not sure if it's up-to-date. The basic way of doing real time collaboration is using events. Every time a non-ui event happens that is triggered by a user in one workspace, you serialize it, pipe it over to the other user in another workspace, deserialize it, and run it.

I hope that helps! If you have any further questions please reply!
--Beka

On Thu, Jun 2, 2022 at 8:59 AM Sebastien K. <vittase...@gmail.com> wrote:

Hello,
Currently working on a blockly/ace interface, I would like to implement a real-time collaborative code. Do you know if there are already projects that can help me to achieve this?
Thanks a lot.
Sebastien.

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/f16b26ff-586c-4d47-b7b9-0f819e5c1063n%40googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/3f1858e9-2090-4ee4-ab16-98e59c7ad370n%40googlegroups.com.

[Paige]

I also looked into this and ran across this post. Have you had any luck? 

[ewpa...@gmail.com]

Hello Paige,

At least in our experience with supporting realtime collaboration in App Inventor, it's not quite as simple as passing events between clients, particularly when the events are close in time or there are many clients (which somewhat implies operations in close temporal proximity). The challenge is that if you have two users making conflicting operations in a small window, user 1 applies ops A + B and then user 2 applies ops B + A. In some cases, the results of these sequences are not equivalent (such as when one of the ops is a deletion event). Of course, this also depends on your app's semantics, which at least in our case is a superset of Blockly's semantics. In our case, we have a central server that timestamps operations so that operations can be applied in order which the server saw them, in which case one user's workspace may have to rewind, replay the remote changes, then replay local changes (similar to a git rebase). App Inventor also introduces additional operations, such as renaming a component, that cause cascading events in the Blockly workspace that can be more compactly modeled separately from Blockly's events, so you may want to those types of operations in your own application under consideration in your design.

Regards,

Evan

[Mark Friedman]

I would be wary of using an approach like this which, iiuc, sends the entire workspace (as XML) from each app to the others on every change and then overwrites the collaborators' workspaces.  There are a few issues that I see.  One is that if there is any extended period of disconnection between the apps then lots of changes can get lost.  Another is that the user's context can easily get lost, since their entire workspace will get replaced while they are working.  Another potential issue is that if the number of blocks gets large enough the approach could get slow and unwieldy, since the entire workspace is getting serialized and deserialized on each change.

-Mark

On Fri, Aug 12, 2022 at 12:55 AM fu6...@gmail.com <fu6...@gmail.com> wrote:

Hi, I had a simple test by using MQTT. 


var myTimer;

document.addEventListener('DOMContentLoaded', function() {

   //etc...

    var collaborationID = "SpBlocklyJS_"+Math.random().toString(16).substr(2, 8);
    var mqttState = false;
    var mqttLock = false;
   
    function onBlocksChange(event) {
        clearTimeout(myTimer);
       
        if (event.type == "create"||event.type == "move"||event.type == "change"||event.type == "click"||event.type == "drag")    
            mqttState = true;
        else if (event.type == "finished_loading") {
            mqttState = false;
            mqttLock = false;
        }
   
          myTimer  = setTimeout(function(){
            if (mqttState ==true&&mqttLock==false) {
                mqttState = false;
                var xml = Blockly.Xml.workspaceToDom(Blockly.getMainWorkspace());
                var xmlText = Blockly.Xml.domToText(xml);

                mqtt_client.publish('blockly/mqtt', collaborationID+",,,"+xmlText);
            }        
            mqttLock = false;
        }, 1000);
    }
    workspace.addChangeListener(onBlocksChange);
   
   
    const clientId = "mqtt_" + Math.random().toString(16).substr(2, 8);
    const options = {
        username: '',
        password: '',
        keepalive: 60,
        clientId: clientId,
        protocolId: "MQTT",
        protocolVersion: 4,
        clean: true,
        reconnectPeriod: 1000,
        connectTimeout: 30 * 1000
    }

    var mqtt_client = mqtt.connect('ws://mqttgo.io:8000/mqtt',options);
    mqtt_client.on("connect", ()=>{
        console.log("MQTT connected");
        mqtt_client.subscribe('blockly/mqtt');
        mqtt_client.on("message", async function (topic, payload) {
            var enc = new TextDecoder("utf-8");
            payload = enc.decode(payload).split(",,,");
            //console.log(payload);
              if (topic=='blockly/mqtt'&&payload[0]!=collaborationID) {
                mqttLock = true;
                var xmlDoc = Blockly.Xml.textToDom(payload[1]);
                Blockly.getMainWorkspace().clear();
                Blockly.Xml.domToWorkspace(xmlDoc, Blockly.getMainWorkspace());
              }
        })
    })


});    

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/44e07633-b494-4ddf-bdd2-6ef29ad140adn%40googlegroups.com.

[fu6...@gmail.com]

Hi, Mark,

Thanks for your advice. I had added the collaboration function in my project. Teachers and students in Taiwan will test the function and I will continue to improve this feature.

Line 1079 to 1204
https://github.com/fustyles/webduino/blob/643255e65a1575f2bff51dce82ca757e9d21f153/SpBlocklyJS/js/index.js#L1079


fu6...

[Mark Friedman]

No problem.  If your code satisfies your needs, great!  However, I would look into something like Blockly's realtime collaboration sample, as Beka suggested, if you find the need for something more robust.

-Mark

--

You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/3d3490c1-cbb7-4b00-8269-470e0928d3c6n%40googlegroups.com.

[Paige]

Thanks for all of your responses! Sorry for the delayed message.  I will look further into your messages and get back to you shortly.  At a glance, this looks helpful! It might be fun to chat sometime about this as well.  I'm always looking for collaborators (I work in academia, and it sounds like you may be, too!). Thank you for your quick responses.  Chat soon!

[Paige]

Hi all,

I've been playing with Blockly's realtime collaboration sample and planning a bigger collaboration system with that. This is really awesome.  Thanks everyone!

[Paige]

Hi all,

I've been playing with Blockly's realtime collaboration sample and planning a bigger collaboration system with that. This is really awesome.  Thanks everyone!

I'll share a link once it's on GitHub.

P.S. I having only been replying to Blocky and not the whole group. Sorry! This is my first Google Group. 

On Friday, August 12, 2022 at 7:44:09 PM UTC-4 mark.f...@gmail.com wrote: