title: trigger a function when button clicked, through socket.io
body: <p>I have the following node server and index.html file, when i open the index.html file in multiple tabs or windows in browser and when i click the button it shows button clicked in all the opened tabs and windows but the button colour does not change in all the tabs it only changes in tab in which the button was clicked.</p>
  
  <p>app.js</p>
  
  <pre><code>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'); 
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;!doctype html&gt;
    &lt;html&gt;
      &lt;head&gt;
        &lt;title&gt;Testing socket.io&lt;/title&gt;
        &lt;/head&gt;
      &lt;body&gt;
        &lt;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)"/&gt;
        &lt;h2 id="alert"&gt; waiting...&lt;/h2&gt;
  
  
        &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.min.js"&gt;&lt;/script&gt;
        &lt;script&gt;
          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";
          });
  
  
  
  
        &lt;/script&gt;
  
         &lt;script type="text/javascript"&gt;
  function onClickHandler(elem) {
  elem.style.background = 'red';
  elem.style.color = 'black';
  }
  &lt;/script&gt;
  
      &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>