How to disconnect a client for being inactive in chat for a specific time (socket.io, javascript)

问题

In this chat app I want the server to disconnect clients who's been inactive for x (configurable) amount of time.

I think the default is 60 sec, I think I should use page Timeout as you can see in my server file but not sure how to make it work.

The idea is to have a timer for let's say 2 minutes of inactivity and you get kicked out with a message appearing afterwards in the feedbackBox function in name.js file.

My code is below:

server.js

const PORT = 3000;
const io = require('socket.io')(PORT, {
  pingTimeout: 60000
});
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];
  });
});

name.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.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();
};

chat.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:

You could set a timeout on the socket and clear the timeout every time you receive a message from that client:

socket.on("sent-chat-message", message => {
    clearTimeout(socket.inactivityTimeout);

    socket.inactivityTimeout = setTimeout(() => socket.disconnect(true), 1000 * 60);
});

I'm not sure if the connection will be re-established automatically, in which case you'd have to do this on the client-side as well.

回答2:

You should handle this on client side. You have a disconnect method on client side, just start a timer and keep track of the inactive time and after the limit just call the method to disconnect. But, keep in mind to reconnect the user after he become active again

来源：https://stackoverflow.com/questions/59749758/how-to-disconnect-a-client-for-being-inactive-in-chat-for-a-specific-time-socke

标签

javascript

express

Socket.IO