Multiplayer; how to make all players' cameras see the same thing

Here is my glitch.me. Here is my project.
Here are the relevant scripts.

I am in the home stretch of ETA, at least for the purposes of my class. Right now, I need to figure out how to do persistent multiplayer. I have looked at both of these tutorials, and have tried to copy what they did.

As you can see in my project, I have a camera entity, like normal. But I also have an “Other.” This “Other” is supposed to represent players other than player #1. This mirrors the “Other” from the PlayCanvas real-time multiplayer tutorial. The “Other” camera entity is handled in the network.js script, on line 11.

// initialize code called once per entity
Network.prototype.initialize = function() {
    this.socket = io.connect('https://euclidean-trpg-assistant.glitch.me');

    this.socket.emit('initialize');
    var socket = this.socket;

    this.player = this.app.root.findByName('Camera');
    this.other = this.app.root.findByName('Other');

    var self = this;
    socket.on('playerData', function (data) {
        self.initializePlayers(data);
    });

    socket.on('playerJoined', function (data) {
        self.addPlayer(data);
    });
    
    socket.on('playerMoved', function (data) {
    self.movePlayer(data);
    });
};

Now, for the problems. When running ETA from the in-editor Launcher, the first instance’s itemPicker.js (the script that handles clicking on the environment) works fine. But opening a second tab sometimes causes the second tab’s itemPicker.js to not work. Sometimes it even makes neither of them work. Furthermore, the two tabs don’t reflect each other’s changes. For example, using the builder to add tiles doesn’t cause those tiles to appear in the other tab.

the first tab (using “camera”), with two additional tiles added at the top-right:

the second tab (using “other”), running simultaneously. notice how the new tiles aren’t being shown.

I don’t need ETA to be perfect right now. All I really need is for itemPicker.js to keep working on at least one tab and for the changes on one to be reflected on both. If anyone could take a look at this and point me in the right direction, I’d really appreciate it.

This is a difficult one as it does require a change in how it works.

To do a network based editor (which is effectively what this is), ideally you would want an authoritative server that shares the state of the ‘world’ to the clients.

The demo above from PlayCanvas is a bit of a ‘hack’ and not really suitable for this.

You could use Glitch or similar to be that authoritative server where it shares the state of the world to connected clients and the clients send edit commands.

Or you can make Glitch a matchmaker service and the first client connected becomes the authority and the other connected clients are sending edit commands while the first client shares state.

I see. I guess I’ll need more in-depth resources to be able to understand how to do this. Are there are any good resources on the topic that you could recommend? Online courses or textbooks, perhaps? Because I don’t think this is the sort of thing I can learn just by staring at W3Schools long enough.

Not at the beginner level. The problem is that there is the theory and then the implementation and it’s not often it’s the two together.

I’m currently looking at https://victorzhou.com/blog/build-an-io-game-part-1/ and https://www.amazon.co.uk/Development-Deployment-Multiplayer-Online-Games/dp/3903213055 as I know the theory but have never had to writer the server side part of it myself.

That makes sense. This sort of thing is usually a group effort, right? All the things I’ve done so far would be handled by one person, and the networking would be handled by another.

I’ve seen smaller multiplayer games (.io) done by a single developer.

The larger projects I’ve been on, you are right that we have a team of developers with different responsibilities.