javascript - 如何仅为某些用户添加按钮 - socket.io

Question

我制作了一个基本的聊天程序，用户可以在其中创建聊天室。创建房间时，两个按钮会附加到房间列表中:一个加入按钮和一个删除按钮。但是，对于未创建房间的用户，不应显示“删除按钮”，因为他们无法删除房间。只有所有者(创建房间的用户)才能删除房间。

反之亦然，对于房间的所有者，不应显示“加入按钮”，因为他们不必加入。

下面您可以看到聊天程序的图像。我指的按钮位于左侧。

---更新并添加代码:正如您所看到的，当客户端连接(服务器端)时，客户端自己的 id 通过函数“sendingOwnName”发出。

在客户端(在代码的开头)，id 被推送到名为“currentUser”的数组中。再往下，在“update-people”中，我将 currentUser 与新登录用户的 ID 进行比较。

这个想法是，如果这两个 id 匹配，则对象的名称(新用户登录)不会添加到列表中。然而它不起作用。

客户端:

$(document).ready(function(){  
        var socket = io.connect("localhost:3000");
        var $msg = $("#msg");
        var $NamingRoom = $("#NamingRoom");
        var $rooms = $("#rooms");
        var $chat = $('#chat');
        var $people = $('#people');
        var typing = false;  
        var timeout = undefined;
        var currentUser = [];
        $("#NewRoomWindow").hide();
        $("#main-chat-screen").hide();
        //Mere der skal gemmes
        $("#UsersOnlineAndRooms").hide();
        $("#msg").hide();
        $("#name").focus();
        $(".chatToInfo").hide();
        socket.on("sendingOwnName", function(id){
          currentUser.push(id);
        })


        $("form").submit(function(event){
            event.preventDefault();
        });  
        
        $("#join").mousedown(function(){
            var name = $("#name").val();
            if (name.trim() != "") {
                socket.emit("join", name);
                $("#login").detach();
                $("#main-chat-screen").show();
                $("#UsersOnlineAndRooms").show();
                $rooms.show();
                $("#msg").show();
                $("#msg").focus();
                $("#rooms").show();
                $(".chatToInfo").show();
                ready = true;
               $("#msg").prop("readonly", true);
               $("#msg").attr("placeholder", "Start conversation or create/join room to chat");
               $("#send").attr("disabled", true);
            }
        }); 

        $("#name").keypress(function(e){
            if(e.which == 13) {
                var name = $("#name").val();
                if (name.trim() != "") {
                    socket.emit("join", name);
                    $("#login").detach();
                    $("#main-chat-screen").show();
                    $("#UsersOnlineAndRooms").show();
                    $rooms.show();
                    $("#msg").show();
                    $("#msg").focus();
                    $("#rooms").show();
                    $(".chatToInfo").show();
                    ready = true;
                   $("#msg").prop("readonly", true);
                   $("#msg").attr("placeholder", "Start conversation or create/join room to chat");
                   $("#send").attr("disabled", true);
                }
            }
        });  


        socket.on("update", function(newmsg) {
            if(ready)
                $chat.append("<div class='well well-sm'>" + msg + "</div>");
        }) 

        socket.on("updateToSelf", function(msg) {
                $("#chat").append('<div class="infoMessage">' + msg + "</div>");
              $('#chat').scrollTop($('#chat')[0].scrollHeight);
        }); 

        socket.on("updateToOthers", function(msg) {
                $("#chat").append('<div class="infoMessage">' + msg + "</div>");
              $('#chat').scrollTop($('#chat')[0].scrollHeight);
        }); 

        socket.on("update-peopleCount", function(data){
          $("#peopleCount").empty();
          $('#peopleCount').append("<li class=\"list-group-item active\">People online <span class=\"badge\">"+data.count+"</span></li>");
        });

        socket.on("update-people", function(data, id){
          $("#people").empty();
          $.each(data.people, function(a, obj, id) {
            //if (currentUser[0] === obj.id) {
            if (currentUser[0] == obj.id) {
              return;
            } else {
              $('#people').append("<li class=\"people-item\"><a href=\"#\" class=\"list-group-item\"><span class="+obj.id+">" + obj.name + "</span></a></li>");
            }
          });
        });


//Updating room list
        socket.on("roomList", function(data) {
          $("#rooms").text("");
          $("#rooms").append("<li class=\"list-group-item active\">List of rooms <span class=\"badge\">"+data.count+"</span></li>");

          if (!jQuery.isEmptyObject(data.rooms)) { 
            $.each(data.rooms, function(id, room) {

            var html = "<button id="+id+" class='joinRoomBtn btn btn-default btn-xs' >Join</button>" + " " + "<button id="+id+" class='removeRoomBtn btn btn-default btn-xs'>Remove</button>" + " " + "<button id="+id+" class='leaveRoomBtn btn btn-default btn-xs'>Leave</button>";
            
            //var userButtons = "<button id="+id+" class='joinRoomBtn btn btn-default btn-xs' >Join</button>" + "" + "<button id="+id+" class='leaveRoomBtn btn btn-default btn-xs' >Leave</button>";
            //var ownerButton = "<button id="+id+" class='removeRoomBtn btn btn-default btn-xs'>Remove</button>";
            //var html = (room.owner === room.people? userButtons : ownerButton);
            $('#rooms').append("<li id="+id+" class=\"list-group-item\"><span>" + room.name + "</span> " + html + "</li>");
          });
          } else {
            $("#rooms").append("<li class=\"list-group-item\">There are no rooms available.</li>");
            $("#msg").prop("readonly", true);
            $("#msg").attr("placeholder", "Start conversation or create/join room to chat");
            $("#send").attr("disabled", true);
            }
        });

//Updating list of conversations
        socket.on("update-conversations", function(data) {
          $("#conversations").empty();
          $("#conversations").append("<li class=\"list-group-item active\">Conversations <span class=\"badge\">"+data.count+"</span></li>");

          if (!jQuery.isEmptyObject(data.conversations)) {
            $.each(data.conversations, function(id, conversation) {
              var html = "<button id="+id+" class='glyphicon glyphicon-remove'</button>";
              $('#conversations').append("<li id="+id+"><a href=\"#\" class=\"list-group-item\">" + conversation.name + "</a> " + html + "</li>");
            });
          } else {
              $("#conversations").append("<li class=\"list-group-item\">There are no conversations.</li>");
          }
        });



      
        socket.on("newMessageToOthers", function(people, msg){
            if(ready) {
                $("#chat").append('<div class="grey">'+ people + " says: " + msg + '</div>');
                $('#chat').scrollTop($('#chat')[0].scrollHeight);
            }
        });

     
       
        socket.on("ownMessage", function(msg){
            if(ready) {
                $("#chat").append('<div class="blue">' + msg + '</div>');
                $('#chat').scrollTop($('#chat')[0].scrollHeight);
            }
        });
    



        socket.on("disconnect", function(){
            $chat.append("The server is not available");
            $("#msg").attr("disabled", "disabled");
            $("#send").attr("disabled", "disabled");
        });

// Sending the message (either by button click or enter) 
        $("#send").click(function(){
          var msg = $("#msg").val();
            if (msg.trim() == "") {
              return;
            } else {
                socket.emit("send message", msg);
                $("#msg").val("");
                $("#msg").focus();
                clearTimeout(timeout);
                  timeoutFunction();
            }
        });

        $("#msg").keypress(function(e){
          var msg = $("#msg").val();
          if (msg.trim() == "") {
              return;
            } else {
                if (e.which == 13) {
                  socket.emit("send message", msg);
                  $("#msg").val("");
                  $("#msg").focus();
                }
              }
          });



// Initiate new room window
        $("#roomModal").on('shown.bs.modal', function(){
          $("#createRoomName").val("");
          $("#createRoomName").focus();
          $("#createRoomBtn").attr("disabled", true);
        })




// Creating new room
        $("#createRoomBtn").click(function(){
          var roomName = $("#createRoomName").val();
          if (roomName.trim() == "") {
            return;
          } else {
                $("#createRoomName").val("");
                socket.emit("serverCreateNewRoom", roomName);
                $("#msg").prop("readonly", false);
                $("#msg").attr("placeholder", "Your message");
                $("#send").attr("disabled", false);  
                $("#msg").focus();
                $("#roomModal").modal('hide');     
          }
        });

        $(".modal-content").keyup(function(e){
          var roomName = $("#createRoomName").val().trim();
          if (roomName!="") {
            $("#createRoomBtn").removeAttr("disabled");
            if (e.which == 13) {
                $("#createRoomName").val("");
                socket.emit("serverCreateNewRoom", roomName);
                $("#msg").prop("readonly", false);
                $("#msg").attr("placeholder", "Your message");
                $("#send").attr("disabled", false); 
                $("#msg").focus();
                $("#roomModal").modal('hide');
              }
          } else {
            $("#createRoomBtn").attr("disabled", "true");
          }
        });

// Joining room
        $("#rooms").on('click', '.joinRoomBtn', function(){
          var roomName = $(this).siblings("span").text();
          var roomID = $(this).attr("id");
          socket.emit("joinRoom", roomID);
          $("#msg").prop("readonly", false);
          $("#msg").attr("placeholder", "Your message");
          $("#send").attr("disabled", false); 
        });


//Starting conversation
        $("#people").on('click', '.list-group-item', function(){
          var peopleName = $(this).children("span").text();
          var peopleID = $(this).attr("id");
          //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();    
        });

        socket.on("addConversation", function(peopleName) {
          $(".chatToInfo").empty();
          $(".chatToInfo").append('<div class="green">Message to ' + peopleName + '</div>');
        });  

        //Removing conversation
        $("#conversations").on('click', '.glyphicon', function(){
          var conversationName = $(this).siblings("a").text();
          var conversationID = $(this).attr("id");
          socket.emit("removeConversation", conversationID);
          $(".chatToInfo").empty();
          $("#chat").empty();  
          $("#msg").prop("readonly", true);
          $("#msg").attr("placeholder", "Start conversation or create/join room to chat");
          $("#send").attr("disabled", true);
        });

        //Navigating conversations
        $("#conversations").on('click', '.list-group-item', function(){
          console.log("clicking on conversation works!");
          var conversationName = $(this).text();
          var conversationID = $(this).attr("id");
          socket.emit("navigateToConversation", conversationName, conversationID);
          $("#msg").prop("readonly", false);
          $("#msg").attr("placeholder", "Your message");
          $("#send").attr("disabled", false); 
        });


// Removing room
        $("#rooms").on('click', '.removeRoomBtn', function(){
          var roomName = $(this).siblings("span").text();
          var roomID = $(this).attr("id");
          socket.emit("removeRoom", roomID);
        });

// Leaving room
        $("#rooms").on('click', '.leaveRoomBtn', function(){
          var roomName = $(this).siblings("span").text();
          var roomID = $(this).attr("id");
          socket.emit("leaveRoom", roomID);
          $("#msg").prop("readonly", true);
          $("#msg").attr("placeholder", "Start conversation or create/join room to chat");
          $("#send").attr("disabled", true);
        });




// Detect typing

          function timeoutFunction() {  
            typing = false;
            socket.emit("typing", false);
            socket.emit("notTyping", true)
          }

          $("#msg").keypress(function(e){
            if (e.which !== 13) {
              if (typing === false && $("#msg").is(":focus")) {
              typing = true;
              socket.emit("typing", true);
              clearTimeout(timeout);
              timeout = setTimeout(timeoutFunction, 3000);
              } 
            } else {
                  clearTimeout(timeout);
                  timeoutFunction();
                }
          });

          socket.on("isTyping", function(data) {  
            if (data.isTyping) {
              if ($("#"+data.person+"").length === 0) {
                $("#chat").append("<div id='"+ data.person +"'><span class='grey'>" + data.person + " is typing...</div>");
                timeout = setTimeout(timeoutFunction, 3000);
              }
            } else {
                //$("#chat").remove("<div id='"+ data.person +"'><span class='grey'>" + data.person + " is typing...</div>");
               $("#"+data.person+"").remove();
              }
          });


// Disconnect

          socket.on("disconnect", function(){
          $("#chat").append("<li class='well'><span class='text-warning'>The server is not available</span></li>"); 
          $("#msg").prop("readonly", true);
          $("#send").attr("disabled", true); 
          });

          socket.on("reconnect", function(){
            $("#chat").remove('.well'); 
            $("#msg").prop("readonly", false);
            $("#send").attr("disabled", false); 
          });


// End of script
      });

服务器端:

// Setting up the server
var express = require('express');
var app = express();
var path = require('path');
var server = require('http').createServer(app);
var socket = require("socket.io").listen(server);
var Room = require('./room.js');
var Conversation = require('./conversation.js');
var _ = require('underscore')._;
var uuid = require ('uuid');
server.listen(process.env.PORT || 3000);
console.log('Server is running...');

socket.set("log level", 1);
var people = {};  
var rooms = {};
var conversations = {};
var clients = [];
var chatHistory = {};

Array.prototype.contains = function(k, callback) {  
    var self = this;
    return (function check(i) {
        if (i >= self.length) {
            return callback(false);
        }
        if (self[i] === k) {
            return callback(true);
        }
        return process.nextTick(check.bind(null, i+1));
    }(0));
};



// Gets the html file
app.get('/', function(req, res){
	res.sendFile(__dirname + '/index.html');
})

// Gets the css file
app.use(express.static(path.join(__dirname, 'public')));

// When connecting
socket.on("connection", function(client) {
	client.on("join", function(name){
		var ownerRoomID = inRoomID = null;
		roomID = null;
		conversationID = null; // This line probably has to go, since users should be able to create several conversations.
		people[client.id] = {"name" : name, "owns" : ownerRoomID, "inroom" : inRoomID, "id" : client.id, "room" : roomID, "conversation" : conversationID};
		var id = uuid.v4();
		sizePeople = _.size(people);
		sizeRooms = _.size(rooms);
		sizeConversations = _.size(conversations);
		socket.sockets.emit("update-peopleCount", {people: people, count: sizePeople});
		socket.sockets.emit("update-people", {people: people});
		socket.sockets.emit("roomList", {rooms: rooms, count: sizeRooms});
		socket.sockets.emit("update-conversations", {conversations: conversations, count: sizeConversations});
		client.emit("updateToSelf", "You have connected to the server. Start conversation or create/join room to chat");
		client.broadcast.emit('updateToOthers', name + " is online.");
		clients.push(client); //populates the clients array with the client object
		console.log("Someone joined the chat", people[client.id].id);
		client.emit("sendingOwnName", people[client.id].id);
	});




//Creating room
	client.on("serverCreateNewRoom", function(name){
		console.log("About to create a room", name)
		if (people[client.id].inroom != null) {
			var id = uuid.v4();
			var room = new Room(name, id, client.id);
			rooms[id] = room;
			sizeRooms = _.size(rooms);
			socket.sockets.emit("roomList", {rooms: rooms, count: sizeRooms}); //update the list of rooms on the frontend
			client.room = name; //name the room
			client.join(client.room); //auto-join the creator to the room
			room.addPerson(client.id); //also add the person to the room object
			people[client.id].room = id; //Update the room key with the ID of the created room
			chatHistory[client.room] = [];  
			client.emit("updateToSelf", "You have left a room and created your own");
		}
		else if (people[client.id].room === null) {
			var id = uuid.v4();
			var room = new Room(name, id, client.id);
			rooms[id] = room;
			sizeRooms = _.size(rooms);
			socket.sockets.emit("roomList", {rooms: rooms, count: sizeRooms}); //update the list of rooms on the frontend
			client.room = name; //name the room
			client.join(client.room); //auto-join the creator to the room
			room.addPerson(client.id); //also add the person to the room object
			people[client.id].room = id; //Update the room key with the ID of the created room
			chatHistory[client.room] = [];  
			client.emit("updateToSelf", "You have created a room");
			console.log("First time creating a room", name);
			people[client.id].owns = id;
		} else {
			client.emit("updateToSelf", "You are already in a room, that you have created. Remove it to join a room");
		}
	});



//joining room
	client.on("joinRoom", function(id) {  
    var room = rooms[id];
    if (client.id === room.owner) {
      client.emit("updateToSelf", "You are the owner of this room and you have already been joined.");
    } else {
      room.people.contains(client.id, function(found) {
          if (found) {
              client.emit("updateToSelf", "You have already joined this room.");
          } else {
            if (people[client.id].inroom != null) { //make sure that one person joins one room at a time
            	client.emit("updateToSelf", "You have to leave this room before you can join another");
            	console.log("User is already in a room");
            } else {
          var id = uuid.v4();
          room.addPerson(client.id);
          people[client.id].inroom = id;
          client.room = room.name;
          client.join(client.room); //add person to the room
          user = people[client.id];
          client.broadcast.to(client.room).emit("updateToOthers", user.name + " has connected to " + room.name);
          client.emit("updateToSelf", "Welcome to " + room.name + ".");
          client.emit("sendRoomID", {id: id});
          console.log("User joined a room" + room.name);
        }
          }
      });
    }
  });




// When sending
	client.on("send message", function(msg){	
		if (_.size(chatHistory[client.room]) > 10) {
			chatHistory[client.room].splice(0,1);
		} else {
			chatHistory[client.room].push(people[client.id].name + ": " + msg)
		}
			client.broadcast.to(client.room).emit("newMessageToOthers", people[client.id].name, msg);
			client.emit("ownMessage", msg);
			console.log(chatHistory);
		console.log("Message send");
	});


//When leaving room
	client.on("leaveRoom", function(id){
		console.log("Someone is trying to leave room");
		var room = rooms[id];
		if (client.id === room.owner) {
			console.log("Owner is leaving the room");
			var i = 0;
			while(i < client.length) {
				if (client[i].id == room.people[i]) {
					people[clients[i].id].inroom = null;
					clients[i].leave(room.name);
				}
				++i;
			}
			delete rooms[id];
			people[room.owner].owns = null; //reset the owns object to null so new room can be added
			socket.sockets.emit("roomList", {rooms: rooms});
			delete chatHistory[room.name];
			client.broadcast.in(client.room).emit("updateToOthers", "The owner (" + people[client.id].name + ") is leaving the room. The room is removed.");
			client.emit("updateToSelf", "You left your room");
			people[client.id].room = null;
			sizeRooms = _.size(rooms);
							socket.sockets.emit("roomList", {rooms: rooms, count: sizeRooms});
		} else {
			room.people.contains(client.id, function(found){ 
				if (found) { //make sure that the client is in fact part of this room
					var personIndex = room.people.indexOf(client.id);
					room.people.splice(personIndex, 1);
					client.leave(client.room);
					people[client.id].inroom = null
					client.emit("updateToSelf", "You left the room");
					console.log("Left the room");
				}
			});
		}
	});

//when removing a room (only the owner of the room can remove it)
	client.on("removeRoom", function(id){
		var room = rooms[id];
		if (room) {
			if (client.id === room.owner) { //only the owner can remove the room
				var personCount = room.people.length;
				if (personCount > 2) {
					console.log('there are still people in the room warning'); //This will be handled later
				} else {
					if (client.id === room.owner) {
						delete chatHistory[room.name];
						client.emit("updateToSelf", "You removed the room.");
						client.broadcast.to(client.room).emit("updateToOthers", "The owner (" +people[client.id].name + ") removed the room.");
						var i = 0;
						while(i < clients.length) {
							if (clients[i].id === room.people[i]) {
								people[clients[i].id].inroom = null;
								clients[i].leave(room.name);
							}
							++i;
						}
							delete rooms[id];
							people[client.id].room = null;
							sizeRooms = _.size(rooms);
							socket.sockets.emit("roomList", {rooms: rooms, count: sizeRooms});
					}
				}
			} else {
				console.log("Someone who is NOT the owner is trying to remove a room");
				client.emit("updateToSelf", "Only the owner can remove a room.");
			}
		}
	});




// Creating conversation
	client.on("serverCreateConversation", function(name) {
		// Missing a if-statement that makes sure a conversation with the same person isn't already open
		console.log("About to create conversation");
		var id = uuid.v4();
		var conversation = new Conversation(name, id, client.id);
		conversations[id] = conversation;
		sizeConversations = _.size(conversations);
		socket.sockets.emit("update-conversations", {conversations: conversations, count: sizeConversations});
		client.conversation = name;
		client.join(client.conversation);
		conversation.addPerson(client.id);
		people[client.id].conversation = id;
		console.log("Created conversation");
		client.emit("addConversation", name);
	});

	client.on("removeConversation", function(id){
		console.log("About to remove conversation");
		var conversation = conversations[id];
		//if (conversation) {
			console.log("Removing conversation function");
			delete conversations[id];
			people[client.id].conversation = null;
			sizeConversations = _.size(conversations);
			socket.sockets.emit("update-conversations", {conversations: conversations, count: sizeConversations});
		//}
	});
	
	//Navigating conversations
	client.on("navigateToConversation", function(name){
		console.log("caught navigation");
		client.emit("addConversation", name);
	});



// Detect typing

	client.on("typing", function(data) {  
  		if (typeof people[client.id] !== "undefined")
    	//socket.sockets.in(client.room).emit("isTyping", {isTyping: data, person: people[client.id].name});
    	client.to(client.room).emit("isTyping", {isTyping: data, person: people[client.id].name});
    	console.log("Someone is typing");
	});


// When disconnecting
	client.on("disconnect", function(id) { 
		console.log("someone disconnected");
		var room = rooms[id];
		if (people[client.id]) {
			if (people[client.id].owns != null) { //Check if user is an owner of a room
				var room = rooms[people[client.id].owns];
				var i = 0;
				while(i < clients.length) {
					if (clients[i].id === room.people[i]) {
						people[clients[i].id].inroom = null;
						clients[i].leave(room.name);
					}
							i++;
				}
				delete rooms[people[client.id].owns];
				socket.sockets.emit("updateToOthers", "The owner (" + people[client.id].name + ") is leaving the room. The room is removed.");
				delete rooms[id];
				delete people[client.id];
				sizePeople = _.size(people);
				socket.sockets.emit("update-peopleCount", {people: people, count: sizePeople});
				socket.sockets.emit("update-people", {people: people});
				sizeRooms = _.size(rooms);
				socket.sockets.emit("roomList", {rooms: rooms, count: sizeRooms});
			}
			else if (people[client.id].inroom != null ) { //Check if user who is not owner is in room 
				console.log(people[client.id].name);
				socket.sockets.emit("updateToOthers", people[client.id].name + " has left the room.");
				delete people[client.id];
				sizePeople = _.size(people);
				socket.sockets.emit("update-peopleCount", {people: people, count: sizePeople});
				socket.sockets.emit("update-people", {people: people});
			}
			else { //A user who is not in a room
				console.log(people[client.id].name);
				socket.sockets.emit("updateToOthers", people[client.id].name + " has left the server.");
				delete people[client.id];
				sizePeople = _.size(people);
				socket.sockets.emit("update-peopleCount", {people: people, count: sizePeople});
				socket.sockets.emit("update-people", {people: people});
			}
		}
  });

	client.on("test", function(currentUser){
		console.log("testing", currentUser);
	});

	


// End of script
});

Answer 1

您的对象房间看起来像这样:

{
  "RoomId1": {
    "name": "A Room Name"
    },
  "RoomId2": {
    "name": "An Other Room"
    }
}

也许您可以在对象上添加所有者 ID 以获得如下内容:

{
  "RoomId1": {
    "name": "A Room Name",
    "ownerId": "user1"
    },
  "RoomId2": {
    "name": "An Other Room",
    "ownerId": "user2"
    }
}

然后将其与聊天的当前用户进行比较:

//replace this line:
var html = "<button id="+id+" class='joinRoomBtn btn btn-default btn-xs' >Join</button>" + " " + "<button id="+id+" class='removeRoomBtn btn btn-default btn-xs'>Remove</button>";
//with those:
var joinButton = "<button id="+id+" class='joinRoomBtn btn btn-default btn-xs' >Join</button>";
var removeButton = "<button id="+id+" class='removeRoomBtn btn btn-default btn-xs'>Remove</button>"
//Here the userId must be define before, i don't know how you can get it.
var html = (room.ownerId === userId?" removeButton : joinButton);

我使用ternary operator将所有内容放在一行中，但您可以使用 if 语句。如果您不想显示运算符的最后一部分，可以将其替换为 ""。

更新:

最后你的代码应该如下所示:

//Updating room list
socket.on("roomList", function(data) {
  $("#rooms").text("");
  $("#rooms").append("<li class=\"list-group-item active\">List of rooms <span class=\"badge\">"+data.count+"</span></li>");

  if (!jQuery.isEmptyObject(data.rooms)) { 
    $.each(data.rooms, function(id, room) {
      var joinButton = "<button id="+id+" class='joinRoomBtn btn btn-default btn-xs' >Join</button>";
      var removeButton = "<button id="+id+" class='removeRoomBtn btn btn-default btn-xs'>Remove</button>";
      var html = (room.ownerId === userId?" removeButton : joinButton);
      $('#rooms').append("<li id="+id+" class=\"list-group-item\"><span>" + room.name + "</span> " + html + "</li>");
    });
  } else {
    $("#rooms").append("<li class=\"list-group-item\">There are no rooms.</li>");
    $("#msg").prop("readonly", true);
    $("#msg").attr("placeholder", "Join or create room to chat");
    $("#send").attr("disabled", true);
  }
});