Fatal编程技术网
  • javascript/
  • Javascript 通过socket.io单击按钮时触发函数

Javascript 通过socket.io单击按钮时触发函数

javascript button socket.io

Javascript 通过socket.io单击按钮时触发函数,javascript,button,socket.io,onclick,click,Javascript,Button,Socket.io,Onclick,Click,我有以下节点服务器和index.html文件，当我在浏览器中的多个选项卡或窗口中打开index.html文件时，当我单击按钮时，它会在所有打开的选项卡和窗口中显示“已单击”按钮，但在所有选项卡中，按钮颜色不会更改，它只会在单击按钮的选项卡中更改 app.js const io = require('socket.io')(3000); io.on('connection', function (socket) { console.log('a client has connected')

我有以下节点服务器和index.html文件，当我在浏览器中的多个选项卡或窗口中打开index.html文件时，当我单击按钮时，它会在所有打开的选项卡和窗口中显示“已单击”按钮，但在所有选项卡中，按钮颜色不会更改，它只会在单击按钮的选项卡中更改

app.js

const io = require('socket.io')(3000);
io.on('connection', function (socket) {
    console.log('a client has connected');
    socket.on('clicked', function() {
        io.emit('clicked');
    });



});



console.log('socket.io server started at port 3000');
index.html

<!doctype html>
  <html>
    <head>
      <title>Testing socket.io</title>
      </head>
    <body>
      <input type="button" id="button" style="width: 100px; padding: 10px; box-shaddow: 10px 6px 5px; #999999; -webkit-box-shadow: 6px 6px 5px #999999; -moz-box-shadow: 6px 6px 5px #999999; font-weight: bold; background: #16ed07; color: #000000; cursor: pointer; border-radius: 10px; border: 1px solid #D9D9D9; font-size: 150%;" value="Send!" onClick="onClickHandler(this)"/>
      <h2 id="alert"> waiting...</h2>


      <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.min.js"></script>
      <script>
        var socket = io("http://localhost:3000");
        socket.on('connect', function() {
          document.getElementById("button").addEventListener("click", function () {
              socket.emit("clicked");
          });

         });
        socket.on('clicked', function() {
          console.log('clicked');
          document.getElementById("alert").innerHTML = "send clicked";
        });




      </script>

       <script type="text/javascript">
function onClickHandler(elem) {
elem.style.background = 'red';
elem.style.color = 'black';
}
</script>

    </body>
  </html>


测试socket.io
等待。。。
变量套接字=io（“http://localhost:3000");
socket.on（'connect'，function（）{
document.getElementById（“按钮”）.addEventListener（“单击”），函数（）{
socket.emit（“单击”）；
});
});
socket.on（'clicked'，function（）{
console.log（'clicked'）；
document.getElementById（“警报”）.innerHTML=“单击发送”；
});
函数onClickHandler（elem）{
elem.style.background='红色'；
elem.style.color='黑色'；
}
将“onClickHandler”调用添加到“clicked”事件回调，如：

socket.on('clicked', function() {
  var button = document.getElementById('button');

  console.log('clicked');
  document.getElementById("alert").innerHTML = "send clicked";

  onClickHandler(button);
});
将“onClickHandler”调用添加到“clicked”事件回调，如：

socket.on('clicked', function() {
  var button = document.getElementById('button');

  console.log('clicked');
  document.getElementById("alert").innerHTML = "send clicked";

  onClickHandler(button);
});

io.sockets.emit（'clicked'）
io.sockets.emit（'clicked'）我可以让按钮按其值而不是按id@vamshi您可以尝试以下操作：
document.queryselectoral（“按钮[value='Send！']）
在我的例子中，我从另一个页面的表单中获取按钮值，这样按钮值在一个选项卡和另一个选项卡中会有所不同，并且在一个页面中会有多个按钮，所以我仍然可以使用您的建议吗？
document.querySelectorAll（“按钮[value='Send！']”无效我可以让按钮按其值而不是按id@vamshi您可以尝试以下操作：
document.queryselectoral（“按钮[value='Send！']）
在我的例子中，我从另一个页面的表单中获取按钮值，这样按钮值在一个选项卡和另一个选项卡中会有所不同，并且在一个页面中会有多个按钮，所以我仍然可以使用您的建议吗？
document.querySelectorAll（“按钮[value='Send！']”不起作用