如何仅为某些用户附加按钮 - socket.io
我已经制作了一个基本的聊天程序，用户可以在其中创建聊天室。创建房间时，会在房间列表中附加两个按钮：一个连接按钮和一个删除按钮。 但是，对于没有创建房间的用户，请按“删除”按钮。不应该显示，因为他们无法删除房间。只有所有者（创建房间的用户）才能移除房间。
反之亦然，对于房间的所有者来说，“加入”按钮＆＃39;不应该显示，因为他们不必加入它。
您可以在下面看到聊天程序的图像。我所指的按钮位于左侧。
---更新代码： 如您所见，当客户端连接（服务器端）时，客户端自己的id通过函数＆＃34; sendingOwnName＆＃34;发出。
在客户端（代码的开头），然后将id推入名为＆＃34; currentUser＆＃34;的数组中。再往下，在＆＃34; update-people＆＃34;我将currentUser与登录的新用户的id进行比较。
这个想法是，如果这两个id匹配，那么对象的名称（登录的新用户）不会添加到列表中。然而，它不起作用。
客户端：
＆＃13;
＆＃13;
＆＃13;
＆＃13;
$(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
});
服务器端：
＆＃13;
＆＃13;
＆＃13;
＆＃13;
// 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
});
1 个答案:
答案 0 :(得分：2)
您的对象rooms看起来像这样：
{
"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);
我使用source code来获取一行中的所有内容，但您可以使用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);
}
});
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？