如果未设置 cookie，则检查数组是否存在重复值，不检查是否设置了 cookie

Question

我正在处理一个聊天室页面，您首先在其中设置用户名，然后在 cookie 中设置用户名值。在此之后，它会加载不同的输入框，您可以在其中实时发送消息。此时您可以重新加载页面，它会给您一个弹出窗口，其中将显示一条欢迎返回消息，其中包含保存在 cookie 中的名称值，这也将再次将其设置为用户名并加载聊天页面。

问题是我希望能够防止从用户名设置输入字段中设置名称的多个重复项，但允许通过 cookie 在数组内多次设置用户名。

这个函数设置原始用户名：

//index.html
function setUsername() {
    var textbox = document.getElementById("name");
    var txtboxval = textbox.value;
    if(textbox.value.length <= 20 && textbox.value.length >= 4){
      socket.emit('setUsername', document.getElementById('name').value);
      setCookie("username", txtboxval, 30);
      socket.on('userExists', function(data) {

      });
    }
    else{
        alert("The name has to be at least 4 characters long");
        return false;
      }
    };

这两个将其设置为 cookie 加载：

  //index.html
  function setUsername2() {
    var nimi = getCookie('username');
    socket.emit('setUsername', nimi);
  }

  function checkCookie() {
      var user = getCookie("username");
      if (user != "") {
          alert("Welcome again " + user);
          setUsername2();
          document.body.innerHTML = '<div class="wrapper"><div class="messagebox"><input type = "text" id = "message" placeholder = "Write your message here">\
          <button type = "button" id="sending" name = "button" onclick = "sendMessage()">Send</button></div>\
          <div id = "message-container"></div></div>';
      }
    }

现在这里实际上将用户名设置到从 index.html 页面上挖掘它的数组中：

  //app.js
  users = [];
  io.on('connection', function(socket){
    console.log('an user connected');
    console.log(users);
    socket.on('setUsername', function(data) {
      console.log(data);

        users.push(data);
        socket.emit('userSet', {username: data});
        console.log(users);
  });

我希望在第一次设置用户名时运行这段代码，而不是在从 cookie 加载时运行：

//app.js
if(users.indexOf(data) > -1) {
          socket.emit('userExists', data + ' Username is already taken.');
        } else {
          users.push(data);
          socket.emit('userSet', {username: data});
          console.log(users);
        }

为什么我不能让它像我希望的那样工作，有什么我遗漏的吗？如果有什么不清楚的地方请追问。

Answer 1

您可以使用对象{name: string, cookie: boolean} 而不是仅使用用户名来触发您的'setUsername'，就像我在这里所做的那样：

function setUsername() {
  var textbox = document.getElementById("name");
  var txtboxval = textbox.value;
  if(textbox.value.length <= 20 && textbox.value.length >= 4){
    socket.emit('setUsername', {name: document.getElementById('name').value, cookie: false});
    setCookie("username", txtboxval, 30);
    socket.on('userExists', function(data) {
      // ########## you could add your 'already taken'-message here. :) ##########
      console.log(data);
      document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; 
      // this 'deletes' the cookie.
    });
  } else {
    alert("The name has to be at least 4 characters long");
    return false;
  }
}

---

function setUsername2() {
  var nimi = getCookie('username');
  socket.emit('setUsername', {name: nimi, cookie: true});
}

function checkCookie() {
  var user = getCookie("username");
  if (user != "") {
    alert("Welcome again " + user);
    setUsername2();
    document.body.innerHTML = '<div class="wrapper"><div class="messagebox"><input type = "text" id = "message" placeholder = "Write your message here">\
    <button type = "button" id="sending" name = "button" onclick = "sendMessage()">Send</button></div>\
    <div id = "message-container"></div></div>';
  }
}

---

users = [];
io.on('connection', function(socket){
  console.log('an user connected');
  console.log(users);
  socket.on('setUsername', function(data) {
    console.log(data);

    if(!data.cookie && users.indexOf(data.name) > -1) {
      socket.emit('userExists', data.name + ' Username is already taken.');
    } else {
      users.push(data.name);
      socket.emit('userSet', {username: data.name});
      console.log(users);
    }
  });
});

Answer 2

如果我做对了，并且你想区分两个活动 - 从 cookie 设置用户名和从 input#name 设置用户名 - 所以你只需要发出带有一些额外数据的 userExists一些标志，例如 cookie （这意味着您正在设置来自 cookie 的值）或 user_input （这意味着您正在设置来自输入字段的值)，像这样：

socket.emit('userSet', {username: data.name, user_input: true});