Fatal编程技术网
  • html/
  • Html 一次单击两页中的按钮

Html 一次单击两页中的按钮

html node.js button socket.io

Html 一次单击两页中的按钮,html,node.js,button,socket.io,click,Html,Node.js,Button,Socket.io,Click,我有两个网页，如下所示，当我点击一个按钮时，一个页面上的警告框应该显示在两个页面上，我如何才能做到这一点。如何一次单击两个不同网页中的两个按钮 app.js var express = require('express'); var app = express(); var serv = require('http').Server(app); app.get('/',function(req, res){ res.sendFile(__dirname + '/client/

我有两个网页，如下所示，当我点击一个按钮时，一个页面上的警告框应该显示在两个页面上，我如何才能做到这一点。如何一次单击两个不同网页中的两个按钮

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客户端

    <!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>
如果你拥有这两页。这意味着他们都位于同一个域名www.adomain.com

您可以使用本地存储来实现这一点

在第一个页面的click事件中，在localstorage中存储一个值键

在第二页中，添加一个事件侦听器，以听到本地存储更改

当该事件激发时，单击您的按钮

或选择2

使用

这是一个插入式io套接字消息服务。你可以获得一个免费帐户，从一个页面发送消息，在另一个页面上监听并做出反应。在你的情况下，点击按钮。

出于好奇，我刚刚尝试了MartinWebb的答案。我希望它能给你一个开始

第1页：

<button type="button" onclick="hello()">Hello</button>

<script type="text/javascript">
    // window.localStorage.removeItem("text");
    function hello() {
        window.localStorage.setItem("text","Hello there..");
    }
</script>
第2页：

<p id="show"></p>

<script type="text/javascript">
    window.addEventListener('storage', storage_event_listener, false);

    function storage_event_listener(evt)
    {
        document.getElementById("show").innerText = evt.newValue;
        // console.log(evt);
    }
</script>
你可以看到我在我的第1页上评论了一行。这是因为每当调用setItem、removeItem或clear并实际更改某些内容时，都会对窗口对象触发存储事件。例如，如果将项目设置为其现有值，或者在没有命名键时调用clear，则存储事件不会触发，因为存储区域中实际上没有任何更改

因此，在进行实验时，我必须清除存储项才能调用事件。

您试图解决的根本问题是什么？这意味着什么？这两页有什么关系？你到底想在这里实现什么？@David我不知道如何连接这两个页面以便寻找解决方案。这些页面是否显示在iframes中？@vamshi:连接这两个页面没有意义，因此你不太可能找到解决方案。描述一下你在这里真正想要实现的目标。很有可能你做了错事，而寻求做错事的方法往往并不顺利。或者，如果你想真正顺利地添加pubnub实时api，创建一个频道，在第二页收听，获取消息，单击按钮。www.pubnub.com这是一个很好的解决方案。