Node.js 服务器 - 如何将 buttonclick 函数从客户端传递到客户端答案

【问题标题】：Node.js Server - how to pass buttonclick function from client to clientNode.js 服务器 - 如何将 buttonclick 函数从客户端传递到客户端
【发布时间】：2016-11-28 19:28:45
【问题描述】：

我正在尝试做的是一些我已经在一些帮助下完成的小聊天。但是我想要的 rly 是当在 button1 上单击（打开新页面）时，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>

感谢您的进一步帮助！

【问题讨论】：

标签： javascript node.js html server

【解决方案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 个窗口，其中一个向另外两个发送点击，那些两个将开始模拟他们自己的点击，并将这些点击再次发送到服务器，一次又一次，一次又一次，没有结束。

在这里，我只使具有“远程”类的元素可远程单击，主要是因为否则单击链接以使用该页面打开新窗口会在所有打开的窗口中单击该链接，从而在该过程中打开更多页面，从而导致浏览器警告关于弹出窗口太多，但如果需要，您可以使用$('a') 代替$('.remote') 来选择所有链接。

在本例中，只有定义了 ID 的链接才能工作，因为这些 ID 是与 Socket.IO 消息一起发送的。

【讨论】：

@Bigga.exe 我做了一个工作演示。查看更新后的答案。
再次非常感谢你:)，你的演示真的很好，我会好好利用它的:) 非常好，祝你有美好的一天:)