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

您的错误发生在客户端，导致无限循环调用：

点击DOM时，点击＆＃34;点击＆＃34;功能被解雇。
该功能会发出套接字＆＃34; myClick＆＃34;事件，所以＆＃34; myClick＆＃34;功能被解雇。
在此功能中触发点击事件，因此，再次触发上一个功能，您将无限回到第1步。

解决方案：替换

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

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

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

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

1 个答案: