Socket.io 和 Node/Express - 超出最大调用堆栈大小

Question

我在前端使用 react，在后端使用 node/express。我正在尝试集成套接字以使在一个客户端上完成的任何单击事件都在所有其他客户端上发出。 （例如，如果有人点击“播放歌曲”，它将触发所有其他用户播放歌曲的点击事件）。

当我点击某个东西时，它不会到达服务器的套接字侦听器并在浏览器的控制台中显示超出最大调用堆栈大小。

PS：这是我第一次导入代码，它不会让我缩进它！

服务器端代码：

var express = require('express');
var http = require('http');
var app = express();
var server = http.createServer(app);
var io = require('socket.io')(server);
server.listen(8000);
io.on('connection', function (socket) {
    console.log('socket connected!');
    socket.on('myClick', function (data) {
        console.log('event hit Server');
        socket.broadcast.emit('myClick', data);
    });
    socket.on('disconnect', function () {
        io.emit('user disconnected');
    });
});

客户端代码：

$(document).ready(function () {
    var socket = io('http://localhost:8000');

    $(document).on('click', function(event){
        console.log('Something has been clicked!');
        console.dir(event.target);
        socket.emit('myClick', {id: event.target});
    });
    socket.on('myClick', function (data) {
        console.log('event hit other client');
        $(data.id).trigger('click');
    });
});

Answer 1

你的错误是在客户端，你正在导致一个无限循环的调用：

1. 点击 DOM 时，会触发“点击”函数。
2. 该函数会发出套接字的“myClick”事件，因此会触发“myClick”函数。
3. 在此函数中，您触发了一个点击事件，因此，之前的函数再次被触发，您将无限返回到第 1 步。

解决方案：更换

$(document).on('click', function(event){

使用更具体的内容，例如必须触发事件的元素的 id 或类：

$("#elementId").on('click', function(event){