时间戳

首页 > 解决方案 > 如何用一些按钮显示图像？

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

问题描述

我想创建一个页面（在我的计算机上），当您在本地网络中单击手机上另一个页面上的某些按钮时，图像会发生变化。为了解释这个项目，我希望用户可以选择一个词（所以，在电话上）并且在计算机页面上出现一个污点，所以它会创建一个阴影超时。（这很重要，因为这意味着图像会自行叠加）。我是编程新手，所以这对我来说是一项非常艰苦的工作。

但是，我现在可以使用 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 );

谢谢

标签： javascriptjquerysocketswebsocketsocket.io

解决方案

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用于带有按钮的控制页面。

推荐阅读