I have two web pages as follows, when i click a button in one page alert box should be displayed in both pages, How can i achieve this. How can i click two buttons in two different web pages at once
app.js
var express = require('express');
var app = express();
var serv = require('http').Server(app);
app.get('/',function(req, res){
res.sendFile(__dirname + '/client/index.html');
});
app.use('/client',express.static(__dirname + '/client'));
serv.listen(2000);
console.log("server started");
var SOCKET_LIST ={};
var io = require("socket.io")(serv,{});
io.sockets.on("connection", function(socket){
socket.id = Math.random();
SOCKET_LIST[socket.id] = socket;
console.log("socket connection");
socket.on('disconnect',function(){
delete SOCKET_LIST[socket.id];
console.log("Disconnected");
});
socket.on("button",function myFunction() {
alert("I am an alert box!");
});
socket.emit('servermsg', $("button").click(function() {
alert("I am an alert box!");
}));
});
setInterval(function(){
for(var i in SOCKET_LIST){
var socket = SOCKET_LIST[i];
}
}, 1000/25);
index.html (client)
<!DOCTYPE html>
<html>
<body>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script>
var socket =io();
socket.emit('button',function myFunction() {
alert("I am an alert box!");
});
socket.on('servermsg', function(data){
console.log(data.msg);
});
</script>
<p>Click the button to display an alert box:</p>
<button onclick="myFunction()">Try it</button>
</script>
</body>
</html>
If you own the two pages. That means they both sit on the same domain www.adomain.com.
You can do this using local-storage.
On the click event of the first page store a value key in localstorage.
https://developer.mozilla.org/en/docs/Web/API/Window/localStorage
In the second page add an event listener to "hear" the localstorage change.
http://html5demos.com/storage-events
When that event fires click your button
https://www.w3schools.com/jsref/met_html_click.asp
Or Option 2
Use https://www.pubnub.com
This is a drop in io socket msg service. You can get a free account send a message from one page, listen for it on another and react. In your case click the button.
Out of Curiosity i just tried MartinWebb's answer. I hope it might give you a start.
Page # 1:
Page # 2:
You can see i have commented a line on my page # 1. It is because "The storage event is fired on the window object whenever setItem(), removeItem(), or clear() is called and actually changes something. For example, if you set an item to its existing value or call clear() when there are no named keys, the storage event will not fire, because nothing actually changed in the storage area."
So, while experimenting i had to clear my storage item in order to invoke the event.