Question

我正在尝试做的事情就像我已经在一些帮助下做的小聊天一样。但是，当我在button1（oppens新页面）上进行clicing时，我想要rly是什么，client1将buttonclick传递给client2，同样的动作发生在client2上（打开新页面），就像远程控制一样。

var nowjs = require('now');
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
    res.sendFile(__dirname + '/startHTM.htm');
});

io.on('connection', function(socket){
    socket.on('chat message', function(msg){
        io.emit('chat message', msg);
    });
});

http.listen(8080, function(){
    console.log('listening on *:8080');
});

<!doctype html>
<html>
    <head>
        <title>Socket.IO chat</title>
        <style>
            * { margin: 0; padding: 0; box-sizing: border-box; }
            body { font: 13px Helvetica, Arial; }
            form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
            form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
            form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
            #messages { list-style-type: none; margin: 0; padding: 0; }
            #messages li { padding: 5px 10px; }
            #messages li:nth-child(odd) { background: #eee; }
        </style>
    </head>

    <body>
        <ul id="messages"></ul>
        <form action="">
            <input id="m" autocomplete="off" /><button>Send</button>
        </form>
        <script src="/socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
    var socket = io();
    $('form').submit(function(){
        socket.emit('chat message', $('#m').val());
        $('#m').val('');
        return false;
    });
    socket.on('chat message', function(msg){
        $('#messages').append($('<li>').text(msg));
    });
</script>
    </body>
</html>

获得进一步帮助！

Answer 1

以下是一些可以帮助您入门的建议：

您需要在页面本身上监听每个点击事件，并将点击的坐标发送到服务器，或者监听元素上的点击事件并发送，例如每次点击事件到服务器的元素ID。

服务器需要将该事件发送给除原始客户端之外的每个客户端。

从服务器接收此类事件的所有客户端都需要模拟点击事件。

我会尝试编写一个简单的演示 - 当我有一个有效的例子时，我会更新答案。

更新

在GitHub上看一下这个例子：

https://github.com/rsp/node-socket.io-remote

它在app.js中有一个简单的Socket.IO服务器：

var path = require('path');
var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.use(express.static(path.join(__dirname, 'html')));

io.on('connection', s => {
  console.error('socket.io connection');
  s.on('click', d => {
    console.error('click on id '+d.id);
    s.broadcast.emit('click', d);
  });
});

http.listen(3002, () => console.error('Listening on http://localhost:3002/'));

请参阅：https://github.com/rsp/node-socket.io-remote/blob/master/app.js

在你的问题中使用jQuery的html / index.html中的客户端代码：

var ownClick = true;
var s = io();
s.on('connect_error', function (m) { log("error"); });
s.on('connect', function (m) { log("socket.io connection open"); });
s.on('message', function (m) { log(m); });
s.on('click', function (d) {
  log('received click message, id ' + d.id);
  ownClick = false;
  $('#'+d.id)[0].click();
  ownClick = true;
});

$('.remote').click(function (e) {
  if (ownClick) {
    log('emitting click message, id ' + e.target.id);
    s.emit('click', {id: e.target.id});
  }
});

（log()函数在源代码中定义，但为简单起见，我不在此处包含它。

请参阅：https://github.com/rsp/node-socket.io-remote/blob/master/html/index.html

重要问题

这里几乎没有重要的问题：

有一行：

$('#'+d.id)[0].click();

而不是：

$('#'+d.id).click();

因为我们想要运行本机浏览器的click()方法而不是jQuery方法，这可能会有所不同。

此外，我有一个ownClick变量，通常设置为true，除非为传入的远程点击事件运行处理程序。那是因为我们不想再将该事件发送到其他窗口。对于这个例子，它并不是真正需要的，因为我们每次点击都会离开页面，但如果我们留在页面上，那么事件就会级联：例如，如果我们有3个窗口，其中一个发送了一个点击到另外两个，那些两个人会开始模仿他们自己的点击，然后再次将这些点击发送到服务器，并再次发送，并且没有结束。

在这里，我只使用类＆＃34;远程＆＃34;远程可点击，主要是因为否则单击链接以打开该页面的新窗口会在所有打开的窗口中单击该链接，在此过程中打开更多页面，导致浏览器警告有太多弹出窗口，但您可以$('.remote')而不是$('a')如果需要，请使用malloc()选择所有链接。

在此示例中，只有具有已定义ID的链接才有效，因为这些ID与Socket.IO消息一起发送。

Node.js服务器 - 如何将buttonclick功能从客户端传递到客户端

1 个答案:

更新

重要问题