I'm using react on front end and node/express on backend. I am trying to integrate sockets to make any click event done on one client be emitted on all the other clients. (ex. if someone clicks 'play song' it will trigger a click event for all the other users to play the song).

我正在前端使用react和后端使用node / express。我正在嘗試集成套接字,以便在所有其他客戶端上發出在一個客戶端上完成的任何單擊事件。 (例如,如果有人點擊“播放歌曲”,它將觸發所有其他用戶播放歌曲的點擊事件)。

When I click on something, it doest reach the server's socket listener and displays Maximum call stack size exceeded in the browser's console.

當我點擊某些內容時,它會到達服務器的套接字偵聽器並在瀏覽器的控制台中顯示超出最大調用堆棧大小。

PS: it's my first time importing code and it wont let me indent it!

PS:這是我第一次導入代碼,它不會讓我縮進它!

Server Side code:

服務器端代碼:

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');
    });
});

Client Side Code:

客戶端代碼:

$(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');
    });
});

1 个解决方案

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

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