personae/app/plugins/socketio.js

import { io } from "socket.io-client"

const LOG_CONNECTIONS = false
const LOG_EVENTS = false
const LOG_LISTENERS = false
const LOG_HOOKS = false

// noinspection JSUnusedGlobalSymbols
export default defineNuxtPlugin({
  name: "socketio",
  enforce: "pre",

  async setup() {
    const { isSignedIn, user } = useAuthClient()
    const config = useRuntimeConfig()
    const socket = io(config.public.websocketHost)

    const isConnected = ref(false)
    const transport = ref("N/A")

    if (socket.connected) {
      onConnect()
    }

    socket.on("connect", onConnect)
    socket.on("disconnect", onDisconnect)

    if (LOG_EVENTS) {
      // log all outgoing events
      socket.onAnyOutgoing((eventName, ...args) =>
        console.log("[app socketio] [outgoing]", eventName, args)
      )
    }

    function onConnect() {
      isConnected.value = true
      transport.value = socket.io.engine.transport.name

      socket.io.engine.on("upgrade", (rawTransport) => {
        transport.value = rawTransport.name
      })

      if (LOG_CONNECTIONS) {
        console.log(
          "[app socketio] [onConnect]",
          import.meta.server ? "server" : "client",
          transport.value,
          isSignedIn.value ? user.value.username : ""
        )
      }
    }

    function onDisconnect() {
      if (LOG_CONNECTIONS) {
        console.log(
          "[app socketio] [onDisconnect]",
          import.meta.server ? "server" : "client",
          transport.value,
          isSignedIn.value ? user.value.username : ""
        )
      }

      isConnected.value = false
      transport.value = "N/A"

      socket.off("connect")
      socket.off("disconnect")
    }

    return {
      provide: {
        socketio: { socket, isConnected, transport }
      }
    }
  },

  hooks: {
    "app:mounted": () => {
      if (LOG_HOOKS) {
        console.log(
          "[app socketio] [app:mounted]",
          import.meta.server ? "server" : "client"
        )
      }

      const {
        $socketio: { socket }
      } = useNuxtApp()

      // useEventHandlers()

      if (LOG_LISTENERS) {
        console.log("[listeners]")

        _forIn(socket._callbacks, (callbacks, event) => {
          console.log(`${event}`, callbacks)
        })
      }

      // reconnect on signin/signout
      watch(useAuthClient().isSignedIn, () => socket.disconnect().connect())
    },

    "app:rendered": () => {
      if (LOG_HOOKS) {
        console.log(
          "[app socketio] [app:rendered]",
          import.meta.server ? "server" : "client"
        )
      }

      useNuxtApp().$socketio.socket.disconnect()
    }
  },

  env: {
    // Set this value to `false` if you don't want the plugin to run when rendering server-only or island components.
    islands: true
  }
})