通过socket.io调用一个函数

时间:2017-03-29 09:45:17

标签: button socket.io onclicklistener

这里我有一个按钮,显示警告框onclick。我正在尝试实现客户端和服务器模型,其中数据在客户端和服务器之间传输。现在,当我在两个窗口中打开脚本时,当我在一个窗口中单击按钮时,警报应显示在两个窗口中,这表示一个窗口中的用户认为另一个窗口中的用户单击了该按钮。

这是我的index.html文件

<html>
<head>

<script>
function myFunction() {
    alert("I am an alert box!");
}
</script>

</head>
<body>

<button id="datasend " type="button " ng-click="doPost "onclick="myFunction()">Send!
</button>

</body>
</html> 

这是我的app.js

 $scope.doPost = function () {

                myFunction();

        socket.emit('sendmessage', function (){

                myFunction();
            });


        socket.on('sendmessage', function () {

                $('#datasend').click(function()
      {

      });
            });
          }

1 个答案:

答案 0 :(得分:1)

您可以启动非常基本的节点服务器:

server.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:

的index.html

<!doctype html>
  <html>
    <head>
      <title>Testing socket.io</title>
    </head>
    <body>
      <button id="button">Send!</button>
      <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 = "button clicked";
        });
      </script>
    </body>
  </html>