2017-03-29 222 views
0

在这里我有一个按钮,它显示警报框onclick。我试图实现在客户端和服务器之间传输数据的客户端和服务器模型。现在,当我在两个窗口中打开脚本,并且当我单击一个窗口中的按钮时,警报应该显示在两个窗口中,这表示用户在一个窗口中认为用户在另一个窗口中单击了该按钮。通过socket.io调用函数

这里是我的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

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

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'); 

并打开以下索引。 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>