Отображение имени пользователя, который отключается от сервера

Question

Я пытаюсь отобразить сообщение, когда пользователь отключается от сервера. В настоящее время он работает в том, что он будет отображать сообщение всем подключенным пользователям. Тем не менее, если я пытаюсь использовать переменную user для отображения того, какой пользователь отключился, он показывает имя подключенного клиента для себя, а не фактического пользователя, который ушел. Я попробовал пару вещей, но не могу заставить его работать, и это то, что я придумал. В браузере следующий код будет отображать «undefined покинул чат», когда кто-то отключится.

Как я могу исправить это, чтобы отобразить фактическое имя пользователя?

В сценарии. js:

var user = user;
if (!user) {
  user = prompt('Please choose a username:');
  if (!user) {
    alert('Your name has been set to "Anonymous"');
  } else {
      alert('Your name has been set to "'+ user +'"');
  } 
}

socket.emit('user disconnected', {
    user: user
  });

socket.on('user disconnected', (data) => {
      $('.chat').append(data.user + " has left the chat");
    });

На сервере. js:

server(socket('disconnect', ctx => { console.log(ctx.data); ctx.io.emit('user disconnected', ctx.data); }));

Кроме того, после отключения пользователя сообщение «Транспортное закрытие» отправляется на консоль, а я Я не уверен, что это значит.

Answer 1

ты рядом. Я написал код ниже для вашего примера. Практически это будет намного отличаться от этого, например, добавление базы данных или использование некоторого хранилища сессий.

Ниже указан сервер. js

const app = require('http').createServer(handler);
const io = require('socket.io')(app);
const fs = require('fs');

const userIdMap = {};

app.listen(3000);

function handler(req, res) {
  fs.readFile(__dirname + '/test.html', function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading test.html');
    }

    res.writeHead(200);
    res.end(data);
  });
}

io.on('connection', (socket) => {
  var handshakeData = socket.request;

  const userName = handshakeData._query['user'];
  console.log('userName', userName);
  if (!userName || userName === 'null') {
    console.log('Disconnecting...');
    return socket.disconnect();
  }

  const onLeave = () => {
    console.log('disconnecting', userIdMap[socket.id]);
    socket.broadcast.emit(
      'userDisconnect',
      `${userIdMap[socket.id]} is disconnected`
    );
    delete userIdMap[socket.id];
  };

  userIdMap[socket.id] = handshakeData._query['user'];
  console.log('userIdMap', userIdMap);

  socket.emit('news', { hello: 'world' });

  socket.on('disconnect', onLeave);
  socket.on('close', onLeave);
});

В приведенном выше коде

• Я сохранил карту имени пользователя и socket.id, которая уникальна для каждого соединения.
• Имя пользователя хранится на карте - userIdMap. Обратите внимание, что, как я прочитал userName из запроса.
• Я использую socket.broadcast.emit() для широковещательной рассылки всем клиентам на случай, если кто-то уйдет (закрытие вкладки или перезагрузка).
• мы транслируем на userDisconnect событие на случай, если кто-то уйдет. Клиентская сторона должна добавить слушателя, чтобы получить уведомление об этом.

Ниже приведена реализация клиента:

<script src="https://cdn.jsdelivr.net/npm/socket.io-client@2/dist/socket.io.js"></script>
<script>
  var user = user;
  if (!user) {
    user = prompt('Please choose a username:');
    if (!user) {
      alert('Your name has been set to "Anonymous"');
    } else {
      alert('Your name has been set to "' + user + '"');
    }
  }

  var socket = io('http://localhost:3000', { query: `user=${user}` });

  socket.on('connect', (data) => {
    var handshakeData = socket.request;
    console.log('connect', data);
  });

  socket.on('news', function (data) {
    console.log('news', data);
  });

  socket.on('userDisconnect', (data) => alert(data));
</script>

Надеется, что это поможет :) Счастливого кодирования