Javascript 使用SocketIO动态更新表行

我的意图是：构建由socketIO支持的临时排队系统。我正在动态填充我的表。每行都有一个唯一的标识符。我认为这很简单，只要用户单击给定行上的按钮，就可以将套接字发出事件发送到服务器，然后让服务器将发出事件发送回客户端，无论是谁在侦听该特定事件，都会为他们删除该行

实际发生的情况：套接字工作流可以工作，但是它只会删除选择它的用户浏览器上的按钮。它不会将“发射”事件发送给房间中的每个人。我设计它的方式是，任何访问该页面的人都会加入一个名为“队列室”的房间。我的想法是让这个房间里的任何人都能实时收到相同的更新。您还将看到，我正在尝试删除表示特定行的行0，但它仍然无法按预期工作

我的首要目标是建立一个实时排队系统，但这对我来说不是很好

我的问题是：有人能帮我解决这个问题吗？或者你们有没有其他的建议方向？此外，我正在使用MONGODB作为我的后端数据库，如果这有帮助的话。谢谢

客户端表（JADE）：

div(class= "the_results", style = "text-align: center;")
            table.table.table-striped.table-dark
                thead
                    tr
                        th(scope='col')
                        th(scope='col') Name
                        th(scope='col') Email
                tbody
                    - var n = 0
                    - var x = 0
                    for item in json
                            tr(id = 'row_#{x++}')
                                td
                                    button.btn.btn-primary.request_button_attributes(class = 'sendRequest', id='#{n++}' type = 'submit', value = '#{item.room}') Send Request
                                td #{item.name}
                                td #{item.email}


script(src="/socket.io/socket.io.js")
script.
    function removeRow() {
        $('#row_0').hide()
    }
    var socket = io.connect('http://localhost:6969');
    socket.emit('subscribe', {
        room: "queue_room",
        name: '#{user.name}'
    })
    $(document).ready(function() {
        $('.sendRequest').each(function() {
            $(this).click(function() {
                //$(".the_results").hide();
                var roomNumber = $(this).attr('value');
                var val = $(this).attr('id').toString();
                var URL = 'http://localhost:6969/results/';
                var obj = {
                    room: roomNumber
                };
                socket.emit('dequeue', {
                    room: "queue_room",
                    id: val
                })
                socket.on('dequeue', function(data) {
                    removeRow()
                })
                $.ajax({
                    url: URL,
                    type: "POST",
                    data: JSON.stringify(obj),
                    contentType: "application/json",
                    success: function() {
                        console.log('The AJAX is working as intended')
                    },
                    error: function() {
                        console.log("CMON! nabbit, ya gotta issue with ur ajax request")
                    }
                });
            });
        });
    });

socket.on('dequeue', function(data) {
  console.log("broadcast to " + data.room)
  io.sockets.in("queue_room").emit('dequeue', {
    room: data.room,
    id: data.id
  })

服务器端套接字功能：

div(class= "the_results", style = "text-align: center;")
            table.table.table-striped.table-dark
                thead
                    tr
                        th(scope='col')
                        th(scope='col') Name
                        th(scope='col') Email
                tbody
                    - var n = 0
                    - var x = 0
                    for item in json
                            tr(id = 'row_#{x++}')
                                td
                                    button.btn.btn-primary.request_button_attributes(class = 'sendRequest', id='#{n++}' type = 'submit', value = '#{item.room}') Send Request
                                td #{item.name}
                                td #{item.email}


script(src="/socket.io/socket.io.js")
script.
    function removeRow() {
        $('#row_0').hide()
    }
    var socket = io.connect('http://localhost:6969');
    socket.emit('subscribe', {
        room: "queue_room",
        name: '#{user.name}'
    })
    $(document).ready(function() {
        $('.sendRequest').each(function() {
            $(this).click(function() {
                //$(".the_results").hide();
                var roomNumber = $(this).attr('value');
                var val = $(this).attr('id').toString();
                var URL = 'http://localhost:6969/results/';
                var obj = {
                    room: roomNumber
                };
                socket.emit('dequeue', {
                    room: "queue_room",
                    id: val
                })
                socket.on('dequeue', function(data) {
                    removeRow()
                })
                $.ajax({
                    url: URL,
                    type: "POST",
                    data: JSON.stringify(obj),
                    contentType: "application/json",
                    success: function() {
                        console.log('The AJAX is working as intended')
                    },
                    error: function() {
                        console.log("CMON! nabbit, ya gotta issue with ur ajax request")
                    }
                });
            });
        });
    });

socket.on('dequeue', function(data) {
  console.log("broadcast to " + data.room)
  io.sockets.in("queue_room").emit('dequeue', {
    room: data.room,
    id: data.id
  })

---

我只在单击按钮时侦听套接字事件。Inatead将侦听事件放置在按钮单击之外，以便访问该页面的任何人都可以看到页面上的更新

我只在单击按钮时侦听套接字事件。Inatead将侦听事件放置在按钮单击之外，以便访问该页面的任何人都可以看到页面上的更新

如果不必将jade翻译成HTML页面，您会发现更多的人愿意帮助您解决socket.io问题。我建议你发布“查看源代码”的结果并删除jade代码。如果不需要将jade翻译成HTML页面，你会发现更多的人愿意帮助你解决socket.io问题。我建议您发布“查看源代码”的结果并删除jade代码。