Nuxt 3 + socket.io

page.vue

<script setup lang="ts">
import { io } from 'socket.io-client'

const connected = ref(false)

onMounted(() => {
  const socket = io();

  socket.on('connect', () => {
    connected.value = socket.connected
  });

  socket.on('disconnect', () => {
    connected.value = socket.connected
  });
})
</script>

<template>
  <div>Connected: {{ connected }}</div>
</template>

socket.ts

// server/middleware/socket.ts
import type { IncomingMessage, ServerResponse } from 'http'
import { Server } from 'socket.io'

let server: any = null

export default (req: IncomingMessage, res: ServerResponse) => {
  if (!server) {
    // @ts-expect-error: Nuxt3
    server = res.socket?.server
    const io = new Server(server);

    io.on('connection', (socket) => {
      console.log('Made socket connection');

      socket.on('msg', (msg) => {
        console.log('Recived: ' + msg)

        setTimeout(() => {
          socket.emit('msg', `Response to: ${msg}`)
        }, 1000)
      })

      socket.on('disconnect', () => console.log('disconnected'))
    })
  }
}