В каком жизненном цикле Vue 3 закрыть соединение с вебсокетом после закрытия клиентом сайта?

Question

[rockwell323]

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

//client side 
beforeUnmount(){ //или unmounted()
    this.$socket.emit('exit', this.token_id);
}

//server side

var users = []; //tokenы всех пользователей

socket.on('exit', data => {
    console.log(data)  //ничего не приходит дабы сделать filter по массиву users
    users = users.filter(u => u !== data);
})

Answer 1

[Tema Smirnov]

Надо понимать что вы имеете в виду под фразой "когда клиент выходит с сайта", и какие конкретно вебсокеты используете - стандартные, или либу Socket.io работающую по Websocket транспорту.

• Если подразумеваете закрытие вкладки браузера клиентом (как пример), то в этот момент браузер разорвёт соединение с socket.io сервером, а на сервере произойдёт событие `disconnect` у конкретного сокета, который был привязан к данному подключению.
  Более того - при закрытии вкладки с сайтом, у Vue не вызывается `beforeUnmount` или `unmounted`, поэтому ваш код не сработает - клиент (браузер) ничего не отправит, сервер ничего не получит.
  *Но это можно реализовать самому через слушатель события `beforeunload` у `window` (правда событие не сработает, если произойдёт вылет браузера или самой ОС) , подробнее тут:
  https://forum.vuejs.org/t/detect-browser-close/5001/2
  https://developer.mozilla.org/en-US/docs/Web/API/B...
  https://developers.google.com/web/updates/2018/07/...
  https://developer.mozilla.org/en-US/docs/Web/API/W...
  
  
• Если подразумеваете выход из учетной записи клиента на сайте, то ваш код сработает
  

Пример обработки первого случая (когда клиент выходит с сайта закрывая вкладку) на серверной стороне, если используете Socket.io (по аналогии можно и с обычными вебсокетами, но там придётся детектить разрыв соединения на базе отсутствия ответа на ping-pong со стороны браузера):

// https://socket.io/docs/v4/server-initialization/
import * as Server from 'socket.io'
const io = Server()
io.listen(3000)

// коллекция сокет-подключений
const connections = new Set()

// когда Socket.io сервер словил новое подключение
io.on('connection', (s) => {
  // добавляем это подключение в коллекцию
  connections.add(s)
  // слушаем событие отключения сокета и реагируем на него
  s.once('disconnect', () => {
    // удаляем данное сокет-подключение из коллекции
    connections.delete(s)
  })
})
// connections.size - покажет размер коллекции, то есть количество подключенных клиентов к серверу Socket.io (онлайн на сайте в вашем случае)

Однако данный код можно не использовать в таком виде, тк в Socket.io уже есть под капотом готовые функции и коллекции для работы с подключенными сокетами, поэтому нет необходимости создавать и хранить в памяти свои собственные списки сокет-подключений.
Например в v4, количество/список подключенных клиентов можно получить таким способом:

// https://socket.io/docs/v4/server-instance/#Server-engine
io.engine.clientsCount
// или:
// https://socket.io/docs/v4/server-api/#namespace-allSockets
await io.allSockets()

Comments

[rockwell323]

Огромное спасибо за информацию и решение проблемы, все работает. А я пару часов убил на жизненные циклы Vue 3 думал там проблема)