Question

我想创建可以激活或不激活的东西。该按钮显示应用程序所处的状态。首先，该按钮为绿色，并且文本显示为“开始”。因此，当某人单击该按钮时，它应变成红色，并且文本应更改为“停止”。

我让按钮起作用，以便它可以更改，这不是问题。问题是，如果我单击按钮并且它变成红色，则所有其他客户端上的按钮也应该都更改。因此，如果有3个人打开了该页面，那么当我单击该页面时，他们应该能够看到该页面变为红色。我使用socket.io在服务器和客户端之间创建了这些连接，但是由于某些原因，按钮在我自己的其他任何客户端上都没有改变。

我试图将套接字放置在“ click”事件侦听器之外的客户端上，但这对我不起作用。我尝试更改要发送到服务器并返回的对象的类型，但存在相同的问题。我相信这应该可以解决问题。

服务器端：

io.on('connection', function(socket) {
    io.sockets.emit("btnChange", btnChanged);
    socket.on("btnCurrent", function(btnCurrent){
        btnChanged = btnCurrent;
        io.emit("btnChange", btnChanged);
    });
});

客户端：

var btn = document.getElementById("activatieKnop");

var btnState = {
    remove: "red",
    add: "green",
    value: "Start"
};

btn.addEventListener("click", function(e){
    setBtnValues();
    socket.emit("btnCurrent", btnState);

    //Socket voor de knop
    socket.on("btnChange", function(currentBtn){
    btnState = currentBtn;
    changeBtn(btnState);
    });
});

function setBtnValues(){
    if(btn.value == "Start"){
        btnState.value = "Stop";
        btnState.remove = "green";
        btnState.add = "red";
    } else if(btn.value == "Stop"){
        btnState.value = "Start";
        btnState.remove = "red";
        btnState.add = "green";
    }
}

function changeBtn(btnStatus){
    btn.value = btnStatus.value;
    btn.classList.remove(btnStatus.remove);
    btn.classList.add(btnStatus.add);
}

单击后如何更改所有活动客户端的按钮？

0 个答案: