Nuxt Socket.io

A Nuxt module for socket.io

• ✨  Release Notes

🚀 Features

• ⛰ Nuxt 3 ready
• 👌 Zero config: Configuration for common use cases
• ⚡ Nitro ready: Integration with nitro server.
• 🍍 Pinia ready: Integration with @pinia/nuxt module.
• ⚙️ Auto import: Provide auto import functions for client and server side.
• 🪝 Customizable: Provide hooks for customization on client and server side.
• 🦾 Type strong: Written in typescript

📦 Install

1npm i @xarenas107/nuxt-socket-io -D 

🦄 Usage

Add @xarenas107/nuxt-socket-io to the modules section of nuxt.config.ts.

1export default defineNuxtConfig({
2  modules: [
3    '@xarenas107/nuxt-socket-io'
4  ]
5})

Extends socket.io configuration with nuxt hooks.

Hook	Argument	#Enviroment	Description
io:server:config	server options	server	Called before configuring socket.io server
io:server:done	socket server	server	Called after socket.io server initialization
io:config	client options	client	Called before configuring socket.io-client
io:done	socket	client	Called after socket.io-client initialization

Use useSocketIO() or useSocketIOStore() on client side and the useSocketIO() on server side.

1// On client side
2<script lang='ts' setup>
3  const io = useSocketIOStore() // Prevent duplicated listener
4  io.on('pong',(message:string) => console.log(message))
5  
6  await $fetch('/api/ping')
7</script>

1// On server side
2export default defineEventHandler(event => {
3  // You can access to io server through `event.context.io` or `useSocketIO().server`
4  const io = useSocketIO(event)
5  
6  const id = io.getId()
7  if (id) io.to(id,'pong','Response from server')
8  return
9})

Or you can create your own methods

1// On server side plugin `server/plugins/wss.ts`
2export default defineNitroPlugin(nitro => {
3
4  // Add nitro hook
5  nitro.hooks.hook('render:response', (response,{ event }) => {
6    const { session, user, io } = event.context
7    const uid = user?.id || session?.user?.toString()
8
9    // Add connection listener
10    if (!event.context.io?.server?.sockets?.adapter?.rooms?.has(uid)) {
11      io.server.on('connection', socket => {
12        if (!uid) return
13        socket.join(uid)
14        socket.on('disconnect',() => socket.leave(uid))
15      })
16    }
17  })
18})

1// On server side middleware `server/middleware/wss.ts`
2import type { Server } from 'socket.io'
3
4export default defineEventHandler(event => {
5  const { session, user, io } = event.context
6  const uid = user?.id || session?.user?.toString()
7
8  event.context.io.emit = (event, message) => {
9    return io.server.to(uid).compress(true).emit(event, message)
10  }
11})
12
13declare module 'h3' {
14  interface SocketH3EventContext {
15    emit: Server['emit']
16  }
17}

1// On server handler `server/api/chat.post.ts`
2export default defineEventHandler(event => {
3  const body = await readBody(event)
4  
5  // Send data to client
6  const io = useSocketIO(event)
7  io.emit('message', body)
8
9  return null
10})

That's it! You can now use @xarenas107/nuxt-socket-io in your Nuxt app ✨