Идентификация пользователя в websocket (vue, express)?

Question

[Андрей]

Привет!
Работал ли тут кто с такой связкой - Vue.js, express.js и WebSocket?

От кривости сторонних плагинах, хочу использовать стандартную библиотеку ws.

Основной вопрос возникает на тему идентификации. Как серверу понять, что уведомление нужно отправить определенному клиенту сокета? У клиентов при подключении каждый раз свой ID, который генерируется автоматически (во всяком случае в socket.io было именно так). Так и не разобрался, как на клиенте положить в объект сокета кастомное значение.

И не совсем понятно про комнаты, но это менее важно сейчас (но за ссылку на хорошую статью на эту тему буду признателен).

Answer 1

[WebDev]

Вебсокеты, как и http - это протокол без состояния. То есть, после перезагрузки страницы, сервер не знает, вы это или нет.
Поэтому после подключения к вебсокетам, вам нужно отправить на сервер какой-то идентификатор, например свой id.
На сервере хранить соединения и данные о пользователях. Когда нужно будет отправить сообщение, найдете на сервере нужное соединение и отправите в него данные.

Вот тут хороший пример простого чата на вебсокетах. Без socketio, но сути это не меняет. Автор сохраняет всех клиентов в массив и работает с этим массивом.

Comments

[Андрей]

Да, вот на моменте с отправкой id с клиента на сервер возникла трудность. Как это сделать?

[WebDev]

Андрей,
Примерно как-то так

// подключённые клиенты
var clients = {};

//Подключение нового клиента
webSocketServer.on('connection', ws => {
  var id = Math.random();
  clients[id].socket = ws;
});

//Принимаем от пользователя его id
webSocketServer.on('setUserId', data => {
    clients[id].userId = data;
});

//Теперь, чтобы отправить запрос пользователю с id 7, нужно сделать примерно так:
for (i in clients) {
 if (clients[i].userId === 7) {
    clients[i].socket.send(/*Сообщение пользователю №7*/)
 }
}

Соответственно на стороне клиента, после установки соединения, отправляем свой id на сервер.

[Андрей]

WebDev, спасибо! Вечером буду пробовать.

А вот такой момент еще.

Допустим, есть две страницы, чат и лента новостей. При поступлении новости, записи должны обновиться. Естественно, будет какое-то событие "on-new-post" или типа того, сервер его инициализирует, клиент его слушает. Но вопрос вот в чем. Как вызывать это событие только тогда, когда ты на нужной странице?

[WebDev]

Как вызывать это событие только тогда, когда ты на нужной странице?

Вызывать его можно всегда, а на клиенте ингорировать, если он не на нужной странице.

[Андрей]

WebDev, как отправить с клиента при коннекте ID пользователя я пока так и не понял)

В статье автор генерирует id случайным образом, а я хочу, чтобы клиент при коннекте говорил "я такой-то такой-то". Глядя в документацию, сложилось впечатление, что это возможно только с костылями, так как в new WebSocket() запихать дополнительную информацию не удастся.

[WebDev]

Андрей, говорить "я такой-то такой-то" при коннекте не получится. Коннект - это как подключение к базе данных, то есть между клиентом и сервером просто открывается канал связи. Чтобы пользователь сказал "я такой-то такой-то", ему нужно после коннекта отправить данные.
Еще раз простой пример:

//Клиент
websocket.on('connected', () => {//Подключились к вебсокетам
    websocket.emit('я такой-то такой-то', user_id);//Представились серверу
});

//Сервер
const users = {};
websocket.on('connection', ws => {
    const id = randomString;

    users[id].socket = ws; //Записываем в массив с пользователями текущее подключение.
    
    ws.on('такой-то такой-то', userId => {
        users[id].userId = userId; //Записываем в массив с пользователями айдишник пользователя.
    });
});

[CyberGrom]

Делаем стандартную авторизацию и после нее открываем wss коннект передавая hash юзера/текущего коннекта.
wss://site.ru/?hash=userhash или ws://site.ru/?userhash
и затем уже на сервере смотреть и проверять пришедший хеш, и если он не совпал или не валидный, то дропать коннект.
Если совпал - сохранять в массив online[user_id]=ws
и после можно будет знать какие юзеры онлайн, и всем или определенному юзеру послать уведомление и т.д.