Dynamically update table rows with SocketIO

  • Thread starter William Sheppard
  • Start date
W

William Sheppard

Guest
My intent: Build makeshift queue-ing system backed by socketIO. I am dynamically populating my table. Each row has a unique identifier. I thought it was as simple as once a user clicks a button on a given row, to send a socket emit event to the server and then have the server send an emit event back to the client side and whosoever was listening for that particular event, it would remove that row for them.

What actually Occurs: The socket workflow works, however it will ONLY remove the button on the person's browser who selected it. It does not send the emit event to EVERYONE in the room. The way I have designed it, is that anyone who visits that page joins a room called, "queue_room". My idea behind this was so that anyone in this room, would all receive the same updates in realtime. You will also see that I am testing with trying to remove row_0, which represents a particular row, but still it does not work as intended..

My overarching goal is build out a realtime queue-ing system, but this is not working out well in my favor.

My ask: Can someone please help me resolve this issue and/or is there another suggested direction that you all recommend? Also, I am using MONGODB, as my backend database if that is at all helpful. Thanks!!

CLIENT SIDE TABLE(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")
}
});
});
});
});


SERVER SIDE SOCKET FUNCTIONALITY:

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

Continue reading...
 
Top