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

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

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});

如果未设置cookie，请检查数组中是否有重复值，不要检查是否设置了cookie

2 个答案: