Как отображать изображения с помощью некоторых кнопок?

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 для страницы управления с кнопкой.