Динамически обновлять строки таблицы с помощью SocketIO - PullRequest
Новая
       8

Динамически обновлять строки таблицы с помощью SocketIO

0 голосов
/ 06 октября 2019

Мое намерение: создать временную систему очередей с поддержкой socketIO. Я динамически заполняю свой стол. Каждая строка имеет уникальный идентификатор. Я подумал, что это так же просто, как когда пользователь нажимает кнопку в заданной строке, чтобы отправить событие emit сокета на сервер, а затем сервер отправляет событие emit обратно на сторону клиента, и тот, кто слушает это конкретное событие,это уберет этот ряд для них.

Что на самом деле происходит: рабочий процесс сокета работает, однако он удалит ТОЛЬКО кнопку в браузере человека, который его выбрал. Он не отправляет событие emit КАЖДОМУ в комнате. Я спроектировал это так, что любой, кто посещает эту страницу, присоединяется к комнате с именем "queue_room". Моя идея заключалась в том, чтобы все, кто находится в этой комнате, получали одинаковые обновления в режиме реального времени. Вы также увидите, что я пытаюсь удалить row_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
  })

1 Ответ

0 голосов
/ 11 октября 2019

Я слушал событие сокета только при нажатии кнопки. Поместите событие прослушивания за пределы нажатия кнопки, чтобы каждый, кто посещает страницу, мог видеть обновления на странице.

...