Question

我想在本地网络中创建一个页面（在我的计算机上），当您单击手机另一页上的某些按钮时，图像会更改。为了解释该项目，我希望用户可以选择一个单词（在电话上），然后在计算机页面上显示一个污点，这样会加深阴影。（这很重要，因为这意味着图像会叠加在一起）。我是编程的新手，所以对我来说是非常艰苦的工作。

但是，现在我可以使用socket.io和node.js通过本地网络在电话和计算机之间进行通信了。我也能够在一个简单的html页面中制作所需的东西。但是我绝对不知道如何用socket.io做同样的事情。这就是为什么我需要您的帮助。对于我想要两个不同的页面并进行交流的事实，我想我知道该往哪个方向走，但是真正的问题是显示图像的按钮。 编辑：此外，我希望图像淡化显示

我的server.js文件

io.socket.on('connection', function(socket) {
      console.log('Client connected...');
      //when the server receives clicked message, do     this
    socket.on('clicked', function(data) {
          clickCount++;
         //send a message to ALL connected clients
      socket.broadcast.emit('buttonUpdate', clickCount);
    });
});

和index.html

<p id="buttonCount">The button has been clicked 0 times.</p>
<button onclick="buttonClicked()">Click me</button>
<script src="socket.io/socket.io.js"></script>
<script>
             var socket = io.connect();

             function buttonClicked(){
               socket.emit('clicked');
             }

             //when we receive buttonUpdate, do this
             socket.on('buttonUpdate', function(data){
                 document.getElementById("buttonCount").innerHTML = 'The button has been clicked ' + data + ' times.';
             });
        </script>

我知道我的实际代码的重要部分在这里，即使实际上与我想要的无关。

在html语言中，我通常只使用这样的函数

".titre" ).click(function() {
  $( ".d5" ).fadeIn( 2000 );
  $( ".d4" ).fadeIn( 2000 );

谢谢

Answer 1

socket.broadcast.emit()将向所有调用当前事件的客户端除客户发送事件。

socket.emit()仅向客户端发出。

话虽如此，您需要同时做这两项才能吸引所有人。

io.socket.on("connection", function(socket) {
  console.log("Client connected...");

  // On emit from client with socket.emit("clicked")
  socket.on("clicked", function(data) {
    clickCount++;

    // Emit from server to client
    socket.broadcast.emit("buttonUpdate", clickCount);
    socket.emit("buttonUpdate", clickCount);
  });
});

例如，请参见Codesandbox。

https://6yq3738mrn.sse.codesandbox.io/用于仅显示数字的主页。
https://6yq3738mrn.sse.codesandbox.io/control用于带有按钮的控制页面。

如何用一些按钮显示图像？

1 个答案: