socket io doesn't work both way?

Question

My current problem is that there are two browsers (two users). Once both of them are connected, they could do a certain socket event which is a friends Request but not both at the same time. Always need to refresh one of the user's page.

Illustratively

When a user click this button

the navbar glyphicon will be incremented by 1

Serverside event

  io.on('connection', function(socket){
     // Everytime user is connected, I will do some Database operation to store the socketId, it will look something like this
     user.socketId = socket.id; // For simplicity.

     console.log(socket.request.user.username); // is using passport-socket.io library
     socket.on('friendsRequest', function(data) {
     // Got these two datas from input hidden on html by using Jquery
     var socketId = data.socketId;
     var userId = data.userId; 
     socket.to(socketId).emit('friendsRequest', socket.request.user);
     console.log("Successful" + " from " + socket.request.user.username);
});

The weird thing is , on the serverside it is always showing console.log("Successful" + " from " + socket.request.user.username); meaning if click the button on both User's browser it will show correctly

"Successful from UserA" 

"Successful from UserB"

But the problem is on the clientside, the targeted html never changed, it always one of the browser navbar's glyphicon will be incremented

Here's the code on the client side

  // This event will send the targeted data like socketId and userId back to the server
    $(document).on('click', "#addFriend", function(e){
      e.preventDefault();
      var userId = $('#userId').val();
      var socketId = $('#socketId').val();
      socket.emit('friendsRequest', {
        userId: userId,
        socketId: socketId
      });
    });

    // Once the server has done doing his job, this event will listen.
    socket.on('friendsRequest', function(data) {
      var totalRequests = parseInt($('#totalRequests').html());
      console.log(totalRequests);
      totalRequests += 1;
      $('#totalRequests').html(totalRequests);
      $('#friendsRequested').append('<li>' + data + '</li>');
    });

The main problem is on the clientside socket.on('friendsRequest');

It only works of one of the browsers but not both at the same time when I fired the friendsRequest event

Need someone with socket.io expertise to explain to me why it doesn't work both ways. As to my logic it is supposed to work.

html

 <input type="hidden" name="socketId" id="socketId" value="ValueOftheSocketId" />
 <button type="submit" id="addFriend" class="btn btn-default">Add Friend</button>

score 0 · Answer 1 · answered Jan 27 '16 at 13:44

0

If the event 'friendsRequest' is not fired the error always will be when you emit it on server:

socket.to(socketId).emit('friendsRequest', socket.request.user);

It is probably that the socketId is not the correct, why? :

The socket.id is reset when a reconnection occurs. So that probably would cause that when you do: socket.to(socketId).emit('friendsRequest', socket.request.user); it is sent anyone.

A reconnection can happen when a error occurs inside a event listener on client (it will not appear on console).

So for watch if that happens you can use the default event 'disconnect' on server:

 socket.on('disconnect', function () {
    console.log('user disconnected');

  });

answered Jan 27 '16 at 13:44

David Perez

316
1
4

I already implemented socket.on('disconnect') and I did save the socket.id in the User's database for later use. But when I refresh it's just won't work both way. – Jack Moscovi Jan 27 '16 at 14:19
I believe this is a problem with reconnection? – Jack Moscovi Jan 27 '16 at 14:41
I think is not good idea save the socket.id in db, when you refresh the socket will get a new id – David Perez Jan 27 '16 at 15:33
I believe we need to chat. – Jack Moscovi Jan 27 '16 at 15:57
So how do i retrieve the other User's socket.id if saving in the database is not a good idea? – Jack Moscovi Jan 27 '16 at 15:59
i would need the full code to give you an exact answer – David Perez Jan 27 '16 at 16:19
Gimme me one sec, I create a gist for this – Jack Moscovi Jan 27 '16 at 16:19
Full code for , serverside https://gist.github.com/anonymous/faca6ad51263846bb613 – Jack Moscovi Jan 27 '16 at 16:21
Whats the news David? – Jack Moscovi Jan 27 '16 at 17:18
What if I have thousands of users, don't you think for loop operation would be expensive run? – Jack Moscovi Jan 27 '16 at 18:01
that must not be a problem – David Perez Jan 27 '16 at 18:31
if you are worry about performance you could push the sockets.id in a array and use a normal "for loop" which is much faster than a "for in" – David Perez Jan 27 '16 at 18:38
For avoid the loop maybe you can create a hash object where the key is the userId and the value is the socket.id, so you could get the socket id through userId, like: Hashobj[userId] – David Perez Jan 27 '16 at 18:49
But if I use for loop, how exactly I am gonna get the other user's socket.id? – Jack Moscovi Jan 27 '16 at 18:51
I stumbled upon this SO answer, they suggest to use room, but again how do i get the id. http://stackoverflow.com/questions/17476294/how-to-send-a-message-to-a-particular-client-with-socket-io – Jack Moscovi Jan 27 '16 at 18:52
I have another SO question, http://stackoverflow.com/questions/35044295/how-do-i-get-other-users-socket-id – Jack Moscovi Jan 27 '16 at 18:52
Hope you could help me with this issue, Im feel like giving up already – Jack Moscovi Jan 27 '16 at 18:53
In the example I wrote in gist the "s" is the id – David Perez Jan 27 '16 at 18:59

socket io doesn't work both way?

1 Answers1