Ответы пользователя по тегу Socket.io
  • В каком жизненном цикле Vue 3 закрыть соединение с вебсокетом после закрытия клиентом сайта?

    TemaSM
    @TemaSM
    Fullstack, DevOps, InfSec
    Надо понимать что вы имеете в виду под фразой "когда клиент выходит с сайта", и какие конкретно вебсокеты используете - стандартные, или либу 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()
    Ответ написан
    1 комментарий