javascript - 用户断开连接后如何重新连接到聊天应用程序（socket js）

Question

我正在创建一个带有套接字的聊天应用程序，您首先进入登录页面输入您的昵称，然后加入聊天。

在表单和消息区域之间的聊天页面中，我有一个断开连接按钮，可将您带回登录页面。这个想法是您应该能够输入一个昵称（相同或新的）并再次加入聊天（不查看以前的历史记录）。

我设法将它们发送到登录页面，但由于某种原因，它们无法再次重新连接。

有什么我缺少的东西来完成这项工作吗？

监听服务器文件的断开连接

socket.on('disconnect', () => {
    socket.broadcast.emit('user-disconnected', users[socket.id]);
    delete users[socket.id];
    console.log('bye bye');
  });

chat.js 发出断开连接并发送回登录页面

const feedbackBox = message => {
  showFeedback.innerText = message;
  showFeedback.classList.add('feedback-I-disconnect');
  showFeedback.classList.remove('hide');
  container.appendChild(showFeedback);
};

disconnectButton.addEventListener('click', event => {
  if (event.target.classList.contains('disconnect-button')) {
    socket.disconnect();
    messageContainer.classList.add('hide');
    messageForm.classList.add('hide');
    disconnectButton.classList.add('hide');
    appendForm();
    feedbackBox('You disconnected from the chat');
  }
});

name.js 是登陆页面

const getName = () => {
  form.addEventListener('submit', e => {
    e.preventDefault();
    const name = nameInput.value;
    socket.emit('new-user', name);
    nameInput.value = '';
    socket.off('name-taken');
    socket.on('name-taken', () => {
      feedbackBox('Nickname already taken');
    });
    socket.off('user-accepted');
    socket.on('user-accepted', () => {
      title.classList.add('hide');
      nameContainer.classList.add('hide');
      addMessageForm();
    });
  });
};

const appendForm = () => {
  nameInput.classList.add('name_input');
  form.appendChild(nameInput);
  submitName.classList.add('submit_name');
  form.appendChild(submitName);
  nameContainer.appendChild(form);
  nameContainer.classList.add('name_container');
  nameContainer.classList.remove('hide');
  title.classList.remove('hide');
  title.classList.add('name_title');
  container.appendChild(title);
  container.appendChild(nameContainer);
  getName();
};

标签： javascriptsocket.io