javascript - 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){