Почему сокет излучает несколько раз? - PullRequest
2 голосов
/ 14 января 2020

Я создаю приложение чата с сокетами. Есть целевая страница для ввода вашего псевдонима, а затем есть страница чата.

Я проверяю, чтобы не было нескольких псевдонимов, но происходит то, что, когда вы присоединяетесь после, скажем, 2 попыток «псевдоним уже используется» , сообщение «Вы присоединились» будет отображаться 3 раза (2 для неудачного и одно для правильного).

Сообщение «Вы присоединились» находится внутри функции addMessageForm в чате. js файл. Эта функция вызывается из имени. js file.

Почему это происходит?

Вот мой код:

server. js

const PORT = 3000;
const io = require('socket.io')(PORT);
const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

const users = {};

io.on('connection', socket => {
  socket.on('new-user', name => {
    if (Object.values(users).includes(name)) {
      socket.emit('name-taken', name);
    }
    if (!Object.values(users).includes(name)) {
      users[socket.id] = name;
      socket.emit('user-accepted');
      socket.broadcast.emit('user-connected', name);
    }
  });
  socket.on('send-chat-message', message => {
    socket.broadcast.emit('chat-message', {
      message: message,
      name: users[socket.id]
    });
  });
  socket.on('disconnect', reason => {
    socket.broadcast.emit('user-disconnected', users[socket.id]);
    delete users[socket.id];
  });
});

имя. js

const container = document.querySelector('.container');
const nameContainer = document.createElement('section');
const title = document.createElement('h1');
const form = document.createElement('form');
const nameInput = document.createElement('input');
const submitName = document.createElement('button');

title.innerText = 'Enter Your Name';
submitName.innerText = 'Connect';

const getName = () => {
  form.addEventListener('submit', e => {
    e.preventDefault();
    const name = nameInput.value;
    socket.emit('new-user', name);
    nameInput.value = '';
    socket.on('name-taken', () => {
      feedbackBox('Nickname already taken');
      //const warningBox = document.createElement('section');
      //warningBox.classList.add('name-taken');
      //warningBox.innerText = `'${name}' is already taken. Select another name please.`;
      //container.appendChild(warningBox);
    });
    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();
};

чат. js

//const socket = io('http://localhost:3000');

const showFeedback = document.createElement('section');
const messageContainer = document.createElement('section');
const messageForm = document.createElement('form');
const messageInput = document.createElement('input');
const submitMessage = document.createElement('button');
const disconnectButton = document.createElement('button');

submitMessage.innerText = 'Send';
disconnectButton.innerText = 'X';

messageContainer.classList.add('message-container');
messageForm.classList.add('send-container');
messageInput.classList.add('message-input');
submitMessage.classList.add('send-button');
disconnectButton.classList.add('disconnect-button');

const addMessageForm = () => {
  showFeedback.classList.add('hide');
  messageContainer.classList.remove('hide');
  messageForm.classList.remove('hide');
  disconnectButton.classList.remove('hide');
  messageForm.appendChild(messageInput);
  messageForm.appendChild(submitMessage);
  container.appendChild(disconnectButton);
  container.appendChild(messageContainer);
  container.appendChild(messageForm);
  appendMessage('You joined');
};
//const name = prompt('What is your name?');
//socket.emit('new-user', name);

socket.on('chat-message', data => {
  appendMessage(`${data.name}: ${data.message}`);
});

socket.on('user-connected', name => {
  appendMessage(`${name} connected`);
});

socket.on('user-disconnected', name => {
  appendMessage(`${name} left the chat`);
});

messageForm.addEventListener('submit', e => {
  e.preventDefault();
  const message = messageInput.value;
  appendMessage(`You: ${message}`);
  socket.emit('send-chat-message', message);
  messageInput.value = '';
});

function appendMessage(message) {
  const messageElement = document.createElement('section');
  messageElement.innerText = message;
  messageContainer.append(messageElement);
}

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

1 Ответ

1 голос
/ 14 января 2020

Похоже, что socket.io-клиент добавляет дубликаты списков событий через .on().

попробуйте добавить socket.off(event); перед этими строками:

...
nameInput.value = '';
socket.off('name-taken');        // this line!!!
socket.on('name-taken', () => {
  feedbackBox('Nickname already taken');
  // your commented stuff from above ....
});
socket.off('user-accepted');     // this line!!!
socket.on('user-accepted', () => {
  title.classList.add('hide');
  nameContainer.classList.add('hide');
  addMessageForm();
});
...
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...