Tuesday, 2 May 2017

How to "pull" a user into a room when another user clicks their name?

I am building a socket chat and right now I'm trying to add a function that enables users to click on another online user from a list, and thereby start a conversation (room), which is private/unvisible for other users. It should essentially work the same way as Facebook's chat function, where you can click on a friend and start texting.

However, I'm having a hard time understanding how that would work, since the 'clicked on' user does not voluntary joins the conversation.

Below you can see my code. I hope someone can point out any errors I've made or something I am missing. Because right now, the messages are not being received.

Step 1, client-side: A user clicks on a name of an online user

//Starting conversation
        $("#people").on('click', '.list-group-item', function(){
          var peopleName = $(this).children("span").text();
          var peopleID = $(this).children("span").attr("class");
          //this har INTET id! Hvordan tilføjer jeg det til update-people, når user logger ind?
          socket.emit("serverCreateConversation", peopleName, peopleID); 
          $("#msg").prop("readonly", false);
          $("#msg").attr("placeholder", "Your message");
          $("#send").attr("disabled", false);  
          $("#chat").empty();    
        });

Step 2, server-side: The conversation gets created, and pulls the 'clicked on' user into the conversation.

// Creating conversation
        client.on("serverCreateConversation", function(conversationReceiver, id) {
                console.log("About to create conversation with:", conversationReceiver, id);
                var key = uuid.v4();
                conversationStarter = people[client.id].name;
                var conversation = new Conversation(conversationReceiver, key, conversationStarter);
                conversations[key] = conversation;
                sizeConversations = _.size(conversations);
                client.emit("update-conversations", {conversations: conversations, count: sizeConversations});
                client.to(id).emit("update-conversationsForReceiver", {conversations: conversations, count: sizeConversations});
                client.conversation = conversation.key;
                client.join(client.conversation);
                //conversation.addPerson(client.id);
                conversation.addPerson(id);
                people[client.id].conversation = key;
                //chatHistoryInConversation[client.conversation] = [];
                console.log("Created conversation", conversation.people);
                client.to(id).emit("pullReceiverIntoConversation", conversation); //Pull conversationReceiver into conversation
                client.emit("addConversationForSelf", conversationReceiver);
                client.to(id).emit("addConversationForOthers", conversationStarter);
        });

Step 3, client-side: The 'clicked on' user' receives the conversation from the server and contacts server again.

//Pulling conversationReceiver into conversation
        socket.on("pullReceiverIntoConversation", function(conversation){
          socket.emit("assigningConversationKeyToReceiver", conversation);
        });

Step 4, server-side: The conversation key gets assigned to the 'clicked on' user.

//Assigning conversation key to receiver
        client.on("assigningConversationKeyToReceiver", function(conversation){
                people[client.id].conversation = conversation.key;
                client.join(conversation);
                console.log("Pulled", people);
        });


via JonasSH

No comments:

Post a Comment